Update game.js

game.js

@@ -12,7 +12,7 @@ const MAX_HEALTH = 1000;
 const ENEMY_MOVE_SPEED = 0.1;
 const ENEMY_COUNT_MAX = 5;
 const PARTICLE_COUNT = 15;
-const BUILDING_COUNT = 30;  // 건물 수 추가
+const BUILDING_COUNT = 30;
 const ENEMY_CONFIG = {
     ATTACK_RANGE: 100,
     ATTACK_INTERVAL: 2000,
@@ -73,64 +73,63 @@ class TankPlayer {
             this.isLoaded = false;
         }
     }
+  shoot(scene) {
+        const currentTime = Date.now();
+        if (currentTime - this.lastShootTime < this.shootInterval || this.ammo <= 0) return null;
 
-    shoot(scene) {
-    const currentTime = Date.now();
-    if (currentTime - this.lastShootTime < this.shootInterval || this.ammo <= 0) return null;
-
-    // 총알 생성
-    const bulletGeometry = new THREE.SphereGeometry(0.2);
-    const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
-    const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
-
-    // 총알 시작 위치 (포탑 끝)
-    const bulletOffset = new THREE.Vector3(0, 0.5, 2);
-    // 포탑의 회전을 적용
-    bulletOffset.applyQuaternion(this.turretGroup.quaternion);
-    bulletOffset.applyQuaternion(this.body.quaternion);
-    bullet.position.copy(this.body.position).add(bulletOffset);
-
-    // 총알 속도 (포탑 방향)
-    const direction = new THREE.Vector3(0, 0, 1);
-    direction.applyQuaternion(this.turretGroup.quaternion);
-    direction.applyQuaternion(this.body.quaternion);
-    bullet.velocity = direction.multiplyScalar(2);
-
-    scene.add(bullet);
-    this.bullets.push(bullet);
-    this.ammo--;
-    this.lastShootTime = currentTime;
-
-    document.getElementById('ammo').textContent = `Ammo: ${this.ammo}/10`;
-    
-    return bullet;
-}
+        // 총알 생성
+        const bulletGeometry = new THREE.SphereGeometry(0.2);
+        const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+        const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
+
+        // 총알 시작 위치 (포탑 끝)
+        const bulletOffset = new THREE.Vector3(0, 0.5, 2);
+        // 포탑의 회전을 적용
+        bulletOffset.applyQuaternion(this.turretGroup.quaternion);
+        bulletOffset.applyQuaternion(this.body.quaternion);
+        bullet.position.copy(this.body.position).add(bulletOffset);
+
+        // 총알 속도 (포탑 방향)
+        const direction = new THREE.Vector3(0, 0, 1);
+        direction.applyQuaternion(this.turretGroup.quaternion);
+        direction.applyQuaternion(this.body.quaternion);
+        bullet.velocity = direction.multiplyScalar(2);
+
+        scene.add(bullet);
+        this.bullets.push(bullet);
+        this.ammo--;
+        this.lastShootTime = currentTime;
+
+        document.getElementById('ammo').textContent = `Ammo: ${this.ammo}/10`;
+        
+        return bullet;
+    }
 
     update(mouseX, mouseY) {
-   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);
-       }
-   }
-}
+        if (!this.body || !this.turretGroup) return;
+        
+        // 총알 업데이트
+        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;
-    
-    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) {
@@ -147,23 +146,22 @@ class TankPlayer {
         return this.health <= 0;
     }
 }
