Update game.js

game.js

@@ -32,9 +32,11 @@ class TankPlayer {
         this.turretGroup = new THREE.Group();
         this.health = MAX_HEALTH;
         this.isLoaded = false;
-        this.ammo = 10;
+        this.ammo = 1;  // 변경: 10 -> 1
+        this.maxAmmo = 1;  // 추가: 최대 포탄 수
+        this.isReloading = false;  // 추가: 재장전 상태
+        this.reloadTime = 3000;  // 추가: 3초 재장전 시간
         this.lastShootTime = 0;
-        this.shootInterval = 1000;
         this.bullets = [];
     }
 
@@ -67,6 +69,7 @@ class TankPlayer {
 
             scene.add(this.body);
             this.isLoaded = true;
+            this.updateAmmoDisplay();  // 추가: 초기 탄약 표시
             
         } catch (error) {
             console.error('Error loading tank models:', error);
@@ -75,9 +78,18 @@ class TankPlayer {
     }
 
     shoot(scene) {
-        const currentTime = Date.now();
-        if (currentTime - this.lastShootTime < this.shootInterval || this.ammo <= 0) return null;
+        if (this.isReloading || this.ammo <= 0) return null;
+
+        const bullet = this.createBullet(scene);
+        if (bullet) {
+            this.ammo--;
+            this.updateAmmoDisplay();
+            this.startReload();
+        }
+        return bullet;
+    }
 
+    createBullet(scene) {
         const bulletGeometry = new THREE.SphereGeometry(0.2);
         const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
         const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
@@ -94,44 +106,30 @@ class TankPlayer {
 
         scene.add(bullet);
         this.bullets.push(bullet);
-        this.ammo--;
-        this.lastShootTime = currentTime;
 
-        document.getElementById('ammo').textContent = `Ammo: ${this.ammo}/10`;
-        
         return bullet;
     }
 
-   // TankPlayer 클래스 내부
-update(mouseX, mouseY, scene) {
-   if (!this.body || !this.turretGroup) return;
+    update(mouseX, mouseY, scene) {
+        if (!this.body || !this.turretGroup) return;
 
-   // 포탑이 바라보는 절대 방향 계산
-   const absoluteTurretRotation = mouseX;
-   
-   // 차체 회전을 상쇄하는 포탑 회전 계산
-   // 차체가 회전하면 그만큼 반대로 회전하여 절대 방향 유지
-   this.turretGroup.rotation.y = absoluteTurretRotation - this.body.rotation.y;
-   
-   // 전체 회전각은 절대 방향 그대로 유지
-   this.turretRotation = absoluteTurretRotation;
-
-   // 플레이어 총알 업데이트
-   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);
-       }
-   }
-}
+        const absoluteTurretRotation = mouseX;
+        this.turretGroup.rotation.y = absoluteTurretRotation - this.body.rotation.y;
+        this.turretRotation = absoluteTurretRotation;
 
+        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;
@@ -156,6 +154,24 @@ update(mouseX, mouseY, scene) {
         this.health -= damage;
         return this.health <= 0;
     }
+
+    // 새로 추가된 메서드들
+    startReload() {
+        this.isReloading = true;
+        const reloadingText = document.getElementById('reloadingText');
+        reloadingText.style.display = 'block';
+
+        setTimeout(() => {
+            this.ammo = this.maxAmmo;
+            this.isReloading = false;
+            reloadingText.style.display = 'none';
+            this.updateAmmoDisplay();
+        }, this.reloadTime);
+    }
+
+    updateAmmoDisplay() {
+        document.getElementById('ammoDisplay').textContent = `APFSDS: ${this.ammo}/${this.maxAmmo}`;
+    }
 }
 
 // Enemy 클래스
