Update game.js

game.js

@@ -5,11 +5,11 @@ import { PointerLockControls } from 'three/addons/controls/PointerLockControls.j
 // 게임 상수
 const GAME_DURATION = 180;
 const MAP_SIZE = 2000;
-const HELICOPTER_HEIGHT = 100; // 헬리콥터 고도 상향
-const ENEMY_GROUND_HEIGHT = 5; // 적 지상 높이
+const HELICOPTER_HEIGHT = 100; // 높이 증가
+const ENEMY_GROUND_HEIGHT = 5;
 const ENEMY_SCALE = 3;
 const MAX_HEALTH = 1000;
-const ENEMY_MOVE_SPEED = 0.1; // 적 이동 속도
+const ENEMY_MOVE_SPEED = 0.1; // 속도 감소
 const ENEMY_MODELS = [
     './models/enemy1.glb',
     './models/enemy12.glb',
@@ -31,6 +31,7 @@ let playerHealth = MAX_HEALTH;
 let ammo = 30;
 let currentStage = 1;
 let isGameOver = false;
+let lastTime = performance.now();
 
 // 사운드 풀 클래스
 class SoundPool {
@@ -67,7 +68,7 @@ class SoundPool {
 const sounds = {
     bgm: new Audio('Music.wav'),
     gunshot: new SoundPool('gun.wav', 20),
-    explosion: new SoundPool('explosion.wav', 10) // 폭발 사운드 추가
+    explosion: new SoundPool('explosion.wav', 10)
 };
 sounds.bgm.loop = true;
 
@@ -79,43 +80,87 @@ const moveState = {
     right: false
 };
 
-function init() {
-    console.log('Game initialized');
-    console.log('Available enemy models:', ENEMY_MODELS);
+async function init() {
+    console.log('Initializing game...');
 
+    // Scene 초기화
     scene = new THREE.Scene();
     scene.background = new THREE.Color(0x87ceeb);
     scene.fog = new THREE.Fog(0x87ceeb, 0, 1500);
 
+    // Camera 설정
     camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 3000);
     camera.position.set(0, HELICOPTER_HEIGHT, 0);
 
-    renderer = new THREE.WebGLRenderer({ antialias: true });
+    // Renderer 설정
+    renderer = new THREE.WebGLRenderer({ 
+        antialias: true,
+        powerPreference: "high-performance"
+    });
     renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
     document.body.appendChild(renderer.domElement);
 
-    const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
+    // 조명 설정
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
     scene.add(ambientLight);
 
-    const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
+    const dirLight = new THREE.DirectionalLight(0xffffff, 1);
     dirLight.position.set(100, 100, 50);
     dirLight.castShadow = true;
+    dirLight.shadow.mapSize.width = 2048;
+    dirLight.shadow.mapSize.height = 2048;
     scene.add(dirLight);
 
+    // Controls 설정
     controls = new PointerLockControls(camera, document.body);
 
+    // 이벤트 리스너
     document.addEventListener('click', onClick);
     document.addEventListener('keydown', onKeyDown);
     document.addEventListener('keyup', onKeyUp);
     window.addEventListener('resize', onWindowResize);
 
-    createTerrain();
-    console.log('Starting to load enemies...');
-    loadEnemies();
+    // 지형 생성
+    await createTerrain();
+    
+    // 적 로드
+    await loadEnemies();
+
+    // 로딩 화면 제거
+    document.getElementById('loading').style.display = 'none';
+
+    console.log('Initialization complete');
+}
+
+function createTerrain() {
+    return new Promise((resolve) => {
+        const geometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 200, 200);
+        const material = new THREE.MeshStandardMaterial({
+            color: 0xD2B48C,
+            roughness: 0.8,
+            metalness: 0.2
+        });
+
+        const vertices = geometry.attributes.position.array;
+        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;
+        }
+
+        geometry.attributes.position.needsUpdate = true;
+        geometry.computeVertexNormals();
+
+        const terrain = new THREE.Mesh(geometry, material);
+        terrain.rotation.x = -Math.PI / 2;
+        terrain.receiveShadow = true;
+        scene.add(terrain);
+
+        addObstacles();
+        resolve();
+    });
 }
 
-// 폭발 효과 생성 함수
 function createExplosion(position) {
     const particleCount = 30;
     const particles = [];
@@ -141,8 +186,7 @@ function createExplosion(position) {
         scene.add(particle);
     }
 
-    // 폭발 애니메이션
-    const animateExplosion = () => {
+    function animateExplosion() {
         particles.forEach((particle, i) => {
             particle.position.add(particle.velocity);
             particle.material.opacity -= 0.02;
@@ -156,111 +200,264 @@ function createExplosion(position) {
         if (particles.length > 0) {
             requestAnimationFrame(animateExplosion);
         }
-    };
-    
+    }
+
     animateExplosion();
     sounds.explosion.play();
 }
 
-function createTerrain() {
-    const geometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 200, 200);
-    const material = new THREE.MeshStandardMaterial({
-        color: 0xD2B48C,
-        roughness: 0.8,
-        metalness: 0.2
+function addObstacles() {
+    const rockGeometry = new THREE.DodecahedronGeometry(10);
+    const rockMaterial = new THREE.MeshStandardMaterial({
+        color: 0x8B4513,
+        roughness: 0.9
     });
 
-    const vertices = geometry.attributes.position.array;
-    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;
+    for (let i = 0; i < 100; i++) {
+        const rock = new THREE.Mesh(rockGeometry, rockMaterial);
+        rock.position.set(
+            (Math.random() - 0.5) * MAP_SIZE * 0.9,
+            Math.random() * 10,
+            (Math.random() - 0.5) * MAP_SIZE * 0.9
+        );
+        rock.rotation.set(
+            Math.random() * Math.PI,
+            Math.random() * Math.PI,
+            Math.random() * Math.PI
+        );
+        rock.castShadow = true;
+        rock.receiveShadow = true;
+        scene.add(rock);
     }
+}
 
-    geometry.attributes.position.needsUpdate = true;
-    geometry.computeVertexNormals();
+function loadEnemies() {
+    return new Promise((resolve) => {
+        const loader = new GLTFLoader();
+        const enemyCount = 3 + currentStage;
+        let loadedCount = 0;
+
+        for (let i = 0; i < enemyCount; i++) {
+            const angle = (i / enemyCount) * Math.PI * 2;
+            const radius = 200;
+            const position = new THREE.Vector3(
+                Math.cos(angle) * radius,
+                ENEMY_GROUND_HEIGHT,
+                Math.sin(angle) * radius
+            );
+
+            const modelPath = ENEMY_MODELS[i % ENEMY_MODELS.length];
+            
+            loader.load(modelPath,
+                (gltf) => {
+                    const enemy = gltf.scene;
+                    enemy.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
+                    enemy.position.copy(position);
+                    enemy.rotation.y = Math.PI;
+
+                    enemy.traverse((node) => {
+                        if (node.isMesh) {
+                            node.castShadow = true;
+                            node.receiveShadow = true;
+                            node.material.metalness = 0.2;
+                            node.material.roughness = 0.8;
+                        }
+                    });
+
+                    scene.add(enemy);
+                    enemies.push({
+                        model: enemy,
+                        health: 100,
+                        speed: ENEMY_MOVE_SPEED,
+                        lastAttackTime: 0
+                    });
+
+                    loadedCount++;
+                    if (loadedCount === enemyCount) {
+                        resolve();
+                    }
+                },
+                (xhr) => {
+                    console.log(`${modelPath}: ${(xhr.loaded / xhr.total * 100)}% loaded`);
+                },
+                (error) => {
+                    console.error('Error loading enemy model:', error);
+                    loadedCount++;
+                    if (loadedCount === enemyCount) {
+                        resolve();
+                    }
+                }
+            );
+        }
+    });
+}
 
-    const terrain = new THREE.Mesh(geometry, material);
-    terrain.rotation.x = -Math.PI / 2;
-    terrain.receiveShadow = true;
-    scene.add(terrain);
+// 이벤트 핸들러들...
+function onClick() {
+    if (!controls.isLocked) {
+        controls.lock();
+        sounds.bgm.play();
+    } else if (ammo > 0) {
+        shoot();
+    }
+}
 
-    addObstacles();
+function onKeyDown(event) {
+    switch(event.code) {
+        case 'KeyW': moveState.forward = true; break;
+        case 'KeyS': moveState.backward = true; break;
+        case 'KeyA': moveState.left = true; break;
+        case 'KeyD': moveState.right = true; break;
+        case 'KeyR': reload(); break;
+    }
 }
 
-function createTemporaryEnemy(position) {
-    const geometry = new THREE.BoxGeometry(5, 5, 5);
-    const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
-    const cube = new THREE.Mesh(geometry, material);
-    cube.position.copy(position);
-    return cube;
+function onKeyUp(event) {
+    switch(event.code) {
+        case 'KeyW': moveState.forward = false; break;
+        case 'KeyS': moveState.backward = false; break;
+        case 'KeyA': moveState.left = false; break;
+        case 'KeyD': moveState.right = false; break;
+    }
 }
 
-function loadEnemies() {
-    const loader = new GLTFLoader();
-    const enemyCount = 3 + currentStage;
-
-    for (let i = 0; i < enemyCount; i++) {
-        const angle = (i / enemyCount) * Math.PI * 2;
-        const radius = 200;
-        const position = new THREE.Vector3(
-            Math.cos(angle) * radius,
-            ENEMY_GROUND_HEIGHT,
-            Math.sin(angle) * radius
-        );
+function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+// 게임 메커닉 함수들...
+function shoot() {
+    if (ammo <= 0) return;
+    
+    ammo--;
+    updateAmmoDisplay();
+    
+    const bullet = createBullet();
+    bullets.push(bullet);
+    
+    sounds.gunshot.play();
+}
+
+function createBullet() {
+    const bulletGeometry = new THREE.SphereGeometry(0.5);
+    const bulletMaterial = new THREE.MeshBasicMaterial({ 
+        color: 0xffff00,
+        emissive: 0xffff00,
+        emissiveIntensity: 1
+    });
+    const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
+    
+    bullet.position.copy(camera.position);
+    const direction = new THREE.Vector3();
+    camera.getWorldDirection(direction);
+    bullet.velocity = direction.multiplyScalar(3);
+    
+    scene.add(bullet);
+    return bullet;
+}
+
+function reload() {
+    ammo = 30;
+    updateAmmoDisplay();
+}
+
+function updateAmmoDisplay() {
+    document.getElementById('ammo').textContent = `Ammo: ${ammo}/30`;
+}
+
+function updateHealthBar() {
+    const healthElement = document.getElementById('health');
+    const healthPercentage = (playerHealth / MAX_HEALTH) * 100;
+    healthElement.style.width = `${healthPercentage}%`;
+}
+
+function updateHelicopterHUD() {
+    const altitude = Math.round(camera.position.y);
+    document.querySelector('#altitude-indicator span').textContent = altitude;
+
+    const speed = Math.round(
+        Math.sqrt(
+            moveState.forward * moveState.forward +
+            moveState.right * moveState.right
+        ) * 100
+    );
+    document.querySelector('#speed-indicator span').textContent = speed;
 
-        const tempEnemy = createTemporaryEnemy(position);
-        scene.add(tempEnemy);
+    const heading = Math.round(
+        (camera.rotation.y * (180 / Math.PI) + 360) % 360
+    );
+    document.querySelector('#compass span').textContent = heading;
+
+    updateRadar();
+}
+
+function updateRadar() {
+    const radarTargets = document.querySelector('.radar-targets');
+    radarTargets.innerHTML = '';
+
+    enemies.forEach(enemy => {
+        const relativePos = enemy.model.position.clone().sub(camera.position);
+        const distance = relativePos.length();
         
-        const modelPath = ENEMY_MODELS[i % ENEMY_MODELS.length];
-        console.log('Loading enemy model:', modelPath);
-
-        loader.load(
-            modelPath,
-            (gltf) => {
-                console.log('Successfully loaded enemy model:', modelPath);
-                const enemy = gltf.scene;
-                enemy.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
-                enemy.position.copy(position);
-
-                enemy.rotation.y = Math.PI;
-
-                enemy.traverse((node) => {
-                    if (node.isMesh) {
-                        node.castShadow = true;
-                        node.receiveShadow = true;
-                        node.material.metalness = 0.2;
-                        node.material.roughness = 0.8;
-                    }
-                });
+        if (distance < 500) {
+            const angle = Math.atan2(relativePos.x, relativePos.z);
+            const normalizedDistance = distance / 500;
+            
+            const dot = document.createElement('div');
+            dot.className = 'radar-dot';
+            dot.style.left = `${50 + Math.sin(angle) * normalizedDistance * 45}%`;
+            dot.style.top = `${50 + Math.cos(angle) * normalizedDistance * 45}%`;
+            radarTargets.appendChild(dot);
+        }
+    });
+}
 
-                scene.remove(tempEnemy);
-                scene.add(enemy);
+function updateMovement() {
+    if (controls.isLocked) {
+        const speed = 2.0;
+        if (moveState.forward) controls.moveForward(speed);
+        if (moveState.backward) controls.moveForward(-speed);
+        if (moveState.left) controls.moveRight(-speed);
+        if (moveState.right) controls.moveRight(speed);
+
+        // 최소 고도 유지
+        if (camera.position.y < HELICOPTER_HEIGHT) {
+            camera.position.y = HELICOPTER_HEIGHT;
+        }
+    }
+}
 
-                const index = enemies.findIndex(e => e.model === tempEnemy);
-                if (index !== -1) {
-                    enemies[index].model = enemy;
-                    enemies[index].muzzleFlash = createMuzzleFlash();
-                    enemy.add(enemies[index].muzzleFlash);
+function updateBullets() {
+    for (let i = bullets.length - 1; i >= 0; i--) {
+        bullets[i].position.add(bullets[i].velocity);
+        
+        enemies.forEach(enemy => {
+            if (bullets[i].position.distanceTo(enemy.model.position) < 5) {
+                scene.remove(bullets[i]);
+                bullets.splice(i, 1);
+                enemy.health -= 25;
+                
+                createExplosion(enemy.model.position.clone());
+                
+                if (enemy.health <= 0) {
+                    createExplosion(enemy.model.position.clone());
+                    createExplosion(enemy.model.position.clone().add(new THREE.Vector3(2, 0, 2)));
+                    createExplosion(enemy.model.position.clone().add(new THREE.Vector3(-2, 0, -2)));
+                    scene.remove(enemy.model);
+                    enemies = enemies.filter(e => e !== enemy);
                 }
-            },
-            (xhr) => {
-                console.log(`${modelPath}: ${(xhr.loaded / xhr.total * 100)}% loaded`);
-            },
-            (error) => {
-                console.error('Error loading enemy model:', modelPath, error);
             }
-        );
-
-        enemies.push({
-            model: tempEnemy,
-            health: 100,
-            speed: ENEMY_MOVE_SPEED,
-            lastAttackTime: 0
         });
+
+        if (bullets[i] && bullets[i].position.distanceTo(camera.position) > 1000) {
+            scene.remove(bullets[i]);
+            bullets.splice(i, 1);
+        }
     }
 }
 
-// 나머지 함수들은 이전과 동일하게 유지되며, updateEnemies와 updateBullets 함수만 수정됩니다.
-
 function updateEnemies() {
     const currentTime = Date.now();
     
@@ -275,7 +472,6 @@ function updateEnemies() {
         newPosition.y = ENEMY_GROUND_HEIGHT;
         enemy.model.position.copy(newPosition);
 
-        // 적이 플레이어를 바라보도록 설정
         enemy.model.lookAt(new THREE.Vector3(
             camera.position.x,
             enemy.model.position.y,
@@ -285,53 +481,94 @@ function updateEnemies() {
         const distanceToPlayer = enemy.model.position.distanceTo(camera.position);
         if (distanceToPlayer < ENEMY_CONFIG.ATTACK_RANGE && 
             currentTime - enemy.lastAttackTime > ENEMY_CONFIG.ATTACK_INTERVAL) {
-            
-            if (enemy.muzzleFlash) {
-                enemy.muzzleFlash.material.opacity = 1;
-                enemy.muzzleFlash.visible = true;
-                setTimeout(() => {
-                    enemy.muzzleFlash.visible = false;
-                    enemy.muzzleFlash.material.opacity = 0;
-                }, 100);
-            }
-
             enemyBullets.push(createEnemyBullet(enemy));
             enemy.lastAttackTime = currentTime;
         }
     });
 }
 
-function updateBullets() {
-    for (let i = bullets.length - 1; i >= 0; i--) {
-        bullets[i].position.add(bullets[i].velocity);
+function createEnemyBullet(enemy) {
+    const bulletGeometry = new THREE.SphereGeometry(0.5);
+    const bulletMaterial = new THREE.MeshBasicMaterial({ 
+        color: 0xff0000,
+        emissive: 0xff0000,
+        emissiveIntensity: 1
+    });
+    const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
+    
+    bullet.position.copy(enemy.model.position);
+    const direction = new THREE.Vector3();
+    direction.subVectors(camera.position, enemy.model.position).normalize();
+    bullet.velocity = direction.multiplyScalar(ENEMY_CONFIG.BULLET_SPEED);
+    
+    scene.add(bullet);
+    return bullet;
+}
+
+function updateEnemyBullets() {
+    for (let i = enemyBullets.length - 1; i >= 0; i--) {
+        enemyBullets[i].position.add(enemyBullets[i].velocity);
         
-        enemies.forEach(enemy => {
-            if (bullets[i].position.distanceTo(enemy.model.position) < 5) {
-                scene.remove(bullets[i]);
-                bullets.splice(i, 1);
-                enemy.health -= 25;
-                
-                // 피격 효과
-                createExplosion(enemy.model.position.clone());
-                
-                if (enemy.health <= 0) {
-                    // 파괴 효과
-                    createExplosion(enemy.model.position.clone());
-                    createExplosion(enemy.model.position.clone().add(new THREE.Vector3(2, 0, 2)));
-                    createExplosion(enemy.model.position.clone().add(new THREE.Vector3(-2, 0, -2)));
-                    scene.remove(enemy.model);
-                    enemies = enemies.filter(e => e !== enemy);
-                }
+        if (enemyBullets[i].position.distanceTo(camera.position) < 3) {
+            playerHealth -= 10;
+            updateHealthBar();
+            scene.remove(enemyBullets[i]);
+            enemyBullets.splice(i, 1);
+            
+            if (playerHealth <= 0) {
+                gameOver(false);
             }
-        });
+            continue;
+        }
 
-        if (bullets[i] && bullets[i].position.distanceTo(camera.position) > 1000) {
-            scene.remove(bullets[i]);
-            bullets.splice(i, 1);
+        if (enemyBullets[i].position.distanceTo(camera.position) > 1000) {
+            scene.remove(enemyBullets[i]);
+            enemyBullets.splice(i, 1);
         }
     }
 }
 
+function checkGameStatus() {
+    if (enemies.length === 0 && currentStage < 5) {
+        currentStage++;
+        document.getElementById('stage').style.display = 'block';
+        document.getElementById('stage').textContent = `Stage ${currentStage}`;
+        setTimeout(() => {
+            document.getElementById('stage').style.display = 'none';
+            loadEnemies();
+        }, 2000);
+    }
+}
+
+function gameOver(won) {
+    isGameOver = true;
+    controls.unlock();
+    sounds.bgm.pause();
+    alert(won ? 'Mission Complete!' : 'Game Over!');
+    location.reload();
+}
+
+function gameLoop() {
+    requestAnimationFrame(gameLoop);
+
+    const time = performance.now();
+    const delta = (time - lastTime) / 1000;
+    lastTime = time;
+
+    if (controls.isLocked && !isGameOver) {
+        updateMovement();
+        updateBullets();
+        updateEnemies();
+        updateEnemyBullets();
+        updateHelicopterHUD();
+        checkGameStatus();
+    }
+
+    renderer.render(scene, camera);
+}
+
 // 게임 시작
-init();
-gameLoop();
+init().then(() => {
+    console.log('Game started');
+    gameLoop();
+});