Spaces:

vikassabbi
/

vsspace

Running

App Files Files Community

vikassabbi commited on Apr 25, 2025

Commit

ff1f3ab

verified ·

1 Parent(s): 4a1548c

Add 2 files

Browse files

Files changed (2) hide show

index.html +76 -12
prompts.txt +1 -0

index.html CHANGED Viewed

@@ -232,6 +232,27 @@
             padding: 5px;
             border-radius: 3px;
         }
     </style>
 </head>
 <body>
@@ -244,6 +265,14 @@
         <div id="game-over">GAME OVER<br><span style="font-size: 24px;">Score: 0</span><br><button id="restart-button" style="margin-top: 20px; padding: 10px 20px; background: #f00; color: white; border: none; border-radius: 5px; cursor: pointer; pointer-events: auto;">PLAY AGAIN</button></div>
         <div class="powerup-indicator" id="powerup-indicator">DOUBLE FIRE ACTIVE!</div>
         <div id="mobile-controls">
             <div id="joystick">
                 <div id="joystick-base">
@@ -260,8 +289,8 @@
     <div id="start-screen">
         <h1 class="title">GALACTIC DEFENDER</h1>
         <div class="instructions">
-            <p><strong>CONTROLS:</strong> WASD to move, SPACE to fire, Q/E to roll, SHIFT to boost</p>
-            <p><strong>MOUSE:</strong> Look around to change direction</p>
             <p><strong>POWER-UPS:</strong> Green = Health, Yellow = Double Fire</p>
             <p>Destroy alien ships before they reach you! Full 3D movement enabled.</p>
         </div>
@@ -281,8 +310,8 @@
         // Three.js variables
         let scene, camera, renderer;
-        let player, playerSpeed = 0.5;
-        let boostSpeed = 1.5;
         let currentSpeed = playerSpeed;
         let bullets = [];
         let enemies = [];
@@ -301,8 +330,8 @@
         let playerQuaternion = new THREE.Quaternion();
         let playerEuler = new THREE.Euler(0, 0, 0, 'YXZ');
         let playerVelocity = new THREE.Vector3();
-        let playerRotationSpeed = 0.05;
-        let playerRollSpeed = 0.03;
         let loader = new THREE.GLTFLoader();
         // Mobile controls
@@ -387,7 +416,11 @@
             // Start button event listener
             document.getElementById('start-button').addEventListener('click', startGame);
             document.getElementById('restart-button').addEventListener('click', restartGame);
-            document.getElementById('fire-btn').addEventListener('touchstart', () => keys[' '] = true);
             document.getElementById('fire-btn').addEventListener('touchend', () => keys[' '] = false);
             // Start animation loop
@@ -401,6 +434,32 @@
             joystickBase.addEventListener('touchstart', handleJoystickStart, { passive: false });
             joystickBase.addEventListener('touchmove', handleJoystickMove, { passive: false });
             joystickBase.addEventListener('touchend', handleJoystickEnd, { passive: false });
         }
         function handleJoystickStart(e) {
@@ -435,14 +494,14 @@
             const posY = limitedDistance * Math.sin(angle);
             joystickHead.style.transform = `translate(${posX}px, ${posY}px)`;
-            // Calculate movement direction
             movementX = dx / maxDistance;
-            movementY = dy / maxDistance;
             // Normalize if outside circle
             if (distance > maxDistance) {
                 movementX = dx / distance;
-                movementY = dy / distance;
             }
         }
