Update index.html

index.html

@@ -88,7 +88,8 @@
       transform: translate(-50%, -50%);
       cursor: grab;
       box-shadow: 0 0 15px rgba(0, 150, 255, 0.6);
-      transition: all 0.05s ease-out;
+      transition: none;
+      will-change: transform;
     }
     
     #joystickHandle:active {
@@ -278,10 +279,9 @@
 
     let scene, camera, renderer, playerCube, garage;
     let playerPos = { x: 0, y: 1, z: 0 };
-    let moveForward = 0;
-    let turnDirection = 0;
-    let moveSpeed = 0.15;
-    let turnSpeed = 0.04;
+    let moveSideways = 0;
+    let moveForwardBack = 0;
+    let moveSpeed = 0.08;
     let cameraRotation = { x: 0, y: 0 };
     let spawnPoint = { x: -3.5719999999999996, y: 1, z: 0.20199999999999968 };
     let joystickActive = false;
@@ -373,11 +373,13 @@
       joystick.addEventListener('touchstart', (e) => {
         joystickActive = true;
         e.preventDefault();
+        e.stopPropagation();
       });
 
       joystick.addEventListener('touchmove', (e) => {
         if (!joystickActive) return;
         e.preventDefault();
+        e.stopPropagation();
         const touch = e.touches[0];
         const rect = joystick.getBoundingClientRect();
         const centerX = rect.left + rect.width / 2;
@@ -388,30 +390,30 @@
         const maxDistance = 60;
 
         if (distance > 5) {
-          const angle = Math.atan2(dy, dx);
           const limitedDistance = Math.min(distance, maxDistance);
-          const handleX = Math.cos(angle) * limitedDistance;
-          const handleY = Math.sin(angle) * limitedDistance;
+          const normalizedDx = (dx / distance) * limitedDistance;
+          const normalizedDy = (dy / distance) * limitedDistance;
           
-          joystickHandle.style.left = `calc(50% + ${handleX}px)`;
-          joystickHandle.style.top = `calc(50% + ${handleY}px)`;
+          joystickHandle.style.transform = `translate(calc(-50% + ${normalizedDx}px), calc(-50% + ${normalizedDy}px))`;
           
-          // Up = forward (negative dy), Down = backward (positive dy)
-          moveForward = -(dy / maxDistance);
-          // Right = turn right (positive dx), Left = turn left (negative dx)
-          turnDirection = dx / maxDistance;
+          // Forward/backward: negative dy = forward, positive dy = backward
+          moveForwardBack = -(dy / maxDistance);
+          // Left/right: negative dx = left, positive dx = right
+          moveSideways = dx / maxDistance;
         } else {
-          moveForward = 0;
-          turnDirection = 0;
+          joystickHandle.style.transform = 'translate(-50%, -50%)';
+          moveForwardBack = 0;
+          moveSideways = 0;
         }
       });
 
-      joystick.addEventListener('touchend', () => {
+      joystick.addEventListener('touchend', (e) => {
         joystickActive = false;
-        joystickHandle.style.left = '50%';
-        joystickHandle.style.top = '50%';
-        moveForward = 0;
-        turnDirection = 0;
+        e.preventDefault();
+        e.stopPropagation();
+        joystickHandle.style.transform = 'translate(-50%, -50%)';
+        moveForwardBack = 0;
+        moveSideways = 0;
       });
 
       document.getElementById('upBtn').addEventListener('touchstart', (e) => {
@@ -428,32 +430,45 @@
       let lastLookPos = { x: 0, y: 0 };
 
       document.addEventListener('touchstart', (e) => {
+        if (joystickActive) return;
+        
         const touch = e.touches[0];
-        // Smaller area: 35-65% horizontal, 30-70% vertical
-        if (touch.clientX > window.innerWidth * 0.35 && touch.clientX < window.innerWidth * 0.65 &&
-            touch.clientY > window.innerHeight * 0.30 && touch.clientY < window.innerHeight * 0.70) {
-          const joystickRect = joystick.getBoundingClientRect();
-          const isTouchingJoystick = touch.clientX >= joystickRect.left && 
-                                     touch.clientX <= joystickRect.right &&
-                                     touch.clientY >= joystickRect.top && 
-                                     touch.clientY <= joystickRect.bottom;
-          
-          const coordsRect = document.getElementById('coordinates').getBoundingClientRect();
-          const isTouchingCoords = touch.clientX >= coordsRect.left && 
-                                   touch.clientX <= coordsRect.right &&
-                                   touch.clientY >= coordsRect.top && 
-                                   touch.clientY <= coordsRect.bottom;
-          
-          if (!isTouchingJoystick && !isTouchingCoords) {
-            isLooking = true;
-            lastLookPos = { x: touch.clientX, y: touch.clientY };
-            e.preventDefault();
-          }
+        
+        // Check if touching joystick area
+        const joystickRect = joystick.getBoundingClientRect();
+        if (touch.clientX >= joystickRect.left - 20 && 
+            touch.clientX <= joystickRect.right + 20 &&
+            touch.clientY >= joystickRect.top - 20 && 
+            touch.clientY <= joystickRect.bottom + 20) {
+          return;
+        }
+        
+        // Check if touching buttons area
+        const buttonsArea = document.querySelector('.button-group');
+        const buttonsRect = buttonsArea.getBoundingClientRect();
+        if (touch.clientX >= buttonsRect.left - 20 && 
+            touch.clientX <= buttonsRect.right + 20 &&
+            touch.clientY >= buttonsRect.top - 20 && 
+            touch.clientY <= buttonsRect.bottom + 20) {
+          return;
         }
+        
+        // Check if touching coordinates area
+        const coordsRect = document.getElementById('coordinates').getBoundingClientRect();
+        if (touch.clientX >= coordsRect.left - 10 && 
+            touch.clientX <= coordsRect.right + 10 &&
+            touch.clientY >= coordsRect.top - 10 && 
+            touch.clientY <= coordsRect.bottom + 10) {
+          return;
+        }
+        
+        isLooking = true;
+        lastLookPos = { x: touch.clientX, y: touch.clientY };
+        e.preventDefault();
       });
 
       document.addEventListener('touchmove', (e) => {
-        if (!isLooking) return;
+        if (!isLooking || joystickActive) return;
         e.preventDefault();
         const touch = e.touches[0];
         const deltaX = touch.clientX - lastLookPos.x;
@@ -549,17 +564,20 @@
     function animate() {
       requestAnimationFrame(animate);
 
-      // Only turn and move when joystick is active
+      // Calculate movement based on camera direction
       if (joystickActive) {
-        cameraRotation.y += turnDirection * turnSpeed;
-
-        const forwardX = -Math.sin(cameraRotation.y) * moveForward * moveSpeed;
-        const forwardZ = -Math.cos(cameraRotation.y) * moveForward * moveSpeed;
+        // Forward/backward relative to camera
+        const forwardX = -Math.sin(cameraRotation.y) * moveForwardBack * moveSpeed;
+        const forwardZ = -Math.cos(cameraRotation.y) * moveForwardBack * moveSpeed;
+        
+        // Left/right strafe relative to camera
+        const strafeX = Math.cos(cameraRotation.y) * moveSideways * moveSpeed;
+        const strafeZ = -Math.sin(cameraRotation.y) * moveSideways * moveSpeed;
 
         const newPos = { 
-          x: playerPos.x + forwardX,
+          x: playerPos.x + forwardX + strafeX,
           y: playerPos.y,
-          z: playerPos.z + forwardZ
+          z: playerPos.z + forwardZ + strafeZ
         };
         
         playerPos = checkCollisions(newPos);