Update game.js

game.js

@@ -73,23 +73,20 @@ class TankPlayer {
             this.isLoaded = false;
         }
     }
-  shoot(scene) {
+
+    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);
@@ -108,12 +105,10 @@ class TankPlayer {
     update(mouseX, mouseY) {
         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);
@@ -146,6 +141,7 @@ class TankPlayer {
         return this.health <= 0;
     }
 }
+
 // Enemy 클래스
 class Enemy {
     constructor(scene, position, type = 'tank') {
@@ -193,7 +189,6 @@ class Enemy {
         this.mesh.lookAt(playerPosition);
         this.mesh.position.add(direction.multiplyScalar(this.moveSpeed));
 
-        // 총알 업데이트
         for (let i = this.bullets.length - 1; i >= 0; i--) {
             const bullet = this.bullets[i];
             bullet.position.add(bullet.velocity);
@@ -241,7 +236,8 @@ 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));
@@ -306,7 +302,8 @@ class Game {
         this.isLoading = true;
         this.previousTankPosition = new THREE.Vector3();
         this.lastTime = performance.now();
-        this.animationFrameId = null; // 애니메이션 프레임 ID 추가
+        this.gameTimer = null;
+        this.animationFrameId = null;
 
         this.mouse = { x: 0, y: 0 };
         this.keys = {
@@ -340,7 +337,7 @@ class Game {
                     metalness: 0.1
                 })
             );
-          ground.rotation.x = -Math.PI / 2;
+            ground.rotation.x = -Math.PI / 2;
             ground.receiveShadow = true;
             this.scene.add(ground);
 
@@ -378,7 +375,7 @@ class Game {
 
     setupEventListeners() {
         document.addEventListener('keydown', (event) => {
-            if (this.isLoading) return;
+            if (this.isLoading || this.isGameOver) return;
             switch(event.code) {
                 case 'KeyW': this.keys.forward = true; break;
                 case 'KeyS': this.keys.backward = true; break;
@@ -388,7 +385,7 @@ class Game {
         });
 
         document.addEventListener('keyup', (event) => {
-            if (this.isLoading) return;
+            if (this.isLoading || this.isGameOver) return;
             switch(event.code) {
                 case 'KeyW': this.keys.forward = false; break;
                 case 'KeyS': this.keys.backward = false; break;
@@ -398,7 +395,7 @@ class Game {
         });
 
         document.addEventListener('mousemove', (event) => {
-            if (this.isLoading || !document.pointerLockElement) return;
+            if (this.isLoading || this.isGameOver || !document.pointerLockElement) return;
             this.mouse.x += event.movementX * 0.002;
             this.mouse.y += event.movementY * 0.002;
         });
@@ -406,10 +403,10 @@ class Game {
         document.addEventListener('click', () => {
             if (!document.pointerLockElement) {
                 document.body.requestPointerLock();
-            } else {
+            } else if (!this.isGameOver) {
                 const bullet = this.tank.shoot(this.scene);
                 if (bullet) {
-                    // 총알 발사 효과 추가 가능
+                    // Shooting effects could be added here
                 }
             }
         });
@@ -427,8 +424,9 @@ class Game {
             this.renderer.setSize(window.innerWidth, window.innerHeight);
         });
     }
-  handleMovement() {
-        if (!this.tank.isLoaded) return;
+
+    handleMovement() {
+        if (!this.tank.isLoaded || this.isGameOver) return;
         
         const direction = new THREE.Vector3();
         
@@ -504,7 +502,7 @@ class Game {
                 this.scene.add(building);
             }
         }
-        return Promise.resolve(); // 비동기 처리를 위해 Promise 반환
+        return Promise.resolve();
     }
 
     createBuilding(type) {
@@ -515,7 +513,7 @@ class Game {
             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;
@@ -554,6 +552,27 @@ class Game {
         }
     }
 
+    startGameTimer() {
+        if (this.gameTimer) {
+            clearInterval(this.gameTimer);
+        }
+        
+        this.gameTimer = setInterval(() => {
+            if (this.isLoading || this.isGameOver) {
+                clearInterval(this.gameTimer);
+                return;
+            }
+            
+            this.gameTime--;
+            document.getElementById('time').textContent = `Time: ${this.gameTime}s`;
+            
+            if (this.gameTime <= 0) {
+                clearInterval(this.gameTimer);
+                this.endGame();
+            }
+        }, 1000);
+    }
+
     spawnEnemies() {
         const spawnEnemy = () => {
             if (this.enemies.length < ENEMY_COUNT_MAX && !this.isGameOver) {
@@ -606,20 +625,6 @@ class Game {
         return null;
     }
 
-    startGameTimer() {
-        const timer = setInterval(() => {
-            if (this.isLoading || this.isGameOver) return;
-            
-            this.gameTime--;
-            document.getElementById('time').textContent = `Time: ${this.gameTime}s`;
-            
-            if (this.gameTime <= 0) {
-                clearInterval(timer);
-                this.endGame();
-            }
-        }, 1000);
-    }
-
     updateParticles() {
         for (let i = this.particles.length - 1; i >= 0; i--) {
             const particle = this.particles[i];
@@ -629,7 +634,8 @@ class Game {
             }
         }
     }
-  createExplosion(position) {
+
+    createExplosion(position) {
         for (let i = 0; i < PARTICLE_COUNT; i++) {
             this.particles.push(new Particle(this.scene, position));
         }
@@ -660,6 +666,26 @@ class Game {
             });
         });
 
+        // 플레이어 총알과 적 충돌 체크
+        this.tank.bullets.forEach((bullet, bulletIndex) => {
+            this.enemies.forEach((enemy, enemyIndex) => {
+                if (!enemy.mesh || !enemy.isLoaded) return;
+
+                const distance = bullet.position.distanceTo(enemy.mesh.position);
+                if (distance < 2) {
+                    if (enemy.takeDamage(50)) {
+                        enemy.destroy();
+                        this.enemies.splice(enemyIndex, 1);
+                        this.score += 100;
+                        document.getElementById('score').textContent = `Score: ${this.score}`;
+                    }
+                    this.scene.remove(bullet);
+                    this.tank.bullets.splice(bulletIndex, 1);
+                    this.createExplosion(bullet.position);
+                }
+            });
+        });
+
         // 플레이어 탱크와 건물 충돌 체크
         const tankBoundingBox = new THREE.Box3().setFromObject(this.tank.body);
         for (const building of this.buildings) {
@@ -671,42 +697,73 @@ class Game {
         }
         
         // 이전 위치 저장
-        this.previousTankPosition = this.tank.body.position.clone();
+        this.previousTankPosition.copy(this.tank.body.position);
     }
 
     endGame() {
+        if (this.isGameOver) return;
+        
         this.isGameOver = true;
+        
+        if (this.gameTimer) {
+            clearInterval(this.gameTimer);
+        }
+
         if (this.animationFrameId) {
             cancelAnimationFrame(this.animationFrameId);
         }
 
+        document.exitPointerLock();
+
         const gameOverDiv = document.createElement('div');
         gameOverDiv.style.position = 'absolute';
         gameOverDiv.style.top = '50%';
         gameOverDiv.style.left = '50%';
         gameOverDiv.style.transform = 'translate(-50%, -50%)';
-        gameOverDiv.style.color = 'white';
+        gameOverDiv.style.color = '#0f0';
         gameOverDiv.style.fontSize = '48px';
-        gameOverDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+        gameOverDiv.style.backgroundColor = 'rgba(0, 20, 0, 0.7)';
         gameOverDiv.style.padding = '20px';
         gameOverDiv.style.borderRadius = '10px';
+        gameOverDiv.style.textAlign = 'center';
         gameOverDiv.innerHTML = `
             Game Over<br>
             Score: ${this.score}<br>
             Time Survived: ${GAME_DURATION - this.gameTime}s<br>
             <button onclick="location.reload()" 
                     style="font-size: 24px; padding: 10px; margin-top: 20px; 
-                           cursor: pointer; background: #4CAF50; border: none; 
-                           color: white; border-radius: 5px;">
+                           cursor: pointer; background: #0f0; border: none; 
+                           color: black; border-radius: 5px;">
                 Play Again
             </button>
         `;
         document.body.appendChild(gameOverDiv);
     }
 
+    updateUI() {
+        if (!this.isGameOver) {
+            const healthBar = document.getElementById('health');
+            if (healthBar) {
+                healthBar.style.width = `${(this.tank.health / MAX_HEALTH) * 100}%`;
+            }
+
+            const timeElement = document.getElementById('time');
+            if (timeElement) {
+                timeElement.textContent = `Time: ${this.gameTime}s`;
+            }
+
+            const scoreElement = document.getElementById('score');
+            if (scoreElement) {
+                scoreElement.textContent = `Score: ${this.score}`;
+            }
+        }
+    }
+
     animate() {
         if (this.isGameOver) {
-            cancelAnimationFrame(this.animationFrameId);
+            if (this.animationFrameId) {
+                cancelAnimationFrame(this.animationFrameId);
+            }
             return;
         }
 
@@ -716,51 +773,40 @@ class Game {
         const deltaTime = (currentTime - this.lastTime) / 1000;
         this.lastTime = currentTime;
 
-        if (this.isLoading) {
-            this.renderer.render(this.scene, this.camera);
-            return;
-        }
-       this.handleMovement();
-        this.tank.update(this.mouse.x, this.mouse.y);
-        
-        const tankPosition = this.tank.getPosition();
-        this.enemies.forEach(enemy => {
-            enemy.update(tankPosition);
+        if (!this.isLoading) {
+            this.handleMovement();
+            this.tank.update(this.mouse.x, this.mouse.y);
             
-            if (enemy.isLoaded && enemy.mesh.position.distanceTo(tankPosition) < ENEMY_CONFIG.ATTACK_RANGE) {
-                enemy.shoot(tankPosition);
-            }
-        });
-
-        this.updateParticles();
-        this.checkCollisions();
-        this.updateUI();
-        this.renderer.render(this.scene, this.camera);
-    }
-
-    updateUI() {
-        const healthBar = document.getElementById('health');
-        if (healthBar) {
-            healthBar.style.width = `${(this.tank.health / MAX_HEALTH) * 100}%`;
-        }
-
-        const timeElement = document.getElementById('time');
-        if (timeElement) {
-            timeElement.textContent = `Time: ${this.gameTime}s`;
-        }
+            const tankPosition = this.tank.getPosition();
+            this.enemies.forEach(enemy => {
+                enemy.update(tankPosition);
+                
+                if (enemy.isLoaded && enemy.mesh.position.distanceTo(tankPosition) < ENEMY_CONFIG.ATTACK_RANGE) {
+                    enemy.shoot(tankPosition);
+                }
+            });
 
-        const scoreElement = document.getElementById('score');
-        if (scoreElement) {
-            scoreElement.textContent = `Score: ${this.score}`;
+            this.updateParticles();
+            this.checkCollisions();
+            this.updateUI();
         }
+        
+        this.renderer.render(this.scene, this.camera);
     }
-}
+  }
 
-// HTML의 startGame 함수와 연결
+// Start game
 window.startGame = function() {
     document.getElementById('startScreen').style.display = 'none';
     document.body.requestPointerLock();
+    
+    // Create new game instance or restart existing one
+    if (!window.gameInstance) {
+        window.gameInstance = new Game();
+    }
 };
 
-// 게임 인스턴스 생성
-const game = new Game();
+// Initialize game
+document.addEventListener('DOMContentLoaded', () => {
+    const game = new Game();
+});