Update game.js

game.js

@@ -2,7 +2,6 @@ import * as THREE from 'three';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
 
-
 // 게임 상수
 const GAME_DURATION = 180;
 const MAP_SIZE = 2000;
@@ -15,58 +14,121 @@ const ENEMY_COUNT_MAX = 5;
 const PARTICLE_COUNT = 15;
 const BUILDING_COUNT = 30;  // 건물 수 추가
 const ENEMY_CONFIG = {
-    TANK: {
-        MODEL: '/models/enemy1.glb',
-        HEALTH: 120,
-        SPEED: 0.1,
-        ATTACK_RANGE: 100,
-        ATTACK_INTERVAL: 2000,
-        BULLET_SPEED: 2
-    },
-    HEAVY_TANK: {
-        MODEL: '/models/enemy4.glb',
-        HEALTH: 200,
-        SPEED: 0.05,
-        ATTACK_RANGE: 150,
-        ATTACK_INTERVAL: 3000,
-        BULLET_SPEED: 1.5
-    }
+    ATTACK_RANGE: 100,
+    ATTACK_INTERVAL: 2000,
+    BULLET_SPEED: 2
 };
 
-// Building 클래스 추가
-class Building {
-    constructor(scene, position, size) {
-        const geometry = new THREE.BoxGeometry(size.width, size.height, size.depth);
-        const material = new THREE.MeshStandardMaterial({
-            color: 0x808080,
-            roughness: 0.7,
-            metalness: 0.3
-        });
-        this.mesh = new THREE.Mesh(geometry, material);
-        this.mesh.position.copy(position);
-        this.mesh.position.y = size.height / 2;
-        this.mesh.castShadow = true;
-        this.mesh.receiveShadow = true;
-        scene.add(this.mesh);
+// TankPlayer 클래스
+class TankPlayer {
+    constructor() {
+        this.body = null;
+        this.turret = null;
+        this.position = new THREE.Vector3(0, 0, 0);
+        this.rotation = new THREE.Euler(0, 0, 0);
+        this.turretRotation = 0;
+        this.moveSpeed = 0.5;
+        this.turnSpeed = 0.03;
+        this.turretGroup = new THREE.Group();
+        this.health = MAX_HEALTH;
+        this.isLoaded = false;  // 로딩 상태 추가
+        this.previousTankPosition = new THREE.Vector3();
+    }
+
+    async initialize(scene, loader) {
+        try {
+            const bodyResult = await loader.loadAsync('/models/abramsBody.glb');
+            this.body = bodyResult.scene;
+            this.body.position.copy(this.position);
+            
+            const turretResult = await loader.loadAsync('/models/abramsTurret.glb');
+            this.turret = turretResult.scene;
+            
+            this.turretGroup.position.y = 0.2;
+            this.turretGroup.add(this.turret);
+            this.body.add(this.turretGroup);
+            
+            this.body.traverse((child) => {
+                if (child.isMesh) {
+                    child.castShadow = true;
+                    child.receiveShadow = true;
+                }
+            });
+            
+            this.turret.traverse((child) => {
+                if (child.isMesh) {
+                    child.castShadow = true;
+                    child.receiveShadow = true;
+                }
+            });
+
+            scene.add(this.body);
+            this.isLoaded = true;  // 로딩 완료 표시
+            
+        } catch (error) {
+            console.error('Error loading tank models:', error);
+            this.isLoaded = false;  // 로딩 실패 표시
+        }
+    }
+
+    // 나머지 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;
+    }
+
+    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);
+    }
+
+    rotate(angle) {
+        if (!this.body) return;
+        this.body.rotation.y += angle * this.turnSpeed;
     }
-}
 