@@ -306,6 +322,11 @@ class Game {
         this.renderer.shadowMap.enabled = true;
         document.getElementById('gameContainer').appendChild(this.renderer.domElement);
 
+        // 레이더 관련 속성 추가
+        this.radarUpdateInterval = 100; // 100ms마다 레이더 업데이트
+        this.lastRadarUpdate = 0;
+        this.radarRange = 200; // 레이더 감지 범위
+
         this.tank = new TankPlayer();
         this.enemies = [];
         this.particles = [];
@@ -334,579 +355,617 @@ class Game {
     }
 
     async initialize() {
-    try {
-        // 안개 효과 제거
-        this.scene.fog = null;
-        this.scene.background = new THREE.Color(0x87CEEB);
-
-        // 주변광 설정 - 더 밝게
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
-        this.scene.add(ambientLight);
-
-        // 태양광 설정
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-        directionalLight.position.set(100, 100, 50);
-        directionalLight.castShadow = true;
-        directionalLight.shadow.mapSize.width = 1024;
-        directionalLight.shadow.mapSize.height = 1024;
-        this.scene.add(directionalLight);
-
-        // 사막 지형 생성 (헬리콥터 게임 스타일)
-        const groundGeometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 100, 100);
-        const groundMaterial = new THREE.MeshStandardMaterial({
-            color: 0xD2B48C,
-            roughness: 0.8,
-            metalness: 0.2
-        });
-
-        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
-        ground.rotation.x = -Math.PI / 2;
-        ground.receiveShadow = true;
-
-        // 지형의 기복 추가 (단순화)
-        const vertices = ground.geometry.attributes.position.array;
-        let seed = Math.random() * 100;
-        for (let i = 0; i < vertices.length; i += 3) {
-            vertices[i + 2] = Math.sin(vertices[i] * 0.01) * Math.cos(vertices[i + 1] * 0.01) * 20;
-        }
-
-        ground.geometry.attributes.position.needsUpdate = true;
-        ground.geometry.computeVertexNormals();
-        
-        this.scene.add(ground);
-
-        // 나머지 초기화 코드
-        await this.addDesertDecorations();
-        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(tankPosition);
-        
-        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();
-    }
-}
-
-  // 사막 장식물 추가 메소드
-async addDesertDecorations() {
-    // 바위 생성
-    const rockGeometries = [
-        new THREE.DodecahedronGeometry(3),
-        new THREE.DodecahedronGeometry(2),
-        new THREE.DodecahedronGeometry(4)
-    ];
-
-    const rockMaterial = new THREE.MeshStandardMaterial({
-        color: 0x8B4513,
-        roughness: 0.9,
-        metalness: 0.1
-    });
-
-    for (let i = 0; i < 100; i++) {
-        const rockGeometry = rockGeometries[Math.floor(Math.random() * rockGeometries.length)];
-        const rock = new THREE.Mesh(rockGeometry, rockMaterial);
-        
-        rock.position.set(
-            (Math.random() - 0.5) * MAP_SIZE * 0.9,
-            Math.random() * 2,
-            (Math.random() - 0.5) * MAP_SIZE * 0.9
-        );
-        
-        rock.rotation.set(
-            Math.random() * Math.PI,
-            Math.random() * Math.PI,
-            Math.random() * Math.PI
-        );
-        
-        rock.scale.set(
-            1 + Math.random() * 0.5,
-            1 + Math.random() * 0.5,
-            1 + Math.random() * 0.5
-        );
-        
-        rock.castShadow = true;
-        rock.receiveShadow = true;
-        this.scene.add(rock);
-    }
+        try {
+            // 안개 효과 제거
+            this.scene.fog = null;
+            this.scene.background = new THREE.Color(0x87CEEB);
+
+            // 주변광 설정 - 더 밝게
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+            this.scene.add(ambientLight);
+
+            // 태양광 설정
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(100, 100, 50);
+            directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 1024;
+            directionalLight.shadow.mapSize.height = 1024;
+            this.scene.add(directionalLight);
+
+            // 사막 지형 생성
+            const groundGeometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 100, 100);
+            const groundMaterial = new THREE.MeshStandardMaterial({
+                color: 0xD2B48C,
+                roughness: 0.8,
+                metalness: 0.2
+            });
 
-    // 선인장 추가 (간단한 geometry로 표현)
-    const cactusGeometry = new THREE.CylinderGeometry(0.5, 0.7, 4, 8);
-    const cactusMaterial = new THREE.MeshStandardMaterial({
-        color: 0x2F4F2F,
-        roughness: 0.8
-    });
-
-    for (let i = 0; i < 50; i++) {
-        const cactus = new THREE.Mesh(cactusGeometry, cactusMaterial);
-        cactus.position.set(
-            (Math.random() - 0.5) * MAP_SIZE * 0.8,
-            2,
-            (Math.random() - 0.5) * MAP_SIZE * 0.8
-        );
-        cactus.castShadow = true;
-        cactus.receiveShadow = true;
-        this.scene.add(cactus);
-    }
-}
+            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+            ground.rotation.x = -Math.PI / 2;
+            ground.receiveShadow = true;
 