-// Enemy 클래스 수정
+// Enemy 클래스
 class Enemy {
     constructor(scene, position, type = 'tank') {
         this.scene = scene;
         this.position = position;
         this.mesh = null;
-        this.type = type; // 'tank' 또는 'heavy'
-        this.health = type === 'tank' ? 100 : 200; // heavy는 체력이 더 높음
+        this.type = type;
+        this.health = type === 'tank' ? 100 : 200;
         this.lastAttackTime = 0;
         this.bullets = [];
         this.isLoaded = false;
-        this.moveSpeed = type === 'tank' ? ENEMY_MOVE_SPEED : ENEMY_MOVE_SPEED * 0.7; // heavy는 더 느림
+        this.moveSpeed = type === 'tank' ? ENEMY_MOVE_SPEED : ENEMY_MOVE_SPEED * 0.7;
     }
 
     async initialize(loader) {
         try {
-            // 타입에 따라 다른 모델 로드
             const modelPath = this.type === 'tank' ? '/models/enemy1.glb' : '/models/enemy4.glb';
             const result = await loader.loadAsync(modelPath);
             this.mesh = result.scene;
@@ -188,14 +186,11 @@ class Enemy {
     update(playerPosition) {
         if (!this.mesh || !this.isLoaded) return;
 
-        // 플레이어 방향으로 회전
         const direction = new THREE.Vector3()
             .subVectors(playerPosition, this.mesh.position)
             .normalize();
         
         this.mesh.lookAt(playerPosition);
-
-        // 플레이어 방향으로 이동 (타입에 따라 다른 속도)
         this.mesh.position.add(direction.multiplyScalar(this.moveSpeed));
 
         // 총알 업데이트
@@ -203,7 +198,6 @@ class Enemy {
             const bullet = this.bullets[i];
             bullet.position.add(bullet.velocity);
 
-            // 총알이 맵 밖으로 나가면 제거
             if (Math.abs(bullet.position.x) > MAP_SIZE || 
                 Math.abs(bullet.position.z) > MAP_SIZE) {
                 this.scene.remove(bullet);
@@ -216,7 +210,7 @@ class Enemy {
         const currentTime = Date.now();
         const attackInterval = this.type === 'tank' ? 
             ENEMY_CONFIG.ATTACK_INTERVAL : 
-            ENEMY_CONFIG.ATTACK_INTERVAL * 1.5; // heavy는 발사 간격이 더 김
+            ENEMY_CONFIG.ATTACK_INTERVAL * 1.5;
 
         if (currentTime - this.lastAttackTime < attackInterval) return;
 
@@ -247,8 +241,7 @@ class Enemy {
         this.health -= damage;
         return this.health <= 0;
     }
-
-    destroy() {
+  destroy() {
         if (this.mesh) {
             this.scene.remove(this.mesh);
             this.bullets.forEach(bullet => this.scene.remove(bullet));
@@ -258,7 +251,7 @@ class Enemy {
     }
 }
 
-// Particle 클래스는 그대로 유지
+// Particle 클래스
 class Particle {
     constructor(scene, position) {
         const geometry = new THREE.SphereGeometry(0.1);
@@ -290,10 +283,10 @@ class Particle {
         scene.remove(this.mesh);
     }
 }
+
 // Game 클래스
 class Game {
     constructor() {
-        // 기본 Three.js 설정
         this.scene = new THREE.Scene();
         this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         this.renderer = new THREE.WebGLRenderer({ antialias: true });
@@ -301,7 +294,6 @@ class Game {
         this.renderer.shadowMap.enabled = true;
         document.getElementById('gameContainer').appendChild(this.renderer.domElement);
 
-        // 게임 요소 초기화
         this.tank = new TankPlayer();
         this.enemies = [];
         this.particles = [];
@@ -314,8 +306,8 @@ class Game {
         this.isLoading = true;
         this.previousTankPosition = new THREE.Vector3();
         this.lastTime = performance.now();
+        this.animationFrameId = null; // 애니메이션 프레임 ID 추가
 
-        // 마우스/키보드 상태
         this.mouse = { x: 0, y: 0 };
         this.keys = {
             forward: false,
@@ -324,193 +316,167 @@ class Game {
             right: false
         };
 
-        // 이벤트 리스너 설정
         this.setupEventListeners();
         this.initialize();
     }
 
     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');
-       }
-
-       // 카메라 설정 수정
-             // 탱크의 현재 위치 가져오기
-      const tankPosition = this.tank.getPosition();
-      // 카메라를 탱크 위치 기준으로 설정
-      this.camera.position.set(
-          tankPosition.x,
-          tankPosition.y + 15,  // 탱크보다 15 유닛 위에
-          tankPosition.z - 30   // 탱크보다 30 유닛 뒤에
-      );
-      // ���메라가 탱크를 바라보도록 설정
-      this.camera.lookAt(new THREE.Vector3(
-          tankPosition.x,
-          tankPosition.y + 2,  // 탱크의 상단 부분을 바라보도록
-          tankPosition.z
-      ));
-
-       // 로딩 완료
-       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);
 
-    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;
-        }
-    });
-
-    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;
+            await this.createBuildings();
+            await this.tank.initialize(this.scene, this.loader);
+            
+            if (!this.tank.isLoaded) {
+                throw new Error('Tank loading failed');
+            }
+
+            const tankPosition = this.tank.getPosition();
+            this.camera.position.set(
+                tankPosition.x,
+                tankPosition.y + 15,
+                tankPosition.z - 30
+            );
+            this.camera.lookAt(new THREE.Vector3(
+                tankPosition.x,
+                tankPosition.y + 2,
+                tankPosition.z
+            ));
+
+            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();
         }
-    });
+    }
 
-    // 마우스 움직임 이벤트를 수정
-    document.addEventListener('mousemove', (event) => {
-        if (this.isLoading || !document.pointerLockElement) return;
-        
-        // movementX/Y를 사용하여 마우스 회전 계산
-        this.mouse.x += event.movementX * 0.002;
-        this.mouse.y += event.movementY * 0.002;
-    });
-
-    // 클릭 이벤트 수정 - 포인터 락과 발사를 함께 처리
-    document.addEventListener('click', () => {
-        if (!document.pointerLockElement) {
-            document.body.requestPointerLock();
-        } else {
-            const bullet = this.tank.shoot(this.scene);
-            if (bullet) {
-                // 총알 발사 효과음이나 시각효과 추가 가능
+    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;
+            }
+        });
+
+        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('mousemove', (event) => {
+            if (this.isLoading || !document.pointerLockElement) return;
+            this.mouse.x += event.movementX * 0.002;
+            this.mouse.y += event.movementY * 0.002;
+        });
+
+        document.addEventListener('click', () => {
+            if (!document.pointerLockElement) {
+                document.body.requestPointerLock();
+            } else {
+                const bullet = this.tank.shoot(this.scene);
+                if (bullet) {
+                    // 총알 발사 효과 추가 가능
+                }
+            }
+        });
+
+        document.addEventListener('pointerlockchange', () => {
+            if (!document.pointerLockElement) {
+                this.mouse.x = 0;
+                this.mouse.y = 0;
             }
+        });
+
+        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) 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();
+            
+            if (this.keys.left) this.tank.rotate(-1);
+            if (this.keys.right) this.tank.rotate(1);
+            
+            direction.applyEuler(this.tank.body.rotation);
+            this.tank.move(direction);
         }
-    });
-
-    // 포인터 락 상태 변경 이벤트 추가
-    document.addEventListener('pointerlockchange', () => {
-        if (!document.pointerLockElement) {
-            // 포인터 락이 해제되었을 때의 처리
-            this.mouse.x = 0;
-            this.mouse.y = 0;
+
+        const mouseVector = new THREE.Vector2(this.mouse.x, -this.mouse.y);
+        const rotationAngle = Math.atan2(mouseVector.x, mouseVector.y);
+        
+        if (this.tank.turretGroup) {
+            this.tank.turretGroup.rotation.y = rotationAngle;
         }
-    });
 
-    // 창 크기 변경 이벤트는 그대로 유지
-    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) 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();
+        const tankPos = this.tank.getPosition();
+        const cameraDistance = 30;
+        const cameraHeight = 15;
+        const lookAtHeight = 5;
         
-        // A,D 키로 탱크 회전
-        if (this.keys.left) this.tank.rotate(-1);
-        if (this.keys.right) this.tank.rotate(1);
+        const tankRotation = this.tank.body.rotation.y;
         
-        // 현재 탱크의 방향으로 이동
-        direction.applyEuler(this.tank.body.rotation);
-        this.tank.move(direction);
-    }
-
-    // 마우스 위치를 탱크 기준으로 변환
-    const mouseVector = new THREE.Vector2(this.mouse.x, -this.mouse.y);
-    const rotationAngle = Math.atan2(mouseVector.x, mouseVector.y);
-    
-    // 포탑 회전
-    if (this.tank.turretGroup) {
-        this.tank.turretGroup.rotation.y = rotationAngle;
-    }
-
-    // 여기부터 카메라 로직을 수정합니다
-    const tankPos = this.tank.getPosition();
-    const cameraDistance = 30; // 카메라와 탱크 사이의 거리
-    const cameraHeight = 15;   // 카메라의 높이
-    const lookAtHeight = 5;    // 카메라가 바라보는 높이
-    
-    // 탱크의 회전에 따라 카메라 위치 계산
-    const tankRotation = this.tank.body.rotation.y;
-    
-    // 카메라 위치 계산 수정
-    this.camera.position.set(
-        tankPos.x - Math.sin(tankRotation) * cameraDistance,
-        tankPos.y + cameraHeight,
-        tankPos.z - Math.cos(tankRotation) * cameraDistance
-    );
-
-    // 카메라가 바라보는 지점을 탱크 위치보다 약간 앞쪽으로 설정
-    const lookAtPoint = new THREE.Vector3(
-        tankPos.x + Math.sin(tankRotation) * 10, // 탱크 앞쪽 10 유닛
-        tankPos.y + lookAtHeight,                 // 탱크보다 약간 위
-        tankPos.z + Math.cos(tankRotation) * 10   // 탱크 앞쪽 10 유닛
-    );
-    
-    this.camera.lookAt(lookAtPoint);
-}
-createBuildings() {
+        this.camera.position.set(
+            tankPos.x - Math.sin(tankRotation) * cameraDistance,
+            tankPos.y + cameraHeight,
+            tankPos.z - Math.cos(tankRotation) * cameraDistance
+        );
+
+        const lookAtPoint = new THREE.Vector3(
+            tankPos.x + Math.sin(tankRotation) * 10,
+            tankPos.y + lookAtHeight,
+            tankPos.z + Math.cos(tankRotation) * 10
+        );
+        
+        this.camera.lookAt(lookAtPoint);
+    }
+
+    createBuildings() {
         const buildingTypes = [
             { width: 10, height: 30, depth: 10, color: 0x808080 },
             { width: 15, height: 40, depth: 15, color: 0x606060 },
@@ -538,6 +504,7 @@ createBuildings() {
                 this.scene.add(building);
             }
         }
+        return Promise.resolve(); // 비동기 처리를 위해 Promise 반환
     }
 
     createBuilding(type) {
@@ -548,7 +515,7 @@ createBuildings() {
             specular: 0x111111,
             shininess: 30
         });
-        const building = new THREE.Mesh(geometry, material);
+      const building = new THREE.Mesh(geometry, material);
         building.castShadow = true;
         building.receiveShadow = true;
         return building;
@@ -598,7 +565,9 @@ createBuildings() {
                     this.enemies.push(enemy);
                 }
             }