+    getPosition() {
+        return this.body ? this.body.position : new THREE.Vector3();
+    }
+
+    takeDamage(damage) {
+        this.health -= damage;
+        return this.health <= 0;
+    }
+}
 // Enemy 클래스 수정
 class Enemy {
-    constructor(scene, position, type) {
+    constructor(scene, position, type = 'tank') {
         this.scene = scene;
         this.position = position;
-        this.type = type;
         this.mesh = null;
-        this.health = type === 'TANK' ? ENEMY_CONFIG.TANK.HEALTH : ENEMY_CONFIG.HEAVY_TANK.HEALTH;
+        this.type = type; // 'tank' 또는 'heavy'
+        this.health = type === 'tank' ? 100 : 200; // heavy는 체력이 더 높음
         this.lastAttackTime = 0;
         this.bullets = [];
-        this.config = ENEMY_CONFIG[type];
+        this.isLoaded = false;
+        this.moveSpeed = type === 'tank' ? ENEMY_MOVE_SPEED : ENEMY_MOVE_SPEED * 0.7; // heavy는 더 느림
     }
 
     async initialize(loader) {
         try {
-            const modelPath = this.type === 'TANK' ? ENEMY_CONFIG.TANK.MODEL : ENEMY_CONFIG.HEAVY_TANK.MODEL;
+            // 타입에 따라 다른 모델 로드
+            const modelPath = this.type === 'tank' ? '/models/enemy1.glb' : '/models/enemy4.glb';
             const result = await loader.loadAsync(modelPath);
             this.mesh = result.scene;
             this.mesh.position.copy(this.position);
@@ -80,29 +142,32 @@ class Enemy {
             });
             
             this.scene.add(this.mesh);
+            this.isLoaded = true;
         } catch (error) {
             console.error('Error loading enemy model:', error);
+            this.isLoaded = false;
         }
     }
 
     update(playerPosition) {
-        if (!this.mesh) return;
+        if (!this.mesh || !this.isLoaded) return;
 
+        // 플레이어 방향으로 회전
         const direction = new THREE.Vector3()
             .subVectors(playerPosition, this.mesh.position)
             .normalize();
         
         this.mesh.lookAt(playerPosition);
 
-        // 타입별 이동 속도 적용
-        const moveSpeed = this.type === 'TANK' ? ENEMY_CONFIG.TANK.SPEED : ENEMY_CONFIG.HEAVY_TANK.SPEED;
-        this.mesh.position.add(direction.multiplyScalar(moveSpeed));
+        // 플레이어 방향으로 이동 (타입에 따라 다른 속도)
+        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);
 
+            // 총알이 맵 밖으로 나가면 제거
             if (Math.abs(bullet.position.x) > MAP_SIZE || 
                 Math.abs(bullet.position.z) > MAP_SIZE) {
                 this.scene.remove(bullet);
@@ -113,15 +178,15 @@ class Enemy {
 
     shoot(playerPosition) {
         const currentTime = Date.now();
-        const attackInterval = this.type === 'TANK' ? 
-            ENEMY_CONFIG.TANK.ATTACK_INTERVAL : 
-            ENEMY_CONFIG.HEAVY_TANK.ATTACK_INTERVAL;
+        const attackInterval = this.type === 'tank' ? 
+            ENEMY_CONFIG.ATTACK_INTERVAL : 
+            ENEMY_CONFIG.ATTACK_INTERVAL * 1.5; // heavy는 발사 간격이 더 김
 
         if (currentTime - this.lastAttackTime < attackInterval) return;
 
-        const bulletGeometry = new THREE.SphereGeometry(0.2);
+        const bulletGeometry = new THREE.SphereGeometry(this.type === 'tank' ? 0.2 : 0.3);
         const bulletMaterial = new THREE.MeshBasicMaterial({ 
-            color: this.type === 'TANK' ? 0xff0000 : 0xff6600 
+            color: this.type === 'tank' ? 0xff0000 : 0xff6600 
         });
         const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
 
@@ -131,10 +196,10 @@ class Enemy {
             .subVectors(playerPosition, this.mesh.position)
             .normalize();
         
-        const bulletSpeed = this.type === 'TANK' ? 
-            ENEMY_CONFIG.TANK.BULLET_SPEED : 
-            ENEMY_CONFIG.HEAVY_TANK.BULLET_SPEED;
-
+        const bulletSpeed = this.type === 'tank' ? 
+            ENEMY_CONFIG.BULLET_SPEED : 
+            ENEMY_CONFIG.BULLET_SPEED * 0.8;
+        
         bullet.velocity = direction.multiplyScalar(bulletSpeed);
         
         this.scene.add(bullet);
@@ -152,12 +217,47 @@ class Enemy {
             this.scene.remove(this.mesh);
             this.bullets.forEach(bullet => this.scene.remove(bullet));
             this.bullets = [];
+            this.isLoaded = false;
         }
     }
 }
-// Game 클래스 수정
+
+// Particle 클래스는 그대로 유지
+class Particle {
+    constructor(scene, position) {
+        const geometry = new THREE.SphereGeometry(0.1);
+        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+        this.mesh = new THREE.Mesh(geometry, material);
+        this.mesh.position.copy(position);
+        
+        this.velocity = new THREE.Vector3(
+            (Math.random() - 0.5) * 0.3,
+            Math.random() * 0.2,
+            (Math.random() - 0.5) * 0.3
+        );
+        
+        this.gravity = -0.01;
+        this.lifetime = 60;
+        this.age = 0;
+        
+        scene.add(this.mesh);
+    }
+
+    update() {
+        this.velocity.y += this.gravity;
+        this.mesh.position.add(this.velocity);
+        this.age++;
+        return this.age < this.lifetime;
+    }
+
+    destroy(scene) {
+        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 });
@@ -165,6 +265,7 @@ class Game {
         this.renderer.shadowMap.enabled = true;
         document.body.appendChild(this.renderer.domElement);
 
+        // 게임 요소 초기화
         this.tank = new TankPlayer();
         this.enemies = [];
         this.particles = [];
@@ -174,12 +275,15 @@ class Game {
         this.gameTime = GAME_DURATION;
         this.score = 0;
         this.isGameOver = false;
+        this.isLoading = true;  // 로딩 상태 추가
 
+        // 마우스 상태
         this.mouse = {
             x: 0,
             y: 0
         };
 
+        // 키보드 상태
         this.keys = {
             forward: false,
             backward: false,
@@ -187,91 +291,205 @@ class Game {
             right: false
         };
 
+        // 이벤트 리스너 설정
         this.setupEventListeners();
+        
+        // 게임 초기화
         this.initialize();
     }
 
     async initialize() {
-        // 조명 설정
-        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;
-        this.scene.add(directionalLight);
-
-        // 도시 바닥 생성
-        const groundGeometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE);
-        const groundMaterial = new THREE.MeshStandardMaterial({ 
-            color: 0x333333,  // 어두운 회색 (아스팔트)
-            roughness: 0.9,
-            metalness: 0.1
-        });
-        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
-        ground.rotation.x = -Math.PI / 2;
-        ground.receiveShadow = true;
-        this.scene.add(ground);
+        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 groundGeometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE);
+            const groundMaterial = new THREE.MeshStandardMaterial({ 
+                color: 0x333333,  // 어두운 회색 (아스팔트 색)
+                roughness: 0.9,
+                metalness: 0.1
+            });
+            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+            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.createBuildings();
+            // 카메라 위치 설정
+            this.camera.position.set(0, 10, -10);
+            this.camera.lookAt(0, 0, 0);
 
-        // 탱크 초기화
-        await this.tank.initialize(this.scene, this.loader);
+            // 포인터 락 컨트롤 설정
+            this.controls = new PointerLockControls(this.camera, document.body);
 
-        // 카메라 설정
-        this.camera.position.set(0, 10, -10);
-        this.camera.lookAt(0, 0, 0);
+            // 로딩 완료
+            this.isLoading = false;
+            document.getElementById('loading').style.display = 'none';
 
-        this.controls = new PointerLockControls(this.camera, document.body);
+            // 게임 시작
+            this.animate();
+            this.spawnEnemies();
+            this.startGameTimer();
 
-        this.animate();
-        this.spawnEnemies();
-        this.startGameTimer();
+        } catch (error) {
+            console.error('Game initialization error:', error);
+            this.handleLoadingError();
+        }
     }
 
-    createBuildings() {
+    async 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 size = {
-                width: 10 + Math.random() * 20,
-                height: 20 + Math.random() * 80,
-                depth: 10 + Math.random() * 20
-            };
-
-            const position = new THREE.Vector3(
-                (Math.random() - 0.5) * (MAP_SIZE - size.width),
+            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);
+            }
+        }
+    }
+
+    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
+        });
+        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,
-                (Math.random() - 0.5) * (MAP_SIZE - size.depth)
-            );
+                position.z - (type.depth / 2 + margin)
+            ),
+            new THREE.Vector3(
+                position.x + (type.width / 2 + margin),
+                type.height,
+                position.z + (type.depth / 2 + margin)
+            )
+        );
+
+        return this.buildings.some(building => {
+            const buildingBox = new THREE.Box3().setFromObject(building);
+            return bbox.intersectsBox(buildingBox);
+        });
+    }
 