-    setupEventListeners() {
-        document.addEventListener('keydown', (event) => {
-            if (this.isLoading || this.isGameOver) 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 vertices = ground.geometry.attributes.position.array;
+            let seed = Math.random() * 100;
+            for (let i = 0; i < vertices.length; i += 3) {
+                vertices[i + 2] = Math.sin(vertices[i] * 0.01) * Math.cos(vertices[i + 1] * 0.01) * 20;
             }
-        });
 
-        document.addEventListener('keyup', (event) => {
-            if (this.isLoading || this.isGameOver) 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;
-            }
-        });
+            ground.geometry.attributes.position.needsUpdate = true;
+            ground.geometry.computeVertexNormals();
+            
+            this.scene.add(ground);
 
-       document.addEventListener('mousemove', (event) => {
-    if (this.isLoading || this.isGameOver || !document.pointerLockElement) return;
-
-    const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
-    // 카메라 회전 누적
-    this.mouse.x += movementX * 0.002;
-    // X축 회전만 사용하므로 Y축은 0으로 유지
-    this.mouse.y = 0;
-
-    // 각도 정규화 (-π ~ π)
-    while (this.mouse.x > Math.PI) this.mouse.x -= Math.PI * 2;
-    while (this.mouse.x < -Math.PI) this.mouse.x += Math.PI * 2;
-});
-
-
-        document.addEventListener('click', () => {
-            if (!document.pointerLockElement) {
-                document.body.requestPointerLock();
-            } else if (!this.isGameOver) {
-                const bullet = this.tank.shoot(this.scene);
-                if (bullet) {
-                    // Shooting effects could be added here
-                }
+            await this.addDesertDecorations();
+            await this.tank.initialize(this.scene, this.loader);
+          if (!this.tank.isLoaded) {
+                throw new Error('Tank loading failed');
             }
-        });
 
-        document.addEventListener('pointerlockchange', () => {
-            if (!document.pointerLockElement) {
-                this.mouse.x = 0;
-                this.mouse.y = 0;
-            }
-        });
+            const tankPosition = this.tank.getPosition();
+            this.camera.position.set(
+                tankPosition.x,
+                tankPosition.y + 15,
+                tankPosition.z - 30
+            );
+            this.camera.lookAt(tankPosition);
+            
+            this.isLoading = false;
+            document.getElementById('loading').style.display = 'none';
+            
+            this.animate();
+            this.spawnEnemies();
+            this.startGameTimer();
 
-        window.addEventListener('resize', () => {
-            this.camera.aspect = window.innerWidth / window.innerHeight;
-            this.camera.updateProjectionMatrix();
-            this.renderer.setSize(window.innerWidth, window.innerHeight);
-        });
+        } catch (error) {
+            console.error('Game initialization error:', error);
+            this.handleLoadingError();
+        }
     }
 
