Update game.js

game.js

@@ -330,7 +330,7 @@ class Game {
         this.disposedObjects = new Set(); // 제거된 객체 추적
     }
 
-        // 리소스 정리를 위한 메서드 추가
+    // 리소스 정리를 위한 메서드
     dispose(object) {
         if (this.disposedObjects.has(object)) return;
         
@@ -345,7 +345,8 @@ class Game {
         if (object.parent) object.parent.remove(object);
         this.disposedObjects.add(object);
     }
-    // 총알 제거 시 리소스 정리
+
+    // 총알 정리
     cleanupBullets() {
         // 플레이어 총알 정리
         for (let i = this.tank.bullets.length - 1; i >= 0; i--) {
@@ -356,7 +357,8 @@ class Game {
                 this.tank.bullets.splice(i, 1);
             }
         }
-      // 적 총알 정리
+
+        // 적 총알 정리
         this.enemies.forEach(enemy => {
             for (let i = enemy.bullets.length - 1; i >= 0; i--) {
                 const bullet = enemy.bullets[i];
@@ -368,394 +370,267 @@ 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');
-       }
+        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);
 
-       // 카메라 설정 수정
-             // 탱크의 현재 위치 가져오기
-      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();
-   }
-}
+            // 건물 생성
+            await this.createBuildings();
 
-    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;
-        }
-    });
+            // 탱크 초기화
+            await this.tank.initialize(this.scene, this.loader);
+            if (!this.tank.isLoaded) {
+                throw new Error('Tank loading failed');
+            }
 
-    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 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
+            ));
 
-    // 마우스 움직임 이벤트를 수정
-    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;
-    });
+            // 로딩 완료
+            this.isLoading = false;
+            document.getElementById('loading').style.display = 'none';
 
-    // 클릭 이벤트 수정 - 포인터 락과 발사를 함께 처리
-    document.addEventListener('click', () => {
-        if (!document.pointerLockElement) {
-            document.body.requestPointerLock();
-        } else {
-            const bullet = this.tank.shoot(this.scene);
-            if (bullet) {
-                // 총알 발사 효과음이나 시각효과 추가 가능
-            }
-        }
-    });
+            // 게임 시작
+            this.animate();
+            this.spawnEnemies();
+            this.startGameTimer();
 
-    // 포인터 락 상태 변경 이벤트 추가
-    document.addEventListener('pointerlockchange', () => {
-        if (!document.pointerLockElement) {
-            // 포인터 락이 해제되었을 때의 처리
-            this.mouse.x = 0;
-            this.mouse.y = 0;
+        } catch (error) {
+            console.error('Game initialization error:', error);
+            this.handleLoadingError();
         }
-    });
-
-    // 창 크기 변경 이벤트는 그대로 유지
-    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();
-        
-        // A,D 키로 탱크 회전
-        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);
     }
 
-    // 마우스 위치를 탱크 기준으로 변환
-    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;
-    }
+    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;
+            }
+        });
 
-    // 여기부터 카메라 로직을 수정합니다
-    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() {
-        const buildingTypes = [
-            { width: 10, height: 30, depth: 10, color: 0x808080 },
-            { width: 15, height: 40, depth: 15, color: 0x606060 },
-            { width: 20, height: 50, depth: 20, color: 0x404040 }
-        ];
-
-        for (let i = 0; i < BUILDING_COUNT; i++) {
-            const type = buildingTypes[Math.floor(Math.random() * buildingTypes.length)];
-            const building = this.createBuilding(type);
-            
-            let position;
-            let attempts = 0;
-            do {
-                position = new THREE.Vector3(
-                    (Math.random() - 0.5) * (MAP_SIZE - type.width),
-                    type.height / 2,
-                    (Math.random() - 0.5) * (MAP_SIZE - type.depth)
-                );
-                attempts++;
-            } while (this.checkBuildingCollision(position, type) && attempts < 50);
-
-            if (attempts < 50) {
-                building.position.copy(position);
-                this.buildings.push(building);
-                this.scene.add(building);
+        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;
             }
-        }
-    }
+        });
 
