Update game.js

game.js

@@ -105,41 +105,30 @@ class TankPlayer {
     }
 
     update(mouseX, mouseY) {
-        if (!this.body || !this.turretGroup) return;
-        
-        const targetAngle = Math.atan2(mouseX, mouseY);
-        const currentRotation = this.turretGroup.rotation.y;
-        const rotationDiff = targetAngle - currentRotation;
-        
-        let normalizedDiff = rotationDiff;
-        while (normalizedDiff > Math.PI) normalizedDiff -= Math.PI * 2;
-        while (normalizedDiff < -Math.PI) normalizedDiff += Math.PI * 2;
-        
-        this.turretGroup.rotation.y += normalizedDiff * 0.1;
-
-        // 총알 업데이트
-        for (let i = this.bullets.length - 1; i >= 0; i--) {
-            const bullet = this.bullets[i];
-            bullet.position.add(bullet.velocity);
-
-            // 총알이 맵 밖으로 나가면 제거
-            if (Math.abs(bullet.position.x) > MAP_SIZE/2 || 
-                Math.abs(bullet.position.z) > MAP_SIZE/2) {
-                scene.remove(bullet);
-                this.bullets.splice(i, 1);
-            }
-        }
-    }
+   if (!this.body || !this.turretGroup) return;
+   
+   // 총알 업데이트만 수행하고 포탑 회전은 Game 클래스의 handleMovement에서 처리
+   for (let i = this.bullets.length - 1; i >= 0; i--) {
+       const bullet = this.bullets[i];
+       bullet.position.add(bullet.velocity);
+
+       // 총알이 맵 밖으로 나가면 제거
+       if (Math.abs(bullet.position.x) > MAP_SIZE/2 || 
+           Math.abs(bullet.position.z) > MAP_SIZE/2) {
+           scene.remove(bullet);
+           this.bullets.splice(i, 1);
+       }
+   }
+}
 
     move(direction) {
-        if (!this.body) return;
-        
-        const moveVector = new THREE.Vector3();
-        moveVector.x = direction.x * this.moveSpeed;
-        moveVector.z = direction.z * this.moveSpeed;
-        
-        moveVector.applyEuler(this.body.rotation);
-        this.body.position.add(moveVector);
+    if (!this.body) return;
+    
+    const moveVector = new THREE.Vector3();
+    moveVector.x = direction.x * this.moveSpeed;
+    moveVector.z = direction.z * this.moveSpeed;
+    
+    this.body.position.add(moveVector);
     }
 
     rotate(angle) {
@@ -339,142 +328,156 @@ class Game {
     }
 
     async initialize() {
-        try {
-            // 조명 설정
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-            this.scene.add(ambientLight);
-
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            directionalLight.position.set(50, 50, 50);
-            directionalLight.castShadow = true;
-            directionalLight.shadow.mapSize.width = 2048;
-            directionalLight.shadow.mapSize.height = 2048;
-            this.scene.add(directionalLight);
-
-            // 지형 생성
-            const ground = new THREE.Mesh(
-                new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE),
-                new THREE.MeshStandardMaterial({ 
-                    color: 0x333333,
-                    roughness: 0.9,
-                    metalness: 0.1
-                })
-            );
-            ground.rotation.x = -Math.PI / 2;
-            ground.receiveShadow = true;
-            this.scene.add(ground);
-
-            // 건물 생성
-            await this.createBuildings();
-
-            // 탱크 초기화
-            await this.tank.initialize(this.scene, this.loader);
-            if (!this.tank.isLoaded) {
-                throw new Error('Tank loading failed');
-            }
-
-            // FPS 카메라 설정
-            this.camera.position.set(-15, 10, -15);
-            this.camera.lookAt(new THREE.Vector3(0, 0, 0));
-
-            // 로딩 완료
-            this.isLoading = false;
-            document.getElementById('loading').style.display = 'none';
-
-            // 게임 시작
-            this.animate();
-            this.spawnEnemies();
-            this.startGameTimer();
-
-        } catch (error) {
-            console.error('Game initialization error:', error);
-            this.handleLoadingError();
-        }
-    }
+   try {
+       // 조명 설정
+       const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+       this.scene.add(ambientLight);
+
+       const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+       directionalLight.position.set(50, 50, 50);
+       directionalLight.castShadow = true;
+       directionalLight.shadow.mapSize.width = 2048;
+       directionalLight.shadow.mapSize.height = 2048;
+       this.scene.add(directionalLight);
+
+       // 지형 생성
+       const ground = new THREE.Mesh(
+           new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE),
+           new THREE.MeshStandardMaterial({ 
+               color: 0x333333,
+               roughness: 0.9,
+               metalness: 0.1
+           })
+       );
+       ground.rotation.x = -Math.PI / 2;
+       ground.receiveShadow = true;
+       this.scene.add(ground);
+
+       // 건물 생성
+       await this.createBuildings();
+
+       // 탱크 초기화
+       await this.tank.initialize(this.scene, this.loader);
+       if (!this.tank.isLoaded) {
+           throw new Error('Tank loading failed');
+       }
+
+       // 카메라 설정 수정
+       this.camera.position.set(-20, 10, -20);
+       this.camera.lookAt(new THREE.Vector3(0, 0, 0));
+
+       // 로딩 완료
+       this.isLoading = false;
+       document.getElementById('loading').style.display = 'none';
+
+       // 게임 시작
+       this.animate();
+       this.spawnEnemies();
+       this.startGameTimer();
+
+   } catch (error) {
+       console.error('Game initialization error:', error);
+       this.handleLoadingError();
+   }
+}
 
     setupEventListeners() {
-        // 키보드 이벤트
-        document.addEventListener('keydown', (event) => {
-            if (this.isLoading) return;
-            switch(event.code) {
-                case 'KeyW': this.keys.forward = true; break;
-                case 'KeyS': this.keys.backward = true; break;
-                case 'KeyA': this.keys.left = true; break;
-                case 'KeyD': this.keys.right = true; break;
-                case 'Escape': 
-                    if (this.controls.isLocked) {
-                        this.controls.unlock();
-                    }
-                    break;
-            }
-        });
-
-        document.addEventListener('keyup', (event) => {
-            if (this.isLoading) return;
-            switch(event.code) {
-                case 'KeyW': this.keys.forward = false; break;
-                case 'KeyS': this.keys.backward = false; break;
-                case 'KeyA': this.keys.left = false; break;
-                case 'KeyD': this.keys.right = false; break;
-            }
-        });
-
-        // 발사 및 포인터 락 이벤트
-        document.addEventListener('click', () => {
-            if (document.pointerLockElement !== document.body) {
-                this.controls.lock();
-            } else {
-                const bullet = this.tank.shoot(this.scene);
-                if (bullet) {
-                    // 총알 발사 효과음이나 시각효과 추가 가능
-                }
-            }
-        });
-
-        // 창 크기 변경 이벤트
-        window.addEventListener('resize', () => {
-            this.camera.aspect = window.innerWidth / window.innerHeight;
-            this.camera.updateProjectionMatrix();
-            this.renderer.setSize(window.innerWidth, window.innerHeight);
-        });
-    }
-
-    handleMovement() {
-        if (!this.tank.isLoaded || !this.controls.isLocked) return;
+    // 키보드 이벤트
+    document.addEventListener('keydown', (event) => {
+        if (this.isLoading) return;
+        switch(event.code) {
+            case 'KeyW': this.keys.forward = true; break;
+            case 'KeyS': this.keys.backward = true; break;
+            case 'KeyA': this.keys.left = true; break;
+            case 'KeyD': this.keys.right = true; break;
+            case 'Escape': break; // controls 관련 코드 제거
+        }
+    });
+
+    document.addEventListener('keyup', (event) => {
+        if (this.isLoading) return;
+        switch(event.code) {
+            case 'KeyW': this.keys.forward = false; break;
+            case 'KeyS': this.keys.backward = false; break;
+            case 'KeyA': this.keys.left = false; break;
+            case 'KeyD': this.keys.right = false; break;
+        }
+    });
 
-        const direction = new THREE.Vector3();
-        const cameraDirection = new THREE.Vector3();
-        this.camera.getWorldDirection(cameraDirection);
+    // 마우스 움직임 이벤트 추가
+    document.addEventListener('mousemove', (event) => {
+        if (this.isLoading) return;
         
-        if (this.keys.forward) direction.z += 1;
-        if (this.keys.backward) direction.z -= 1;
-        if (this.keys.left) direction.x -= 1;
-        if (this.keys.right) direction.x += 1;
+        // 화면 중앙 기준으로 마우스 위치 계산
+        const centerX = window.innerWidth / 2;
+        const centerY = window.innerHeight / 2;
         
-        if (direction.length() > 0) {
-            direction.normalize();
-            // 카메라 방향을 기준으로 이동
-            direction.applyAxisAngle(new THREE.Vector3(0, 1, 0), this.camera.rotation.y);
-            this.tank.move(direction);
-
-            // 탱크 본체를 카메라 방향으로 회전
-            if (Math.abs(direction.z) > 0 || Math.abs(direction.x) > 0) {
-                this.tank.body.rotation.y = Math.atan2(direction.x, direction.z);
-            }
+        this.mouse.x = (event.clientX - centerX) / centerX;
+        this.mouse.y = (event.clientY - centerY) / centerY;
+    });
+
+    // 발사 이벤트 (포인터 락 관련 코드 제거)
+    document.addEventListener('click', () => {
+        const bullet = this.tank.shoot(this.scene);
+        if (bullet) {
+            // 총알 발사 효과음이나 시각효과 추가 가능
         }
+    });
 
-        // 카메라와 탱크 동기화
-        const tankPos = this.tank.getPosition();
-        const cameraOffset = new THREE.Vector3(-15, 10, -15);
-        cameraOffset.applyQuaternion(this.tank.body.quaternion);
-        this.camera.position.copy(tankPos).add(cameraOffset);
-        this.camera.lookAt(tankPos);
+    // 창 크기 변경 이벤트
+    window.addEventListener('resize', () => {
+        this.camera.aspect = window.innerWidth / window.innerHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+    });
+}
 
-        // 포탑 회전을 카메라와 동기화
-        if (this.tank.turret) {
-            this.tank.turret.rotation.y = this.camera.rotation.y;
+    handleMovement() {
+    if (!this.tank.isLoaded) return;
+    
+    const direction = new THREE.Vector3();
+    
+    if (this.keys.forward) direction.z += 1;
+    if (this.keys.backward) direction.z -= 1;
+    if (this.keys.left) direction.x -= 1;
+    if (this.keys.right) direction.x += 1;
+    
+    if (direction.length() > 0) {
+        direction.normalize();
+        // 탱크의 현재 회전을 기준으로 이동
+        direction.applyEuler(this.tank.body.rotation);
+        this.tank.move(direction);
+
+        // 탱크 본체 회전
+        if (Math.abs(direction.z) > 0 || Math.abs(direction.x) > 0) {
+            const angle = Math.atan2(direction.x, direction.z);
+            this.tank.body.rotation.y = angle;
         }
     }
+
+    // 마우스 움직임에 따른 포탑과 카메라 회전
+    const rotationAngle = Math.atan2(this.mouse.x, -this.mouse.y);
+    
+    // 포탑 회전
+    if (this.tank.turretGroup) {
+        this.tank.turretGroup.rotation.y = rotationAngle;
+    }
+
+    // 카메라 위치 및 회전 업데이트
+    const tankPos = this.tank.getPosition();
+    const cameraDistance = 20;
+    const cameraHeight = 10;
+    
+    // 카메라 위치 계산
+    const cameraOffset = new THREE.Vector3(
+        Math.sin(rotationAngle) * cameraDistance,
+        cameraHeight,
+        Math.cos(rotationAngle) * cameraDistance
+    );
+    
+    this.camera.position.copy(tankPos).sub(cameraOffset);
+    this.camera.lookAt(tankPos);
+}
 createBuildings() {
         const buildingTypes = [
             { width: 10, height: 30, depth: 10, color: 0x808080 },