-    handleMovement() {
-    if (!this.tank.isLoaded || this.isGameOver) return;
-
-    const direction = new THREE.Vector3();
-
-    // 차체 이동과 회전은 유지
-    if (this.keys.forward) direction.z += 1;
-    if (this.keys.backward) direction.z -= 1;
-    if (this.keys.left) this.tank.rotate(-1);
-    if (this.keys.right) this.tank.rotate(1);
-
-    if (direction.length() > 0) {
-        direction.normalize();
-        direction.applyEuler(this.tank.body.rotation);
-        this.tank.move(direction);
-    }
+    // 레이더 업데이트 메서드 추가
+    updateRadar() {
+        const currentTime = Date.now();
+        if (currentTime - this.lastRadarUpdate < this.radarUpdateInterval) return;
+        
+        const radar = document.getElementById('radar');
+        const radarRect = radar.getBoundingClientRect();
+        const radarCenter = {
+            x: radarRect.width / 2,
+            y: radarRect.height / 2
+        };
 
-    // 탱크 위치 가져오기
-    const tankPos = this.tank.getPosition();
-    
-    // 카메라는 마우스 X 회전에만 따라감
-    const cameraDistance = 30;
-    const cameraHeight = 15;
-    const cameraAngle = this.mouse.x + Math.PI; // 항상 포탑의 뒤쪽에 위치
-    
-    const cameraX = tankPos.x + Math.sin(cameraAngle) * cameraDistance;
-    const cameraZ = tankPos.z + Math.cos(cameraAngle) * cameraDistance;
-
-    this.camera.position.set(
-        cameraX,
-        tankPos.y + cameraHeight,
-        cameraZ
-    );
-
-    // 카메라가 탱크를 바라보도록 설정
-    const lookAtPoint = new THREE.Vector3(
-        tankPos.x,
-        tankPos.y + 2,
-        tankPos.z
-    );
-    this.camera.lookAt(lookAtPoint);
-}
+        // 기존 적 도트 제거
+        const oldDots = radar.getElementsByClassName('enemy-dot');
+        while (oldDots[0]) {
+            oldDots[0].remove();
+        }
 
-    //this.camera.lookAt(lookAtPoint);
+        // 탱크 위치 가져오기
+        const tankPos = this.tank.getPosition();
 
+        // 모든 적에 대해 레이더에 표시
+        this.enemies.forEach(enemy => {
+            if (!enemy.mesh || !enemy.isLoaded) return;
 
-    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 }
-        ];
+            const enemyPos = enemy.mesh.position;
+            const distance = tankPos.distanceTo(enemyPos);
 
-        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)
+            // 레이더 범위 내에 있는 경우만 표시
+            if (distance <= this.radarRange) {
+                // 탱크 기준 상대 각도 계산
+                const angle = Math.atan2(
+                    enemyPos.x - tankPos.x,
+                    enemyPos.z - tankPos.z
                 );
-                attempts++;
-            } while (this.checkBuildingCollision(position, type) && attempts < 50);
 
-            if (attempts < 50) {
-                building.position.copy(position);
-                this.buildings.push(building);
-                this.scene.add(building);
+                // 상대 거리를 레이더 크기에 맞게 스케일링
+                const relativeDistance = distance / this.radarRange;
+                const dotX = radarCenter.x + Math.sin(angle) * (radarCenter.x * relativeDistance);
+                const dotY = radarCenter.y + Math.cos(angle) * (radarCenter.y * relativeDistance);
+
+                // 적 도트 생성 및 추가
+                const dot = document.createElement('div');
+                dot.className = 'enemy-dot';
+                dot.style.left = `${dotX}px`;
+                dot.style.top = `${dotY}px`;
+                radar.appendChild(dot);
             }
-        }
-        return Promise.resolve();
-    }
-
-    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,
-                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);
-        });
+        this.lastRadarUpdate = currentTime;
     }
 
