Spaces:

gunship999
/

Gunship-3D-FPS

Running

App Files Files Community

gini1 commited on 4 days ago

Commit

26e2815

•

1 Parent(s): bafb03c

Update index.html

Browse files

Files changed (1) hide show

index.html +242 -259

index.html CHANGED Viewed

@@ -7,6 +7,7 @@
         body {
             margin: 0;
             overflow: hidden;
         }
         #info {
             position: absolute;
@@ -100,15 +101,6 @@
             z-index: 100;
             border-radius: 5px;
         }
-        #debug {
-            position: absolute;
-            bottom: 60px;
-            left: 20px;
-            color: white;
-            font-family: Arial;
-            font-size: 12px;
-            z-index: 100;
-        }
     </style>
 </head>
 <body>
@@ -117,8 +109,7 @@
         WASD - Move Helicopter<br>
         Mouse - Aim<br>
         Left Click - Shoot<br>
-        R - Reload<br>
-        Survive 3 minutes!
     </div>
     <div id="timer">Safe Time: 10s</div>
     <div id="gameTimer">Time: 3:00</div>
@@ -126,9 +117,6 @@
     <div id="healthBar"><div id="health"></div></div>
     <div id="ammo">Ammo: 30/30</div>
     <div id="stage">Stage 1</div>
-    <div id="debug"></div>
-    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
     <script type="importmap">
         {
@@ -145,135 +133,86 @@
         import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
         // 게임 상수
-        const GAME_DURATION = 180; // 3분
-        const MAX_STAGES = 5;
-        const ENEMY_MODELS = ['1.GLB', '2.GLB', '3.GLB', '4.GLB'];
-        const HELICOPTER_HEIGHT = 50; // 증가된 헬기 높이
-        const ENEMY_SCALE = 3; // 증가된 적 크기
         const MAX_HEALTH = 1000;
-        const MAP_SIZE = 2000; // 증가된 맵 크기
         // 게임 변수
         let scene, camera, renderer, controls;
-        let enemies = [], bullets = [], enemyBullets = [];
-        let isGameOver = false;
-        let isSafePeriod = true;
-        let startTime = 0;
-        let gameStartTime = 0;
         let playerHealth = MAX_HEALTH;
         let ammo = 30;
         let currentStage = 1;
-        const maxAmmo = 30;
-        // 사운드 시스템
         const sounds = {
             bgm: new Audio('Music.wav'),
             gunshot: new Audio('gun.wav')
         };
         sounds.bgm.loop = true;
-        // Scene 초기화
-        function initScene() {
             scene = new THREE.Scene();
-            scene.background = new THREE.Color(0xffd700); // 사막 하늘색
-            scene.fog = new THREE.Fog(0xffd700, 0, 1500);
             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.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.5);
             scene.add(ambientLight);
-            const dirLight = new THREE.DirectionalLight(0xffffff, 2);
             dirLight.position.set(100, 100, 50);
             dirLight.castShadow = true;
-            dirLight.shadow.mapSize.width = 4096;
-            dirLight.shadow.mapSize.height = 4096;
-            dirLight.shadow.camera.far = 1000;
-            dirLight.shadow.camera.left = -500;
-            dirLight.shadow.camera.right = 500;
-            dirLight.shadow.camera.top = 500;
-            dirLight.shadow.camera.bottom = -500;
             scene.add(dirLight);
-            // 사막 햇빛 효과
-            const sunLight = new THREE.DirectionalLight(0xfdb813, 1);
-            sunLight.position.set(-100, 200, -100);
-            scene.add(sunLight);
-        }
-        // 디버그 정보 업데이트
-        function updateDebugInfo() {
-            const debugDiv = document.getElementById('debug');
-            debugDiv.innerHTML = `
-                Enemies: ${enemies.length}<br>
-                Stage: ${currentStage}<br>
-                Enemy Positions:<br>
-                ${enemies.map((e, i) =>
-                    `Enemy ${i}: x=${e.model.position.x.toFixed(1)},
-                     y=${e.model.position.y.toFixed(1)},
-                     z=${e.model.position.z.toFixed(1)}`
-                ).join('<br>')}
-            `;
-        }
-        // 총알 생성
-        function createBullet(isEnemy = false) {
-            const bulletGeometry = new THREE.SphereGeometry(0.5, 8, 8);
-            const bulletMaterial = new THREE.MeshBasicMaterial({
-                color: isEnemy ? 0xff0000 : 0xffff00,
-                emissive: isEnemy ? 0xff0000 : 0xffff00,
-                emissiveIntensity: 1
-            });
-            const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
-            if (!isEnemy) {
-                bullet.position.copy(camera.position);
-                const direction = new THREE.Vector3();
-                camera.getWorldDirection(direction);
-                bullet.velocity = direction.multiplyScalar(3);
-                sounds.gunshot.currentTime = 0;
-                sounds.gunshot.play();
-            }
-            scene.add(bullet);
-            return bullet;
-        }
-// 사막 지형 생성
         function createTerrain() {
-            // 사막 텍스처 생성
-            const textureLoader = new THREE.TextureLoader();
-            const sandTexture = textureLoader.load('https://threejs.org/examples/textures/terrain/grasslight-big.jpg');
-            sandTexture.wrapS = sandTexture.wrapT = THREE.RepeatWrapping;
-            sandTexture.repeat.set(25, 25);
             const geometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 200, 200);
             const material = new THREE.MeshStandardMaterial({
-                color: 0xd2b48c,
-                map: sandTexture,
                 roughness: 0.8,
-                metalness: 0.2,
-                bumpScale: 0.5,
             });
