Update game.js

game.js

@@ -11,10 +11,10 @@ const ENEMY_SCALE = 3;
 const MAX_HEALTH = 1000;
 const ENEMY_MOVE_SPEED = 0.1;
 const ENEMY_MODELS = [
-    'models/enemy1.glb',
-    'models/enemy12.glb',
-    'models/enemy13.glb',
-    'models/enemy14.glb'
+    '/models/enemy1.glb',
+    '/models/enemy12.glb',
+    '/models/enemy13.glb',
+    '/models/enemy14.glb'
 ];
 const ENEMY_CONFIG = {
     ATTACK_RANGE: 100,
@@ -33,44 +33,67 @@ let currentStage = 1;
 let isGameOver = false;
 let lastTime = performance.now();
 
-// 사운드 풀 클래스
-class SoundPool {
-    constructor(soundUrl, poolSize = 10) {
-        this.sounds = [];
-        this.currentIndex = 0;
-        this.poolSize = poolSize;
-        
-        for (let i = 0; i < poolSize; i++) {
-            const sound = new Audio(soundUrl);
-            sound.preload = 'auto';
-            this.sounds.push(sound);
+// 사운드 시스템
+class SoundSystem {
+    constructor() {
+        this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        this.buffers = new Map();
+        this.pools = new Map();
+    }
+
+    async loadSound(name, url) {
+        try {
+            const response = await fetch(url);
+            const arrayBuffer = await response.arrayBuffer();
+            const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
+            this.buffers.set(name, audioBuffer);
+            this.createPool(name, audioBuffer);
+            console.log(`Sound loaded: ${name}`);
+        } catch (error) {
+            console.error(`Error loading sound ${name}:`, error);
         }
     }
 
-    play() {
-        const sound = this.sounds[this.currentIndex];
-        sound.pause();
-        sound.currentTime = 0;
-        
-        const playPromise = sound.play();
-        if (playPromise !== undefined) {
-            playPromise.catch(error => {
-                console.error("Sound play error:", error);
-                this.sounds[this.currentIndex] = new Audio(sound.src);
+    createPool(name, buffer, size = 10) {
+        const pool = [];
+        for (let i = 0; i < size; i++) {
+            pool.push({
+                source: null,
+                gainNode: this.audioContext.createGain(),
+                lastPlayed: 0
             });
         }
+        this.pools.set(name, pool);
+    }
 
-        this.currentIndex = (this.currentIndex + 1) % this.poolSize;
+    play(name) {
+        const pool = this.pools.get(name);
+        const buffer = this.buffers.get(name);
+        if (!pool || !buffer) {
+            console.warn(`Sound not found: ${name}`);
+            return;
+        }
+
+        const now = this.audioContext.currentTime;
+        const poolItem = pool.find(item => !item.source || item.lastPlayed + buffer.duration <= now);
+        
+        if (poolItem) {
+            if (poolItem.source) {
+                poolItem.source.disconnect();
+            }
+            
+            poolItem.source = this.audioContext.createBufferSource();
+            poolItem.source.buffer = buffer;
+            poolItem.source.connect(poolItem.gainNode);
+            poolItem.gainNode.connect(this.audioContext.destination);
+            poolItem.source.start(0);
+            poolItem.lastPlayed = now;
+        }
     }
 }
 
-// 사운드 초기화
-const sounds = {
-    bgm: new Audio('Music.wav'),
-    gunshot: new SoundPool('gun.wav', 20),
-    explosion: new SoundPool('explosion.wav', 10)
-};
-sounds.bgm.loop = true;
+// 사운드 시스템 초기화
+const soundSystem = new SoundSystem();
 
 // 이동 상태
 const moveState = {
@@ -80,9 +103,19 @@ const moveState = {
     right: false
 };
 
+async function initSounds() {
+    try {
+        await soundSystem.loadSound('gunshot', 'gun.wav');
+        await soundSystem.loadSound('explosion', 'explosion.wav');
+        console.log('All sounds loaded successfully');
+    } catch (error) {
+        console.error('Error initializing sounds:', error);
+    }
+}
+
 async function init() {
     console.log('Initializing game...');
-
+    
     // Scene 초기화
     scene = new THREE.Scene();
     scene.background = new THREE.Color(0x87ceeb);
@@ -122,21 +155,36 @@ async function init() {
     document.addEventListener('keyup', onKeyUp);
     window.addEventListener('resize', onWindowResize);
 
-    // 지형 생성
-    await createTerrain();
-    
-    // 적 로드
-    await loadEnemies();
+    try {
+        await initSounds();
+        await createTerrain();
+        await loadEnemies();
+        await testModelLoading();
+        
+        document.getElementById('loading').style.display = 'none';
+        console.log('Game initialized successfully');
+        console.log('Active enemies:', enemies.length);
+    } catch (error) {
+        console.error('Initialization error:', error);
+    }
+}
 
-    // 로딩 화면 제거
-    document.getElementById('loading').style.display = 'none';
 
-    console.log('Scene initialized');
-    console.log('Camera position:', camera.position);
-    console.log('Initialization complete');
+async function testModelLoading() {
+    const loader = new GLTFLoader();
+    const testPath = ENEMY_MODELS[0];
+    
+    try {
+        const gltf = await new Promise((resolve, reject) => {
+            loader.load(testPath, resolve, undefined, reject);
+        });
+        console.log('Test model loaded successfully:', gltf);
+    } catch (error) {
+        console.error('Test model loading failed:', error);
+        console.error('Test path was:', testPath);
+    }
 }
 
-
 function createTerrain() {
     return new Promise((resolve) => {
         const geometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 200, 200);
@@ -189,12 +237,12 @@ function addObstacles() {
     }
 }
 
-function loadEnemies() {
-    console.log('Loading enemies...');
+async function loadEnemies() {
+    console.log('Starting enemy loading...');
     const loader = new GLTFLoader();
     const enemyCount = 3 + currentStage;
+    const loadPromises = [];
 
-    // 임시 적 생성 (빨간 박스)
     for (let i = 0; i < enemyCount; i++) {
         const angle = (i / enemyCount) * Math.PI * 2;
         const radius = 200;
@@ -204,57 +252,72 @@ function loadEnemies() {
             Math.sin(angle) * radius
         );
 
-        console.log('Creating enemy at position:', position);
+        console.log(`Creating enemy ${i} at position:`, position);
 
         // 임시 적 생성
         const tempGeometry = new THREE.BoxGeometry(5, 5, 5);
-        const tempMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
+        const tempMaterial = new THREE.MeshPhongMaterial({ 
+            color: 0xff0000,
+            transparent: true,
+            opacity: 0.8
+        });
         const tempEnemy = new THREE.Mesh(tempGeometry, tempMaterial);
         tempEnemy.position.copy(position);
+        tempEnemy.castShadow = true;
+        tempEnemy.receiveShadow = true;
         scene.add(tempEnemy);
 
-        // enemies 배열에 추가
         const enemy = {
             model: tempEnemy,
             health: 100,
             speed: ENEMY_MOVE_SPEED,
-            lastAttackTime: 0
+            lastAttackTime: 0,
+            position: position.clone()
         };
         enemies.push(enemy);
 
-        // GLB 모델 로드 시도
+        // GLB 모델 로딩
         const modelPath = ENEMY_MODELS[i % ENEMY_MODELS.length];
-        console.log('Loading model:', modelPath);
-
-        loader.load(
-            modelPath,
-            (gltf) => {
-                console.log('Successfully loaded:', modelPath);
-                const model = gltf.scene;
-                model.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
-                model.position.copy(position);
-
-                model.traverse((node) => {
-                    if (node.isMesh) {
-                        node.castShadow = true;
-                        node.receiveShadow = true;
-                        node.material.metalness = 0.2;
-                        node.material.roughness = 0.8;
-                    }
-                });
-
-                // 임시 적을 실제 모델로 교체
-                scene.remove(tempEnemy);
-                scene.add(model);
-                enemy.model = model;
-            },
-            (xhr) => {
-                console.log(`${modelPath}: ${(xhr.loaded / xhr.total * 100)}% loaded`);
-            },
-            (error) => {
-                console.error('Error loading model:', modelPath, error);
-            }
-        );
+        const loadPromise = new Promise((resolve, reject) => {
+            loader.load(
+                modelPath,
+                (gltf) => {
+                    console.log(`Successfully loaded model: ${modelPath}`);
+                    const model = gltf.scene;
+                    model.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
+                    model.position.copy(position);
+
+                    model.traverse((node) => {
+                        if (node.isMesh) {
+                            node.castShadow = true;
+                            node.receiveShadow = true;
+                            node.material.metalness = 0.2;
+                            node.material.roughness = 0.8;
+                        }
+                    });
+
+                    scene.remove(tempEnemy);
+                    scene.add(model);
+                    enemy.model = model;
+                    resolve();
+                },
+                (xhr) => {
+                    console.log(`${modelPath}: ${(xhr.loaded / xhr.total * 100)}% loaded`);
+                },
+                (error) => {
+                    console.error(`Error loading model ${modelPath}:`, error);
+                    reject(error);
+                }
+            );
+        });
+        loadPromises.push(loadPromise);
+    }
+
+    try {
+        await Promise.all(loadPromises);
+        console.log('All enemies loaded successfully');
+    } catch (error) {
+        console.error('Error loading enemies:', error);
     }
 }
 
@@ -300,14 +363,15 @@ function createExplosion(position) {
     }
 
     animateExplosion();
-    sounds.explosion.play();
+    soundSystem.play('explosion');
 }
 
 // 이벤트 핸들러
 function onClick() {
     if (!controls.isLocked) {
         controls.lock();
-        sounds.bgm.play();
+        // 사운드 컨텍스트 시작 (많은 브라우저에서 필요)
+        soundSystem.audioContext.resume();
     } else if (ammo > 0) {
         shoot();
     }
@@ -338,7 +402,6 @@ function onWindowResize() {
     renderer.setSize(window.innerWidth, window.innerHeight);
 }
 
-// 게임 메커닉 함수들
 function shoot() {
     if (ammo <= 0) return;
     
@@ -348,7 +411,7 @@ function shoot() {
     const bullet = createBullet();
     bullets.push(bullet);
     
-    sounds.gunshot.play();
+    soundSystem.play('gunshot');
 }
 
 function createBullet() {
@@ -531,7 +594,10 @@ function updateEnemies() {
     const currentTime = Date.now();
     
     enemies.forEach(enemy => {
-        if (!enemy || !enemy.model) return;
+        if (!enemy || !enemy.model) {
+            console.warn('Invalid enemy detected');
+            return;
+        }
 
         // 적의 현재 위치에서 플레이어 방향으로 향하는 벡터 계산
         const direction = new THREE.Vector3();
@@ -579,7 +645,7 @@ function checkGameStatus() {
 function gameOver(won) {
     isGameOver = true;
     controls.unlock();
-    sounds.bgm.pause();
+    soundSystem.audioContext.suspend();
     alert(won ? 'Mission Complete!' : 'Game Over!');
     location.reload();
 }
@@ -612,5 +678,15 @@ window.addEventListener('load', async () => {
         gameLoop();
     } catch (error) {
         console.error('Game initialization error:', error);
+        alert('Error loading game. Please check console for details.');
     }
-});
+});
+
+// 디버깅을 위한 전역 접근
+window.debugGame = {
+    scene,
+    camera,
+    enemies,
+    soundSystem,
+    reloadEnemies: loadEnemies
+};