-    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>
-            `;
-        }
-    }
-
-    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 < 3 && !this.isGameOver) {  // 최대 3대로 제한
-            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);
-                this.enemies.push(enemy);
-            }
-        }
-        if (!this.isGameOver) {
-            setTimeout(spawnEnemy, 10000);  // 10초마다 스폰
-        }
-    };
-    
-    spawnEnemy();
-}
-
-
-    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;
-                }
-            }
+    async addDesertDecorations() {
+        // 바위 생성
+        const rockGeometries = [
+            new THREE.DodecahedronGeometry(3),
+            new THREE.DodecahedronGeometry(2),
+            new THREE.DodecahedronGeometry(4)
+        ];
 
-            if (!collisionFound) return position;
+        const rockMaterial = new THREE.MeshStandardMaterial({
+            color: 0x8B4513,
+            roughness: 0.9,
+            metalness: 0.1
+        });
 
-            attempts++;
-        } while (attempts < maxAttempts);
+        for (let i = 0; i < 100; i++) {
+            const rockGeometry = rockGeometries[Math.floor(Math.random() * rockGeometries.length)];
+            const rock = new THREE.Mesh(rockGeometry, rockMaterial);
+          rock.position.set(
+               (Math.random() - 0.5) * MAP_SIZE * 0.9,
+               Math.random() * 2,
+               (Math.random() - 0.5) * MAP_SIZE * 0.9
+           );
+           
+           rock.rotation.set(
+               Math.random() * Math.PI,
+               Math.random() * Math.PI,
+               Math.random() * Math.PI
+           );
+           
+           rock.scale.set(
+               1 + Math.random() * 0.5,
+               1 + Math.random() * 0.5,
+               1 + Math.random() * 0.5
+           );
+           
+           rock.castShadow = true;
+           rock.receiveShadow = true;
+           this.scene.add(rock);
+       }
 
-        return null;
-    }
+       // 선인장 추가 (간단한 geometry로 표현)
+       const cactusGeometry = new THREE.CylinderGeometry(0.5, 0.7, 4, 8);
+       const cactusMaterial = new THREE.MeshStandardMaterial({
+           color: 0x2F4F2F,
+           roughness: 0.8
+       });
+
+       for (let i = 0; i < 50; i++) {
+           const cactus = new THREE.Mesh(cactusGeometry, cactusMaterial);
+           cactus.position.set(
+               (Math.random() - 0.5) * MAP_SIZE * 0.8,
+               2,
+               (Math.random() - 0.5) * MAP_SIZE * 0.8
+           );
+           cactus.castShadow = true;
+           cactus.receiveShadow = true;
+           this.scene.add(cactus);
+       }
+   }
 
-    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);
-            }
-        }
-    }
+   setupEventListeners() {
+       document.addEventListener('keydown', (event) => {
+           if (this.isLoading || this.isGameOver) 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 || this.isGameOver) 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;
+           }
+       });
 
-    createExplosion(position) {
-        for (let i = 0; i < PARTICLE_COUNT; i++) {
-            this.particles.push(new Particle(this.scene, position));
-        }
-    }
+       document.addEventListener('mousemove', (event) => {
+           if (this.isLoading || this.isGameOver || !document.pointerLockElement) return;
+
+           const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
+           this.mouse.x += movementX * 0.002;
+           this.mouse.y = 0;
+
+           while (this.mouse.x > Math.PI) this.mouse.x -= Math.PI * 2;
+           while (this.mouse.x < -Math.PI) this.mouse.x += Math.PI * 2;
+       });
+
+       document.addEventListener('click', () => {
+           if (!document.pointerLockElement) {
+               document.body.requestPointerLock();
+           } else if (!this.isGameOver) {
+               const bullet = this.tank.shoot(this.scene);
+               if (bullet) {
+                   // Shooting effects could be added here
+               }
+           }
+       });
+
+       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 || this.isGameOver) return;
 
-    checkCollisions() {
-        if (this.isLoading || !this.tank.isLoaded) return;
+       const direction = new THREE.Vector3();
 
-        const tankPosition = this.tank.getPosition();
+       // 차체 이동과 회전은 유지
+       if (this.keys.forward) direction.z += 1;
+       if (this.keys.backward) direction.z -= 1;
+       if (this.keys.left) this.tank.rotate(-1);
+       if (this.keys.right) this.tank.rotate(1);
 
-        // 적 총알과 플레이어 탱크 충돌 체크
-        this.enemies.forEach(enemy => {
-            if (!enemy.mesh || !enemy.isLoaded) return;
+       if (direction.length() > 0) {
+           direction.normalize();
+           direction.applyEuler(this.tank.body.rotation);
+           this.tank.move(direction);
+       }
 
-            enemy.bullets.forEach(bullet => {
-                const distance = bullet.position.distanceTo(tankPosition);
-                if (distance < 1) {
-                    if (this.tank.takeDamage(10)) {
-                        this.endGame();
-                    }
-                    this.scene.remove(bullet);
-                    enemy.bullets = enemy.bullets.filter(b => b !== bullet);
-                    
-                    this.createExplosion(bullet.position);
-                    document.getElementById('health').style.width = 
-                        `${(this.tank.health / MAX_HEALTH) * 100}%`;
-                }
-            });
-        });
+       // 탱크 위치 가져오기
+       const tankPos = this.tank.getPosition();
+       
+       // 카메라는 마우스 X 회전에만 따라감
+       const cameraDistance = 30;
+       const cameraHeight = 15;
+       const cameraAngle = this.mouse.x + Math.PI; // 항상 포탑의 뒤쪽에 위치
+       
+       const cameraX = tankPos.x + Math.sin(cameraAngle) * cameraDistance;
+       const cameraZ = tankPos.z + Math.cos(cameraAngle) * cameraDistance;
+
+       this.camera.position.set(
+           cameraX,
+           tankPos.y + cameraHeight,
+           cameraZ
+       );
+
+       // 카메라가 탱크를 바라보도록 설정
+       const lookAtPoint = new THREE.Vector3(
+           tankPos.x,
+           tankPos.y + 2,
+           tankPos.z
+       );
+       this.camera.lookAt(lookAtPoint);
+   }
 
-        // 플레이어 총알과 적 충돌 체크
-        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);
-                }
-            });
-        });
+   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);
+           }
+       }
+       return Promise.resolve();
+   }
 
-        // 플레이어 탱크와 건물 충돌 체크
-        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.copy(this.tank.body.position);
-    }
+   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,
+               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);
+       });
+   }
 
-    endGame() {
-        if (this.isGameOver) return;
-        
-        this.isGameOver = true;
-        
-        if (this.gameTimer) {
-            clearInterval(this.gameTimer);
-        }
+   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>
+           `;
+       }
+   }
 