-            // 모래 언덕 생성
             const vertices = geometry.attributes.position.array;
             for (let i = 0; i < vertices.length; i += 3) {
-                const x = vertices[i];
-                const y = vertices[i + 1];
-                vertices[i + 2] = Math.sin(x * 0.01) * Math.cos(y * 0.01) * 20 +
-                                Math.random() * 5 +
-                                Math.sin(x * 0.02 + y * 0.02) * 10;
             }
             geometry.attributes.position.needsUpdate = true;
@@ -284,26 +223,23 @@
             terrain.receiveShadow = true;
             scene.add(terrain);
-            // 사막 바위 추가
-            addDesertRocks();
-            // 선인장 추가
-            addCacti();
         }
-        // 사막 바위 추가
-        function addDesertRocks() {
             const rockGeometry = new THREE.DodecahedronGeometry(10);
             const rockMaterial = new THREE.MeshStandardMaterial({
-                color: 0x8b4513,
-                roughness: 0.8,
-                metalness: 0.2
             });
-            for (let i = 0; i < 50; i++) {
                 const rock = new THREE.Mesh(rockGeometry, rockMaterial);
                 rock.position.set(
                     (Math.random() - 0.5) * MAP_SIZE * 0.9,
-                    Math.random() * 10 + 5,
                     (Math.random() - 0.5) * MAP_SIZE * 0.9
                 );
                 rock.rotation.set(
@@ -311,198 +247,245 @@
                     Math.random() * Math.PI,
                     Math.random() * Math.PI
                 );
-                rock.scale.set(
-                    Math.random() * 2 + 1,
-                    Math.random() * 2 + 1,
-                    Math.random() * 2 + 1
-                );
                 rock.castShadow = true;
                 rock.receiveShadow = true;
                 scene.add(rock);
             }
         }