-            const building = new Building(this.scene, position, size);
-            this.buildings.push(building);
+    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>
+            `;
         }
     }
 
     spawnEnemies() {
         const spawnEnemy = () => {
             if (this.enemies.length < ENEMY_COUNT_MAX && !this.isGameOver) {
-                const position = new THREE.Vector3(
-                    (Math.random() - 0.5) * MAP_SIZE,
-                    ENEMY_GROUND_HEIGHT,
-                    (Math.random() - 0.5) * MAP_SIZE
-                );
-                
-                // 랜덤하게 적 유형 선택
-                const type = Math.random() > 0.7 ? 'HEAVY_TANK' : 'TANK';
-                const enemy = new Enemy(this.scene, position, type);
-                enemy.initialize(this.loader);
-                this.enemies.push(enemy);
+                const position = this.getValidEnemySpawnPosition();
+                if (position) {
+                    // 랜덤하게 적 유형 선택 (70% tank, 30% heavy)
+                    const type = Math.random() < 0.7 ? 'tank' : 'heavy';
+                    const enemy = new Enemy(this.scene, position, type);
+                    enemy.initialize(this.loader);
+                    this.enemies.push(enemy);
+                }
             }
             setTimeout(spawnEnemy, 3000);
         };
         
         spawnEnemy();
     }
-  // Game 클래스 계속...
+
+    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 distanceToPlayer = position.distanceTo(this.tank.getPosition());
+            if (distanceToPlayer < 100) continue;
+
+            // 건물과의 충돌 체크
+            let collisionFound = false;
+            for (const building of this.buildings) {
+                const buildingBox = new THREE.Box3().setFromObject(building);
+                if (buildingBox.containsPoint(position)) {
+                    collisionFound = true;
+                    break;
+                }
+            }
+
+            if (!collisionFound) return position;
+
+            attempts++;
+        } while (attempts < maxAttempts);
+
+        return null;
+    }
+
     startGameTimer() {
         const timer = setInterval(() => {
+            if (this.isLoading) return;
+            
             this.gameTime--;
             if (this.gameTime <= 0 || this.isGameOver) {
                 clearInterval(timer);
@@ -281,7 +499,10 @@ class Game {
     }
 
     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;
@@ -291,6 +512,8 @@ class Game {
         });
 
         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;
@@ -299,11 +522,15 @@ class Game {
             }
         });
 
+        // 마우스 이벤트
         document.addEventListener('mousemove', (event) => {
+            if (this.isLoading) return;
+            
             this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         });
 
+        // 창 크기 변경 이벤트
         window.addEventListener('resize', () => {
             this.camera.aspect = window.innerWidth / window.innerHeight;
             this.camera.updateProjectionMatrix();
@@ -312,6 +539,8 @@ class Game {
     }
 
     handleMovement() {
+        if (this.isLoading || !this.tank.isLoaded) return;
+
         const direction = new THREE.Vector3();
         
         if (this.keys.forward) direction.z += 1;
@@ -342,40 +571,49 @@ class Game {
     }
 
     checkCollisions() {
+        if (this.isLoading || !this.tank.isLoaded) return;
+
         const tankPosition = this.tank.getPosition();
 
         // 적과의 충돌 체크
         this.enemies.forEach(enemy => {
-            if (!enemy.mesh) return;
+            if (!enemy.mesh || !enemy.isLoaded) return;
 
-            // 총알 충돌 체크
             enemy.bullets.forEach(bullet => {
                 const distance = bullet.position.distanceTo(tankPosition);
                 if (distance < 1) {
-                    if (this.tank.takeDamage(enemy.type === 'HEAVY_TANK' ? 15 : 10)) {
+                    if (this.tank.takeDamage(10)) {
                         this.endGame();
                     }
                     this.scene.remove(bullet);
                     enemy.bullets = enemy.bullets.filter(b => b !== bullet);
-                }
-            });
-
-            // 건물과의 충돌 체크
-            this.buildings.forEach(building => {
-                // 간단한 충돌 체크 (실제 게임에서는 더 정교한 충돌 체크가 필요할 수 있습니다)
-                const distance = enemy.mesh.position.distanceTo(building.mesh.position);
-                if (distance < 5) { // 임의의 충돌 거리
-                    const pushDirection = new THREE.Vector3()
-                        .subVectors(enemy.mesh.position, building.mesh.position)
-                        .normalize();
-                    enemy.mesh.position.add(pushDirection);
+                    
+                    // 피격 효과
+                    this.createExplosion(bullet.position);
+                    document.getElementById('health').style.width = 
+                        `${(this.tank.health / MAX_HEALTH) * 100}%`;
                 }
             });
         });
+
+        // 건물과의 충돌 체크
+        const tankBoundingBox = new THREE.Box3().setFromObject(this.tank.body);
+        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();
     }
 
     endGame() {
         this.isGameOver = true;
+        // 게임 오버 UI 표시
         const gameOverDiv = document.createElement('div');
         gameOverDiv.style.position = 'absolute';
         gameOverDiv.style.top = '50%';
@@ -383,33 +621,83 @@ class Game {
         gameOverDiv.style.transform = 'translate(-50%, -50%)';
         gameOverDiv.style.color = 'white';
         gameOverDiv.style.fontSize = '48px';
-        gameOverDiv.innerHTML = `Game Over<br>Score: ${this.score}`;
-        document.body.appendChild(gameOverDiv);
-    }
-
-    animate() {
+        gameOverDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+        gameOverDiv.style.padding = '20px';
+        gameOverDiv.style.borderRadius = '10px';
+        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;">
+                Play Again
+            </button>
+        `;
+      document.body.appendChild(gameOverDiv);  // 이 줄이 누락됨
+    } 
+      animate() {
         if (this.isGameOver) return;
 
         requestAnimationFrame(() => this.animate());
 
+        // 로딩 중이면 렌더링만 수행
+        if (this.isLoading) {
+            this.renderer.render(this.scene, this.camera);
+            return;
+        }
+
+        // 탱크 업데이트
         this.tank.update(this.mouse.x, this.mouse.y);
         this.handleMovement();
 
+        // 적 업데이트
         const tankPosition = this.tank.getPosition();
-        this.enemies.forEach(enemy => {
+        this.enemies.forEach((enemy, index) => {
             enemy.update(tankPosition);
-            const distance = enemy.mesh?.position.distanceTo(tankPosition) || Infinity;
-            if (distance < enemy.config.ATTACK_RANGE) {
-                enemy.shoot(tankPosition);
+            
+            if (enemy.isLoaded) {  // 로딩된 적만 공격 수행
+                const distance = enemy.mesh.position.distanceTo(tankPosition);
+                if (distance < ENEMY_CONFIG.ATTACK_RANGE) {
+                    enemy.shoot(tankPosition);
+                }
             }
         });
 
+        // 파티클 업데이트
         this.updateParticles();
+
+        // 충돌 체크
         this.checkCollisions();
 
+        // UI 업데이트
+        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 scoreElement = document.getElementById('score');
+        if (scoreElement) {
+            scoreElement.textContent = `Score: ${this.score}`;
+        }
+    }
 }
 
-// 게임 시작
+// 게임 인스턴스 생성
 const game = new Game();