-        if (this.animationFrameId) {
-            cancelAnimationFrame(this.animationFrameId);
-        }
+   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);
+   }
 
-        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 = '#0f0';
-        gameOverDiv.style.fontSize = '48px';
-        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: #0f0; border: none; 
-                           color: black; border-radius: 5px;">
-                Play Again
-            </button>
-        `;
-        document.body.appendChild(gameOverDiv);
-    }
+   spawnEnemies() {
+       const spawnEnemy = () => {
+           if (this.enemies.length < 3 && !this.isGameOver) {  // 최대 3대로 제한
+               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);
+                   this.enemies.push(enemy);
+               }
+           }
+           if (!this.isGameOver) {
+               setTimeout(spawnEnemy, 10000);  // 10초마다 스폰
+           }
+       };
+       
+       spawnEnemy();
+   }
 
-    updateUI() {
-        if (!this.isGameOver) {
-            const healthBar = document.getElementById('health');
-            if (healthBar) {
-                healthBar.style.width = `${(this.tank.health / MAX_HEALTH) * 100}%`;
-            }
+   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;
+   }
+  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 timeElement = document.getElementById('time');
-            if (timeElement) {
-                timeElement.textContent = `Time: ${this.gameTime}s`;
-            }
+   createExplosion(position) {
+       for (let i = 0; i < PARTICLE_COUNT; i++) {
+           this.particles.push(new Particle(this.scene, position));
+       }
+   }
 
-            const scoreElement = document.getElementById('score');
-            if (scoreElement) {
-                scoreElement.textContent = `Score: ${this.score}`;
-            }
-        }
-    }
+   checkCollisions() {
+       if (this.isLoading || !this.tank.isLoaded) return;
+
+       const tankPosition = this.tank.getPosition();
+
+       // 적 총알과 플레이어 탱크 충돌 체크
+       this.enemies.forEach(enemy => {
+           if (!enemy.mesh || !enemy.isLoaded) return;
+
+           enemy.bullets.forEach(bullet => {
+               const distance = bullet.position.distanceTo(tankPosition);
+               if (distance < 1) {
+                   if (this.tank.takeDamage(10)) {
+                       this.endGame();
+                   }
+                   this.scene.remove(bullet);
+                   enemy.bullets = enemy.bullets.filter(b => b !== bullet);
+                   
+                   this.createExplosion(bullet.position);
+                   document.getElementById('health').style.width = 
+                       `${(this.tank.health / MAX_HEALTH) * 100}%`;
+               }
+           });
+       });
+
+       // 플레이어 총알과 적 충돌 체크
+       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) {
+           const buildingBox = new THREE.Box3().setFromObject(building);
+           if (tankBoundingBox.intersectsBox(buildingBox)) {
+               this.tank.body.position.copy(this.previousTankPosition);
+               break;
+           }
+       }
+       
+       // 이전 위치 저장
+       this.previousTankPosition.copy(this.tank.body.position);
+   }
+  endGame() {
+       if (this.isGameOver) return;
+       
+       this.isGameOver = true;
+       
+       if (this.gameTimer) {
+           clearInterval(this.gameTimer);
+       }
 
-    animate() {
-        if (this.isGameOver) {
-            if (this.animationFrameId) {
-                cancelAnimationFrame(this.animationFrameId);
-            }
-            return;
-        }
+       if (this.animationFrameId) {
+           cancelAnimationFrame(this.animationFrameId);
+       }
 
-        this.animationFrameId = requestAnimationFrame(() => this.animate());
+       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 = '#0f0';
+       gameOverDiv.style.fontSize = '48px';
+       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: #0f0; border: none; 
+                          color: black; border-radius: 5px;">
+               Play Again
+           </button>
+       `;
+       document.body.appendChild(gameOverDiv);
+   }
 