-        // 선인장 추가
-        function addCacti() {
-            const trunkGeometry = new THREE.CylinderGeometry(2, 2, 15, 8);
-            const armGeometry = new THREE.CylinderGeometry(1.5, 1.5, 10, 8);
-            const cactusMaterial = new THREE.MeshStandardMaterial({
-                color: 0x2f4f2f,
-                roughness: 0.8
-            });
-            for (let i = 0; i < 100; i++) {
-                const cactusGroup = new THREE.Group();
-                // 몸통
-                const trunk = new THREE.Mesh(trunkGeometry, cactusMaterial);
-                cactusGroup.add(trunk);
-                // 팔 추가
-                const armsCount = Math.floor(Math.random() * 3) + 1;
-                for (let j = 0; j < armsCount; j++) {
-                    const arm = new THREE.Mesh(armGeometry, cactusMaterial);
-                    arm.position.y = Math.random() * 5;
-                    arm.rotation.z = Math.PI / 2 * (Math.random() > 0.5 ? 1 : -1);
-                    arm.position.x = (Math.random() > 0.5 ? 1 : -1) * 3;
-                    cactusGroup.add(arm);
-                }
-                cactusGroup.position.set(
-                    (Math.random() - 0.5) * MAP_SIZE * 0.9,
-                    7.5,
-                    (Math.random() - 0.5) * MAP_SIZE * 0.9
-                );
-                cactusGroup.castShadow = true;
-                cactusGroup.receiveShadow = true;
-                scene.add(cactusGroup);
-            }
-        }
-        // 적 로드
         function loadEnemies() {
-            console.log('Loading enemies...');
             const loader = new GLTFLoader();
-            const enemiesCount = 3 + currentStage;
-            for (let i = 0; i < enemiesCount; i++) {
                 const modelPath = ENEMY_MODELS[i % ENEMY_MODELS.length];
-                console.log(`Loading enemy model: ${modelPath}`);
                 loader.load(modelPath, (gltf) => {
                     const enemy = gltf.scene;
                     enemy.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
-                    // 랜덤 위치에 스폰하되, 플레이어로부터 최소 거리 유지
-                    let position = getRandomSpawnPosition();
-                    while (position.distanceTo(camera.position) < 100) {
-                        position = getRandomSpawnPosition();
-                    }
-                    enemy.position.copy(position);
-                    // 밝기 개선을 위한 재질 설정
                     enemy.traverse((node) => {
                         if (node.isMesh) {
-                            node.material = node.material.clone();
-                            node.material.metalness = 0.3;
-                            node.material.roughness = 0.5;
-                            node.material.emissive = new THREE.Color(0x666666);
-                            node.material.emissiveIntensity = 0.3;
                             node.castShadow = true;
                             node.receiveShadow = true;
                         }
                     });
                     scene.add(enemy);
                     enemies.push({
                         model: enemy,
                         health: 100,
-                        speed: 0.3 + (currentStage * 0.05),
-                        velocity: new THREE.Vector3(),
-                        lastShot: 0,
-                        moveTarget: new THREE.Vector3(),
-                        type: modelPath
                     });
-                    console.log(`Enemy loaded: ${modelPath}, Position:`, position);
-                    updateDebugInfo();
-                    updateMoveTarget(enemies[enemies.length - 1]);
-                },
-                (xhr) => {
-                    console.log(`${modelPath}: ${(xhr.loaded / xhr.total) * 100}% loaded`);
-                },
-                (error) => {
-                    console.error(`Error loading ${modelPath}:`, error);
                 });
             }
         }
-        // 랜덤 스폰 위치 생성
-        function getRandomSpawnPosition() {
-            const angle = Math.random() * Math.PI * 2;
-            const radius = Math.random() * (MAP_SIZE * 0.4) + 100;
-            return new THREE.Vector3(
-                Math.cos(angle) * radius,
-                10,
-                Math.sin(angle) * radius
-            );
         }
-        // 적의 새로운 이동 목표점 설정
-        function updateMoveTarget(enemy) {
-            const angle = Math.random() * Math.PI * 2;
-            const radius = Math.random() * (MAP_SIZE * 0.4);
-            enemy.moveTarget.set(
-                Math.cos(angle) * radius,
-                10,
-                Math.sin(angle) * radius
-            );
         }