-            setTimeout(spawnEnemy, 3000);
+            if (!this.isGameOver) {
+                setTimeout(spawnEnemy, 3000);
+            }
         };
         
         spawnEnemy();
@@ -639,10 +608,12 @@ createBuildings() {
 
     startGameTimer() {
         const timer = setInterval(() => {
-            if (this.isLoading) return;
+            if (this.isLoading || this.isGameOver) return;
             
             this.gameTime--;
-            if (this.gameTime <= 0 || this.isGameOver) {
+            document.getElementById('time').textContent = `Time: ${this.gameTime}s`;
+            
+            if (this.gameTime <= 0) {
                 clearInterval(timer);
                 this.endGame();
             }
@@ -658,8 +629,7 @@ createBuildings() {
             }
         }
     }
-
-    createExplosion(position) {
+  createExplosion(position) {
         for (let i = 0; i < PARTICLE_COUNT; i++) {
             this.particles.push(new Particle(this.scene, position));
         }
@@ -670,6 +640,7 @@ createBuildings() {
 
         const tankPosition = this.tank.getPosition();
 
+        // 적 총알과 플레이어 탱크 충돌 체크
         this.enemies.forEach(enemy => {
             if (!enemy.mesh || !enemy.isLoaded) return;
 
@@ -689,6 +660,7 @@ createBuildings() {
             });
         });
 
+        // 플레이어 탱크와 건물 충돌 체크
         const tankBoundingBox = new THREE.Box3().setFromObject(this.tank.body);
         for (const building of this.buildings) {
             const buildingBox = new THREE.Box3().setFromObject(building);
@@ -698,11 +670,16 @@ createBuildings() {
             }
         }
         
+        // 이전 위치 저장
         this.previousTankPosition = this.tank.body.position.clone();
     }
 
     endGame() {
         this.isGameOver = true;
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+
         const gameOverDiv = document.createElement('div');
         gameOverDiv.style.position = 'absolute';
         gameOverDiv.style.top = '50%';
@@ -728,9 +705,12 @@ createBuildings() {
     }
 
     animate() {
-        if (this.isGameOver) return;
+        if (this.isGameOver) {
+            cancelAnimationFrame(this.animationFrameId);
+            return;
+        }
 
-        requestAnimationFrame(() => this.animate());
+        this.animationFrameId = requestAnimationFrame(() => this.animate());
 
         const currentTime = performance.now();
         const deltaTime = (currentTime - this.lastTime) / 1000;
@@ -740,8 +720,7 @@ createBuildings() {
             this.renderer.render(this.scene, this.camera);
             return;
         }
-
-        this.handleMovement();
+       this.handleMovement();
         this.tank.update(this.mouse.x, this.mouse.y);
         
         const tankPosition = this.tank.getPosition();