-    createBuilding(type) {
-        const geometry = new THREE.BoxGeometry(type.width, type.height, type.depth);
-        const material = new THREE.MeshPhongMaterial({ 
-            color: type.color,
-            emissive: 0x222222,
-            specular: 0x111111,
-            shininess: 30
+        document.addEventListener('mousemove', (event) => {
+            if (this.isLoading || !document.pointerLockElement) return;
+            this.mouse.x += event.movementX * 0.002;
+            this.mouse.y += event.movementY * 0.002;
         });
-        const building = new THREE.Mesh(geometry, material);
-        building.castShadow = true;
-        building.receiveShadow = true;
-        return building;
-    }
 
-    checkBuildingCollision(position, type) {
-        const margin = 5;
-        const bbox = new THREE.Box3(
-            new THREE.Vector3(
-                position.x - (type.width / 2 + margin),
-                0,
-                position.z - (type.depth / 2 + margin)
-            ),
-            new THREE.Vector3(
-                position.x + (type.width / 2 + margin),
-                type.height,
-                position.z + (type.depth / 2 + margin)
-            )
-        );
+        document.addEventListener('click', () => {
+            if (!document.pointerLockElement) {
+                document.body.requestPointerLock();
+            } else {
+                const bullet = this.tank.shoot(this.scene);
+                if (bullet) {
+                    // 발사 효과 추가 가능
+                }
+            }
+        });
 
-        return this.buildings.some(building => {
-            const buildingBox = new THREE.Box3().setFromObject(building);
-            return bbox.intersectsBox(buildingBox);
+        document.addEventListener('pointerlockchange', () => {
+            if (!document.pointerLockElement) {
+                this.mouse.x = 0;
+                this.mouse.y = 0;
+            }
         });
-    }
 
-    handleLoadingError() {
-        this.isLoading = false;
-        const loadingElement = document.getElementById('loading');
-        if (loadingElement) {
-            loadingElement.innerHTML = `
-                <div class="loading-text" style="color: red;">
-                    Loading failed. Please refresh the page.
-                </div>
-            `;
-        }
+        window.addEventListener('resize', () => {
+            this.camera.aspect = window.innerWidth / window.innerHeight;
+            this.camera.updateProjectionMatrix();
+            this.renderer.setSize(window.innerWidth, window.innerHeight);
+        });
     }
 
-   spawnEnemies() {
-    let spawnTimeout;
-    
-    const spawnEnemy = () => {
-        if (this.isGameOver) {
-            clearTimeout(spawnTimeout);
-            return;
+    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);
         }
 
-        if (this.enemies.length < ENEMY_COUNT_MAX) {
-            const position = this.getValidEnemySpawnPosition();
-            if (position) {
-                const type = Math.random() < 0.7 ? 'tank' : 'heavy';
-                const enemy = new Enemy(this.scene, position, type);
-                enemy.initialize(this.loader).catch(console.error);
-                this.enemies.push(enemy);
-            }
+        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;
         
-        spawnTimeout = setTimeout(spawnEnemy, 3000);
-    };
-    
-    spawnEnemy();
-}
+        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
+        );
 
-    getValidEnemySpawnPosition() {
-        const margin = 20;
-        let position;
-        let attempts = 0;
-        const maxAttempts = 50;
-
-        do {
-            position = new THREE.Vector3(
-                (Math.random() - 0.5) * (MAP_SIZE - margin * 2),
-                ENEMY_GROUND_HEIGHT,
-                (Math.random() - 0.5) * (MAP_SIZE - margin * 2)
-            );
+        const lookAtPoint = new THREE.Vector3(
+            tankPos.x + Math.sin(tankRotation) * 10,
+            tankPos.y + lookAtHeight,
+            tankPos.z + Math.cos(tankRotation) * 10
+        );
+        
+        this.camera.lookAt(lookAtPoint);
+    }
 
-            const distanceToPlayer = position.distanceTo(this.tank.getPosition());
-            if (distanceToPlayer < 100) continue;
+    animate() {
+        if (this.isGameOver) return;
 
-            let collisionFound = false;
-            for (const building of this.buildings) {
-                const buildingBox = new THREE.Box3().setFromObject(building);
-                if (buildingBox.containsPoint(position)) {
-                    collisionFound = true;
-                    break;
-                }
-            }
+        requestAnimationFrame(() => this.animate());
 
-            if (!collisionFound) return position;
+        const currentTime = performance.now();
+        const deltaTime = (currentTime - this.lastTime) / 1000;
+        this.lastTime = currentTime;
 
-            attempts++;
-        } while (attempts < maxAttempts);
+        if (this.isLoading) {
+            this.renderer.render(this.scene, this.camera);
+            return;
+        }
 
-        return null;
-    }
+        if (deltaTime < 1/60) return;
 
-    startGameTimer() {
-        const timer = setInterval(() => {
-            if (this.isLoading) return;
+        this.handleMovement();
+        this.tank.update(this.mouse.x, this.mouse.y);
+        
+        const tankPosition = this.tank.getPosition();
+        
+        this.enemies.forEach(enemy => {
+            if (!enemy.mesh || !enemy.isLoaded) return;
             
-            this.gameTime--;
-            if (this.gameTime <= 0 || this.isGameOver) {
-                clearInterval(timer);
-                this.endGame();
-            }
-        }, 1000);
-    }
-
-    updateParticles() {
-        for (let i = this.particles.length - 1; i >= 0; i--) {
-            const particle = this.particles[i];
-            if (!particle.update()) {
-                particle.destroy(this.scene);
-                this.particles.splice(i, 1);
+            const distance = enemy.mesh.position.distanceTo(tankPosition);
+            if (distance > 200) return;
+            
+            enemy.update(tankPosition);
+            if (distance < ENEMY_CONFIG.ATTACK_RANGE) {
+                enemy.shoot(tankPosition);
             }
-        }
-    }
+        });
 
-    createExplosion(position) {
-        for (let i = 0; i < PARTICLE_COUNT; i++) {
-            this.particles.push(new Particle(this.scene, position));
-        }
+        this.updateParticles();
+        this.checkCollisions();
+        this.cleanupBullets();
+        this.updateUI();
+        this.renderer.render(this.scene, this.camera);
     }
 
     checkCollisions() {
-    if (this.isLoading || !this.tank.isLoaded) return;
+        if (this.isLoading || !this.tank.isLoaded) return;
 
-    const tankPosition = this.tank.getPosition();
-    const tankBoundingBox = new THREE.Box3().setFromObject(this.tank.body);
+        const tankPosition = this.tank.getPosition();
+        const tankBoundingBox = new THREE.Box3().setFromObject(this.tank.body);
 
-    // 적 총알과의 충돌 검사를 최적화
-    for (const enemy of this.enemies) {
-        if (!enemy.mesh || !enemy.isLoaded) continue;
+        for (const enemy of this.enemies) {
+            if (!enemy.mesh || !enemy.isLoaded) continue;
 
-        for (let i = enemy.bullets.length - 1; i >= 0; i--) {
-            const bullet = enemy.bullets[i];
-            const distance = bullet.position.distanceTo(tankPosition);
-            
-            if (distance > 50) continue; // 먼 총알은 검사 스킵
-            
-            if (distance < 1) {
-                if (this.tank.takeDamage(10)) {
-                    this.endGame();
-                    return;
+            for (let i = enemy.bullets.length - 1; i >= 0; i--) {
+                const bullet = enemy.bullets[i];
+                const distance = bullet.position.distanceTo(tankPosition);
+                
+                if (distance > 50) continue;
+                
+                if (distance < 1) {
+                    if (this.tank.takeDamage(10)) {
+                        this.endGame();
+                        return;
+                    }
+                    this.dispose(bullet);
+                    enemy.bullets.splice(i, 1);
+                    this.createExplosion(bullet.position);
+                    document.getElementById('health').style.width = 
+                        `${(this.tank.health / MAX_HEALTH) * 100}%`;
                 }
-                this.dispose(bullet);
-                enemy.bullets.splice(i, 1);
-                this.createExplosion(bullet.position);
-                document.getElementById('health').style.width = 
-                    `${(this.tank.health / MAX_HEALTH) * 100}%`;
             }
         }
+
+        for (const building of this.buildings) {
+            const buildingBox = new THREE.Box3().setFromObject(building);
+            if (tankBoundingBox.intersectsBox(buildingBox)) {
+                this.tank.body.position.copy(this.previousTankPosition);
+                break;
+            }
+        }
+        
+        this.previousTankPosition = this.tank.body.position.clone();
     }
 
-    // 건물과의 충돌 검사 최적화
-    for (const building of this.buildings) {
-        const buildingBox = new THREE.Box3().setFromObject(building);
-        if (tankBoundingBox.intersectsBox(buildingBox)) {
-            this.tank.body.position.copy(this.previousTankPosition);
-            break;
+    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 scoreElement = document.getElementById('score');
+        if (scoreElement) {
+            scoreElement.textContent = `Score: ${this.score}`;
         }
     }
-    
-    this.previousTankPosition = this.tank.body.position.clone();
-}
 
     endGame() {
         this.isGameOver = true;
@@ -783,6 +658,7 @@ createBuildings() {
         document.body.appendChild(gameOverDiv);
     }
 
+
     animate() {
     if (this.isGameOver) return;
 
@@ -843,6 +719,8 @@ createBuildings() {
     }
 }
 
+
+
 // HTML의 startGame 함수와 연결
 window.startGame = function() {
     document.getElementById('startScreen').style.display = 'none';