-        // 적 업데이트
-        function updateEnemies() {
-            if (!isSafePeriod) {
-                enemies.forEach(enemy => {
-                    // AI 이동 로직
-                    const toTarget = new THREE.Vector3();
-                    toTarget.subVectors(enemy.moveTarget, enemy.model.position);
-                    if (toTarget.length() < 10) {
-                        updateMoveTarget(enemy);
-                    }
-                    // 플레이어 방향 가중치 계산
-                    const toPlayer = new THREE.Vector3();
-                    toPlayer.subVectors(camera.position, enemy.model.position);
-                    const distanceToPlayer = toPlayer.length();
-                    // 거리에 따른 가중치 조정
-                    const playerWeight = Math.min(1, 100 / distanceToPlayer);
-                    const direction = new THREE.Vector3();
-                    direction.addScaledVector(toTarget.normalize(), 1 - playerWeight);
-                    direction.addScaledVector(toPlayer.normalize(), playerWeight);
-                    direction.normalize();
-                    // 속도 및 위치 업데이트
-                    enemy.velocity.lerp(direction.multiplyScalar(enemy.speed), 0.05);
-                    enemy.model.position.add(enemy.velocity);
-                    // 적 회전
-                    enemy.model.lookAt(camera.position);
-                    // 발사 로직
-                    const now = Date.now();
-                    const baseInterval = 3000 - (currentStage * 300); // 기본 발사 간격
-                    const distanceModifier = Math.max(0.5, Math.min(1.5, distanceToPlayer / 100));
-                    const fireInterval = baseInterval * distanceModifier;
-                    if (now - enemy.lastShot > fireInterval) {
-                        enemyShoot(enemy);
-                        enemy.lastShot = now;
                     }
                 });
-                updateDebugInfo();
             }
         }
-        // 게임 오버 처리
-        function gameOver(won) {
-            if (!isGameOver) {
-                isGameOver = true;
-                controls.unlock();
-                sounds.bgm.pause();
-                setTimeout(() => {
-                    alert(won ? 'Mission Accomplished! You survived in the desert!' : 'Game Over! You were eliminated!');
-                    location.reload();
-                }, 100);
             }
         }
-        // 게임 초기화 및 시작
         init();
     </script>
 </body>
 </html>

         body {
             margin: 0;
             overflow: hidden;
+            background: #000;
         }
         #info {
             position: absolute;
             z-index: 100;
             border-radius: 5px;
         }
     </style>
 </head>
 <body>
         WASD - Move Helicopter<br>
         Mouse - Aim<br>
         Left Click - Shoot<br>
+        R - Reload
     </div>
     <div id="timer">Safe Time: 10s</div>
     <div id="gameTimer">Time: 3:00</div>
     <div id="healthBar"><div id="health"></div></div>
     <div id="ammo">Ammo: 30/30</div>
     <div id="stage">Stage 1</div>
     <script type="importmap">
         {
         import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
         // 게임 상수
+        const GAME_DURATION = 180;
+        const MAP_SIZE = 2000;
+        const HELICOPTER_HEIGHT = 50;
+        const ENEMY_SCALE = 3;
         const MAX_HEALTH = 1000;
+        const ENEMY_MODELS = ['1.GLB', '2.GLB', '3.GLB', '4.GLB'];
         // 게임 변수
         let scene, camera, renderer, controls;
+        let enemies = [];
+        let bullets = [];
+        let enemyBullets = [];
         let playerHealth = MAX_HEALTH;
         let ammo = 30;
         let currentStage = 1;
+        let isGameOver = false;
+        // 사운드
         const sounds = {
             bgm: new Audio('Music.wav'),
             gunshot: new Audio('gun.wav')
         };
         sounds.bgm.loop = true;
+        function init() {
+            // 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 설정
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.shadowMap.enabled = true;
             document.body.appendChild(renderer.domElement);
+            // 조명 설정
+            const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
             scene.add(ambientLight);
+            const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
             dirLight.position.set(100, 100, 50);
             dirLight.castShadow = true;
             scene.add(dirLight);
+            // 지형 생성
+            createTerrain();
+            // Controls 설정
+            controls = new PointerLockControls(camera, document.body);
+            // 이벤트 리스너
+            document.addEventListener('click', onClick);
+            document.addEventListener('keydown', onKeyDown);
+            document.addEventListener('keyup', onKeyUp);
+            // 적 로드
+            loadEnemies();
+            // 애니메이션 시작
+            animate();
+        }
         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
             });
+            // 지형 높낮이 설정
             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;
             terrain.receiveShadow = true;
             scene.add(terrain);
+            // 장애물 추가
+            addObstacles();
         }