-        const currentTime = performance.now();
-        const deltaTime = (currentTime - this.lastTime) / 1000;
-        this.lastTime = currentTime;
+   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}`;
+           }
+       }
+   }
 
-        if (!this.isLoading) {
-            this.handleMovement();
-            this.tank.update(this.mouse.x, this.mouse.y, this.scene);  // scene 객체 전달
-            
-            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);
-                }
-            });
+   animate() {
+       if (this.isGameOver) {
+           if (this.animationFrameId) {
+               cancelAnimationFrame(this.animationFrameId);
+           }
+           return;
+       }
 
-            this.updateParticles();
-            this.checkCollisions();
-            this.updateUI();
-        }
-        
-        this.renderer.render(this.scene, this.camera);
-    }
-  }
+       this.animationFrameId = requestAnimationFrame(() => this.animate());
+
+       const currentTime = performance.now();
+       const deltaTime = (currentTime - this.lastTime) / 1000;
+       this.lastTime = currentTime;
+
+       if (!this.isLoading) {
+           this.handleMovement();
+           this.tank.update(this.mouse.x, this.mouse.y, this.scene);
+           
+           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);
+               }
+           });
+
+           this.updateParticles();
+           this.checkCollisions();
+           this.updateUI();
+           this.updateRadar(); // 레이더 업데이트 추가
+       }
+       
+       this.renderer.render(this.scene, this.camera);
+   }
+}
 
 // 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();
-    }
+   document.getElementById('startScreen').style.display = 'none';
+   document.body.requestPointerLock();
+   
+   // Create new game instance or restart existing one
+   if (!window.gameInstance) {
+       window.gameInstance = new Game();
+   }
 };
 
 // Initialize game
 document.addEventListener('DOMContentLoaded', () => {
-    const game = new Game();
+   const game = new Game();
 });