@@ -800,6 +859,11 @@
                 debugMode = !debugMode;
                 document.getElementById('debug-info').style.display = debugMode ? 'block' : 'none';
             }
         }
         function onKeyUp(event) {
@@ -870,7 +934,7 @@
                 playerVelocity.add(right.multiplyScalar(moveX * currentSpeed * delta * 60));
                 playerVelocity.add(forward.multiplyScalar(moveY * currentSpeed * delta * 60));
             } else {
-                // Keyboard controls
                 if (keys.w || keys.ArrowUp) playerVelocity.z -= currentSpeed * delta * 60;
                 if (keys.s || keys.ArrowDown) playerVelocity.z += currentSpeed * delta * 60;
                 if (keys.a || keys.ArrowLeft) playerVelocity.x -= currentSpeed * delta * 60;
@@ -890,7 +954,7 @@
             // Update player rotation based on direction
             player.quaternion.copy(playerQuaternion);
-            // Shooting
             if (keys[' ']) {
                 const now = Date.now();
                 if (now - (player.lastShot || 0) > 300) { // Shoot every 300ms

             padding: 5px;
             border-radius: 3px;
         }
+        #desktop-controls {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #aaa;
+            font-size: 14px;
+            text-align: center;
+            background: rgba(0,0,0,0.5);
+            padding: 10px 20px;
+            border-radius: 20px;
+            pointer-events: none;
+        }
+        .control-hint {
+            display: inline-block;
+            margin: 0 5px;
+            padding: 2px 8px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 4px;
+            border: 1px solid #0ff;
+        }
     </style>
 </head>
 <body>
         <div id="game-over">GAME OVER<br><span style="font-size: 24px;">Score: 0</span><br><button id="restart-button" style="margin-top: 20px; padding: 10px 20px; background: #f00; color: white; border: none; border-radius: 5px; cursor: pointer; pointer-events: auto;">PLAY AGAIN</button></div>
         <div class="powerup-indicator" id="powerup-indicator">DOUBLE FIRE ACTIVE!</div>
+        <div id="desktop-controls">
+            <span class="control-hint">WASD</span> Move |
+            <span class="control-hint">Mouse</span> Aim |
+            <span class="control-hint">Space</span> Fire |
+            <span class="control-hint">Shift</span> Boost |
+            <span class="control-hint">Q/E</span> Roll
+        </div>
         <div id="mobile-controls">
             <div id="joystick">
                 <div id="joystick-base">
     <div id="start-screen">
         <h1 class="title">GALACTIC DEFENDER</h1>
         <div class="instructions">
+            <p><strong>DESKTOP CONTROLS:</strong> WASD to move, Mouse to aim, SPACE to fire, SHIFT to boost, Q/E to roll</p>
+            <p><strong>MOBILE CONTROLS:</strong> Virtual joystick to move, FIRE button to shoot</p>
             <p><strong>POWER-UPS:</strong> Green = Health, Yellow = Double Fire</p>
             <p>Destroy alien ships before they reach you! Full 3D movement enabled.</p>
         </div>
         // Three.js variables
         let scene, camera, renderer;
+        let player, playerSpeed = 0.8; // Increased base speed
+        let boostSpeed = 2.0; // Increased boost speed
         let currentSpeed = playerSpeed;
         let bullets = [];
         let enemies = [];
         let playerQuaternion = new THREE.Quaternion();
         let playerEuler = new THREE.Euler(0, 0, 0, 'YXZ');
         let playerVelocity = new THREE.Vector3();
+        let playerRotationSpeed = 0.08; // Increased rotation speed
+        let playerRollSpeed = 0.05; // Increased roll speed
         let loader = new THREE.GLTFLoader();
         // Mobile controls
             // Start button event listener
             document.getElementById('start-button').addEventListener('click', startGame);
             document.getElementById('restart-button').addEventListener('click', restartGame);
+            document.getElementById('fire-btn').addEventListener('touchstart', () => {
+                keys[' '] = true;
+                // Auto-fire when holding the button
+                if (!gameOver) shoot();
+            });
             document.getElementById('fire-btn').addEventListener('touchend', () => keys[' '] = false);
             // Start animation loop
             joystickBase.addEventListener('touchstart', handleJoystickStart, { passive: false });
             joystickBase.addEventListener('touchmove', handleJoystickMove, { passive: false });
             joystickBase.addEventListener('touchend', handleJoystickEnd, { passive: false });
+            // Add touch event for the whole screen to control aiming
+            renderer.domElement.addEventListener('touchmove', handleTouchAim, { passive: false });
+        }
+        function handleTouchAim(e) {
+            if (gameOver || !joystickActive) return;
+            e.preventDefault();
+            const touch = e.touches[0];
+            const centerX = window.innerWidth / 2;
+            const centerY = window.innerHeight / 2;
+            // Calculate relative movement from center
+            const movementX = (touch.clientX - centerX) / 100;
+            const movementY = (touch.clientY - centerY) / 100;
+            // Update player direction based on touch position
+            playerEuler.y -= movementX * 0.002;
+            playerEuler.x -= movementY * 0.002;
+            // Limit vertical rotation to prevent flipping
+            playerEuler.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, playerEuler.x));
+            playerQuaternion.setFromEuler(playerEuler);
+            playerDirection.set(0, 0, -1).applyQuaternion(playerQuaternion);
         }
         function handleJoystickStart(e) {
             const posY = limitedDistance * Math.sin(angle);
             joystickHead.style.transform = `translate(${posX}px, ${posY}px)`;
+            // Calculate movement direction (invert Y for natural movement)
             movementX = dx / maxDistance;
+            movementY = -dy / maxDistance; // Inverted Y axis
             // Normalize if outside circle
             if (distance > maxDistance) {
                 movementX = dx / distance;
+                movementY = -dy / distance; // Inverted Y axis
             }
         }
                 debugMode = !debugMode;
                 document.getElementById('debug-info').style.display = debugMode ? 'block' : 'none';
             }
+            // Auto-fire when space is held down
+            if (event.key === ' ' && !gameOver) {
+                shoot();
+            }
         }
         function onKeyUp(event) {
                 playerVelocity.add(right.multiplyScalar(moveX * currentSpeed * delta * 60));
                 playerVelocity.add(forward.multiplyScalar(moveY * currentSpeed * delta * 60));
             } else {
+                // Keyboard controls (now more responsive)
                 if (keys.w || keys.ArrowUp) playerVelocity.z -= currentSpeed * delta * 60;
                 if (keys.s || keys.ArrowDown) playerVelocity.z += currentSpeed * delta * 60;
                 if (keys.a || keys.ArrowLeft) playerVelocity.x -= currentSpeed * delta * 60;
             // Update player rotation based on direction
             player.quaternion.copy(playerQuaternion);
+            // Auto-fire when space is held down
             if (keys[' ']) {
                 const now = Date.now();
                 if (now - (player.lastShot || 0) > 300) { // Shoot every 300ms

prompts.txt CHANGED Viewed

	@@ -0,0 +1 @@


1	+ the controls are not that good, can you fix that?