+        function addObstacles() {
+            // 바위 생성
             const rockGeometry = new THREE.DodecahedronGeometry(10);
             const rockMaterial = new THREE.MeshStandardMaterial({
+                color: 0x8B4513,
+                roughness: 0.9
             });
+            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
                 );
                 rock.castShadow = true;
                 rock.receiveShadow = true;
                 scene.add(rock);
             }
         }
         function loadEnemies() {
             const loader = new GLTFLoader();
+            const enemyCount = 3 + currentStage;
+            for (let i = 0; i < enemyCount; i++) {
                 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);
+                    // 랜덤 위치에 배치
+                    const angle = (i / enemyCount) * Math.PI * 2;
+                    const radius = 200;
+                    enemy.position.set(
+                        Math.cos(angle) * radius,
+                        10,
+                        Math.sin(angle) * radius
+                    );
                     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: 0.3 + (currentStage * 0.1)
                     });
                 });
             }
         }
+        function onClick() {
+            if (!controls.isLocked) {
+                controls.lock();
+                sounds.bgm.play();
+            } else if (ammo > 0) {
+                shoot();
+            }
         }
+        function onKeyDown(event) {
+            switch (event.code) {
+                case 'KeyR':
+                    reload();
+                    break;
+            }
         }
+        function onKeyUp(event) {
+            // 키 해제 처리
+        }
+        function shoot() {
+            if (ammo <= 0) return;
+            ammo--;
+            updateAmmoDisplay();
+            const bullet = createBullet();
+            bullets.push(bullet);
+            sounds.gunshot.currentTime = 0;
+            sounds.gunshot.play();
+        }
+        function createBullet() {
+            const bulletGeometry = new THREE.SphereGeometry(0.5);
+            const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
+            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 animate() {
+            requestAnimationFrame(animate);
+            if (controls.isLocked && !isGameOver) {
+                updateBullets();
+                updateEnemies();
+                checkGameStatus();
+            }
+            renderer.render(scene, camera);
+        }
+        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;
+                        if (enemy.health <= 0) {
+                            scene.remove(enemy.model);
+                            enemies = enemies.filter(e => e !== enemy);
+                        }
                     }
                 });
+                // 범위 벗어난 총알 제거
+                if (bullets[i] && bullets[i].position.distanceTo(camera.position) > 1000) {
+                    scene.remove(bullets[i]);
+                    bullets.splice(i, 1);
+                }
             }
         }
+        function updateEnemies() {
+            enemies.forEach(enemy => {
+                const direction = new THREE.Vector3();
+                direction.subVectors(camera.position, enemy.model.position);
+                direction.normalize();
+                enemy.model.position.add(direction.multiplyScalar(enemy.speed));
+                enemy.model.lookAt(camera.position);
+                // 플레이어와의 충돌 체크
+                if (enemy.model.position.distanceTo(camera.position) < 10) {
+                    gameOver(false);
+                }
+            });
+        }
+        function checkGameStatus() {
+            if (enemies.length === 0 && currentStage < 5) {
+                currentStage++;
+                loadEnemies();
             }
         }
+        function gameOver(won) {
+            isGameOver = true;
+            controls.unlock();
+            sounds.bgm.pause();
+            alert(won ? 'Mission Complete!' : 'Game Over!');
+            location.reload();
+        }
+        // 화면 크기 조절 처리
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        // 게임 시작
         init();
+        // 마우스 이동 속도 제어
+        const moveState = {
+            forward: false,
+            backward: false,
+            left: false,
+            right: false
+        };
+        // 키보드 이벤트
+        document.addEventListener('keydown', (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;
+            }
+        });
+        document.addEventListener('keyup', (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 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);
+            }
+        }
+        // 메인 게임 루프에 이동 업데이트 추가
+        let lastTime = performance.now();
+        function gameLoop() {
+            const time = performance.now();
+            const delta = (time - lastTime) / 1000;
+            lastTime = time;
+            if (controls.isLocked && !isGameOver) {
+                updateMovement();
+                updateBullets();
+                updateEnemies();
+                checkGameStatus();
+            }
+            renderer.render(scene, camera);
+            requestAnimationFrame(gameLoop);
+        }
+        gameLoop();
     </script>
 </body>
 </html>