Update game.js

game.js

@@ -31,7 +31,11 @@ class TankPlayer {
         this.turnSpeed = 0.03;
         this.turretGroup = new THREE.Group();
         this.health = MAX_HEALTH;
-        this.isLoaded = false;  // 로딩 상태 추가
+        this.isLoaded = false;
+        this.ammo = 10;
+        this.lastShootTime = 0;
+        this.shootInterval = 1000;
+        this.bullets = [];
     }
 
     async initialize(scene, loader) {
@@ -62,15 +66,44 @@ class TankPlayer {
             });
 
             scene.add(this.body);
-            this.isLoaded = true;  // 로딩 완료 표시
+            this.isLoaded = true;
             
         } catch (error) {
             console.error('Error loading tank models:', error);
-            this.isLoaded = false;  // 로딩 실패 표시
+            this.isLoaded = false;
         }
     }
 
-    // 나머지 TankPlayer 메서드들은 동일...
+    shoot(scene) {
+        const currentTime = Date.now();
+        if (currentTime - this.lastShootTime < this.shootInterval || this.ammo <= 0) return null;
+
+        // 총알 생성
+        const bulletGeometry = new THREE.SphereGeometry(0.2);
+        const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+        const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
+
+        // 총알 시작 위치 (포탑 끝)
+        const bulletOffset = new THREE.Vector3(0, 0.5, 2);
+        bulletOffset.applyQuaternion(this.turret.quaternion);
+        bullet.position.copy(this.body.position).add(bulletOffset);
+
+        // 총알 속도 (카메라/포탑 방향)
+        const direction = new THREE.Vector3(0, 0, 1);
+        direction.applyQuaternion(this.turret.quaternion);
+        bullet.velocity = direction.multiplyScalar(2);
+
+        scene.add(bullet);
+        this.bullets.push(bullet);
+        this.ammo--;
+        this.lastShootTime = currentTime;
+
+        // UI 업데이트
+        document.getElementById('ammo').textContent = `Ammo: ${this.ammo}/10`;
+        
+        return bullet;
+    }
+
     update(mouseX, mouseY) {
         if (!this.body || !this.turretGroup) return;
         
@@ -83,6 +116,19 @@ class TankPlayer {
         while (normalizedDiff < -Math.PI) normalizedDiff += Math.PI * 2;
         
         this.turretGroup.rotation.y += normalizedDiff * 0.1;
+
+        // 총알 업데이트
+        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) {
@@ -262,28 +308,24 @@ class Game {
         this.renderer = new THREE.WebGLRenderer({ antialias: true });
         this.renderer.setSize(window.innerWidth, window.innerHeight);
         this.renderer.shadowMap.enabled = true;
-        document.body.appendChild(this.renderer.domElement);
+        document.getElementById('gameContainer').appendChild(this.renderer.domElement);
 
         // 게임 요소 초기화
         this.tank = new TankPlayer();
         this.enemies = [];
         this.particles = [];
-        this.buildings = [];  // 건물 배열 추가
+        this.buildings = [];
         this.loader = new GLTFLoader();
         this.controls = null;
         this.gameTime = GAME_DURATION;
         this.score = 0;
         this.isGameOver = false;
-        this.isLoading = true;  // 로딩 상태 추가
+        this.isLoading = true;
         this.previousTankPosition = new THREE.Vector3();
+        this.lastTime = performance.now();
 
-        // 마우스 상태
-        this.mouse = {
-            x: 0,
-            y: 0
-        };
-
-        // 키보드 상태
+        // 마우스/키보드 상태
+        this.mouse = { x: 0, y: 0 };
         this.keys = {
             forward: false,
             backward: false,
@@ -293,8 +335,6 @@ class Game {
 
         // 이벤트 리스너 설정
         this.setupEventListeners();
-        
-        // 게임 초기화
         this.initialize();
     }
 
@@ -311,14 +351,15 @@ class Game {
             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);
+            // 지형 생성
+            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);
@@ -332,11 +373,8 @@ class Game {
                 throw new Error('Tank loading failed');
             }
 
-            // 카메라 위치 설정
-            this.camera.position.set(0, 10, -10);
-            this.camera.lookAt(0, 0, 0);
-
-            // 포인터 락 컨트롤 설정
+            // FPS 카메라 설정
+            this.camera.position.set(0, 2, 0);
             this.controls = new PointerLockControls(this.camera, document.body);
 
             // 로딩 완료
@@ -354,7 +392,89 @@ class Game {
         }
     }
 
-    async 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;
+                case 'Escape': 
+                    if (this.controls.isLocked) {
+                        this.controls.unlock();
+                    }
+                    break;
+            }
+        });
+
+        document.addEventListener('keyup', (event) => {
+            if (this.isLoading) return;
+            switch(event.code) {
+                case 'KeyW': this.keys.forward = false; break;
+                case 'KeyS': this.keys.backward = false; break;
+                case 'KeyA': this.keys.left = false; break;
+                case 'KeyD': this.keys.right = false; break;
+            }
+        });
+
+        // 발사 및 포인터 락 이벤트
+        document.addEventListener('click', () => {
+            if (document.pointerLockElement !== document.body) {
+                this.controls.lock();
+            } else {
+                const bullet = this.tank.shoot(this.scene);
+                if (bullet) {
+                    // 총알 발사 효과음이나 시각효과 추가 가능
+                }
+            }
+        });
+
+        // 창 크기 변경 이벤트
+        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.controls.isLocked) return;
+
+        const direction = new THREE.Vector3();
+        const cameraDirection = new THREE.Vector3();
+        this.camera.getWorldDirection(cameraDirection);
+        
+        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();
+            // 카메라 방향을 기준으로 이동
+            direction.applyAxisAngle(new THREE.Vector3(0, 1, 0), this.camera.rotation.y);
+            this.tank.move(direction);
+
+            // 탱크 본체를 카메라 방향으로 회전
+            if (Math.abs(direction.z) > 0 || Math.abs(direction.x) > 0) {
+                this.tank.body.rotation.y = Math.atan2(direction.x, direction.z);
+            }
+        }
+
+        // 카메라와 탱크 동기화
+        const tankPos = this.tank.getPosition();
+        this.camera.position.x = tankPos.x;
+        this.camera.position.z = tankPos.z;
+        this.camera.position.y = tankPos.y + 2;
+
+        // 포탑 회전을 카메라와 동기화
+        if (this.tank.turret) {
+            this.tank.turret.rotation.y = this.camera.rotation.y;
+        }
+    }
+createBuildings() {
         const buildingTypes = [
             { width: 10, height: 30, depth: 10, color: 0x808080 },
             { width: 15, height: 40, depth: 15, color: 0x606060 },
@@ -365,7 +485,6 @@ class Game {
             const type = buildingTypes[Math.floor(Math.random() * buildingTypes.length)];
             const building = this.createBuilding(type);
             
-            // 건물 위치 설정 (다른 건물과 겹치지 않게)
             let position;
             let attempts = 0;
             do {
@@ -389,7 +508,6 @@ class Game {
         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
@@ -401,7 +519,7 @@ class Game {
     }
 
     checkBuildingCollision(position, type) {
-        const margin = 5; // 건물 간 최소 거리
+        const margin = 5;
         const bbox = new THREE.Box3(
             new THREE.Vector3(
                 position.x - (type.width / 2 + margin),
@@ -438,7 +556,6 @@ class Game {
             if (this.enemies.length < ENEMY_COUNT_MAX && !this.isGameOver) {
                 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);
@@ -464,11 +581,9 @@ class Game {
                 (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);
@@ -498,62 +613,6 @@ class Game {
         }, 1000);
     }
 
-    setupEventListeners() {
-        // 키보드 이벤트
-        document.addEventListener('keydown', (event) => {
-            if (this.isLoading) return;
-            
-            switch(event.code) {
-                case 'KeyW': this.keys.forward = true; break;
-                case 'KeyS': this.keys.backward = true; break;
-                case 'KeyA': this.keys.left = true; break;
-                case 'KeyD': this.keys.right = true; break;
-            }
-        });
-
-        document.addEventListener('keyup', (event) => {
-            if (this.isLoading) return;
-            
-            switch(event.code) {
-                case 'KeyW': this.keys.forward = false; break;
-                case 'KeyS': this.keys.backward = false; break;
-                case 'KeyA': this.keys.left = false; break;
-                case 'KeyD': this.keys.right = false; break;
-            }
-        });
-
-        // 마우스 이벤트
-        document.addEventListener('mousemove', (event) => {
-            if (this.isLoading) 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();
-            this.renderer.setSize(window.innerWidth, window.innerHeight);
-        });
-    }
-
-    handleMovement() {
-        if (this.isLoading || !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) this.tank.rotate(-1);
-        if (this.keys.right) this.tank.rotate(1);
-        
-        if (direction.length() > 0) {
-            direction.normalize();
-            this.tank.move(direction);
-        }
-    }
-
     updateParticles() {
         for (let i = this.particles.length - 1; i >= 0; i--) {
             const particle = this.particles[i];
@@ -575,7 +634,6 @@ class Game {
 
         const tankPosition = this.tank.getPosition();
 
-        // 적과의 충돌 체크
         this.enemies.forEach(enemy => {
             if (!enemy.mesh || !enemy.isLoaded) return;
 
@@ -588,7 +646,6 @@ class Game {
                     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}%`;
@@ -596,24 +653,20 @@ class Game {
             });
         });
 
-        // 건물과의 충돌 체크
         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%';
@@ -635,63 +688,52 @@ class Game {
                 Play Again
             </button>
         `;
-      document.body.appendChild(gameOverDiv);  // 이 줄이 누락됨
-    } 
-      animate() {
+        document.body.appendChild(gameOverDiv);
+    }
+
+    animate() {
         if (this.isGameOver) return;
 
         requestAnimationFrame(() => this.animate());
 
-        // 로딩 중이면 렌더링만 수행
+        const currentTime = performance.now();
+        const deltaTime = (currentTime - this.lastTime) / 1000;
+        this.lastTime = currentTime;
+
         if (this.isLoading) {
             this.renderer.render(this.scene, this.camera);
             return;
         }
 
-        // 탱크 업데이트
-        this.tank.update(this.mouse.x, this.mouse.y);
         this.handleMovement();
-
-        // 적 업데이트
+        this.tank.update(this.mouse.x, this.mouse.y);
+        
         const tankPosition = this.tank.getPosition();
-        this.enemies.forEach((enemy, index) => {
+        this.enemies.forEach(enemy => {
             enemy.update(tankPosition);
             
-            if (enemy.isLoaded) {  // 로딩된 적만 공격 수행
-                const distance = enemy.mesh.position.distanceTo(tankPosition);
-                if (distance < ENEMY_CONFIG.ATTACK_RANGE) {
-                    enemy.shoot(tankPosition);
-                }
+            if (enemy.isLoaded && enemy.mesh.position.distanceTo(tankPosition) < 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}`;
@@ -699,5 +741,11 @@ class Game {
     }
 }
 
+// HTML의 startGame 함수와 연결
+window.startGame = function() {
+    document.getElementById('startScreen').style.display = 'none';
+    document.body.requestPointerLock();
+};
+
 // 게임 인스턴스 생성
 const game = new Game();