3D-Airforce-Simulator

Running

App Files Files Community

cutechicken commited on Jul 4

Commit

cfe5b2c

verified ·

1 Parent(s): 91d385a

Rename index.js to game.js

Browse files

Files changed (2) hide show

game.js +972 -0
index.js +0 -76

game.js ADDED Viewed

	@@ -0,0 +1,972 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JET FIGHT SIMULATER</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            font-family: 'Courier New', monospace;
+            background: #000;
+            cursor: none;
+        }
+        #gameContainer {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+        }
+        /* HUD 스타일 */
+        .hud {
+            position: absolute;
+            color: #00ff00;
+            font-family: 'Courier New', monospace;
+            z-index: 1000;
+            text-shadow: 0 0 10px #00ff00;
+        }
+        #startScreen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(45deg, #001122, #003366);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 10000;
+            color: #00ffff;
+            text-align: center;
+        }
+        #startScreen h1 {
+            font-size: 4rem;
+            margin-bottom: 2rem;
+            text-shadow: 0 0 20px #00ffff;
+        }
+        #startButton {
+            font-size: 2rem;
+            padding: 1rem 2rem;
+            background: transparent;
+            border: 2px solid #00ffff;
+            color: #00ffff;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        #startButton:hover {
+            background: #00ffff;
+            color: #001122;
+            box-shadow: 0 0 20px #00ffff;
+        }
+        #loading {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #00ff00;
+            font-size: 2rem;
+            z-index: 9999;
+            display: none;
+        }
+        /* 속도계 */
+        #speedometer {
+            position: absolute;
+            bottom: 50px;
+            left: 50px;
+            width: 150px;
+            height: 150px;
+            border: 2px solid #00ff00;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(0, 0, 0, 0.5);
+        }
+        #speedValue {
+            font-size: 1.5rem;
+            color: #00ff00;
+        }
+        /* 고도계 */
+        #altimeter {
+            position: absolute;
+            bottom: 50px;
+            right: 50px;
+            width: 150px;
+            height: 150px;
+            border: 2px solid #00ff00;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(0, 0, 0, 0.5);
+        }
+        #altitudeValue {
+            font-size: 1.5rem;
+            color: #00ff00;
+        }
+        /* 크로스헤어 */
+        #crosshair {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 40px;
+            height: 40px;
+            border: 2px solid #00ff00;
+            border-radius: 50%;
+            z-index: 1001;
+            pointer-events: none;
+        }
+        #crosshair::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 2px;
+            height: 20px;
+            background: #00ff00;
+        }
+        #crosshair::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 20px;
+            height: 2px;
+            background: #00ff00;
+        }
+        .target-detected {
+            border-color: #ff0000 !important;
+            box-shadow: 0 0 20px #ff0000;
+        }
+        .target-detected::before,
+        .target-detected::after {
+            background: #ff0000 !important;
+        }
+        /* 스로틀 게이지 */
+        #throttleGauge {
+            position: absolute;
+            left: 30px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 30px;
+            height: 200px;
+            border: 2px solid #00ff00;
+            background: rgba(0, 0, 0, 0.5);
+        }
+        #throttleBar {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            background: #00ff00;
+            transition: height 0.1s;
+        }
+        /* 상태 정보 */
+        #statusInfo {
+            position: absolute;
+            top: 30px;
+            left: 30px;
+            color: #00ff00;
+            font-size: 1.2rem;
+            line-height: 1.5;
+        }
+        /* 레이더 */
+        #radar {
+            position: absolute;
+            top: 50px;
+            right: 200px;
+            width: 120px;
+            height: 120px;
+            border: 2px solid #00ff00;
+            border-radius: 50%;
+            background: rgba(0, 20, 0, 0.3);
+            overflow: hidden;
+        }
+        .enemy-dot {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background: #ff0000;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+        }
+        /* 무기 정보 */
+        #weaponInfo {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #00ff00;
+            font-size: 1.2rem;
+            text-align: center;
+        }
+        /* G-Force 표시 */
+        #gForce {
+            position: absolute;
+            top: 30px;
+            right: 30px;
+            color: #ffff00;
+            font-size: 1.5rem;
+        }
+    </style>
+</head>
+<body>
+    <!-- 시작 화면 -->
+    <div id="startScreen">
+        <h1>FIGHTER ACE</h1>
+        <p>공중전 시뮬레이터</p>
+        <button id="startButton" onclick="startGame()">TAKE OFF</button>
+        <div style="margin-top: 2rem; font-size: 1rem;">
+            <p>MOUSE: CONTROL | WASD: THROTLE/RUDER | CLICK: FIRE</p>
+        </div>
+    </div>
+    <!-- 로딩 화면 -->
+    <div id="loading">
+        <div class="loading-text">LOADING...</div>
+    </div>
+    <!-- 게임 컨테이너 -->
+    <div id="gameContainer">
+        <!-- HUD 요소들 -->
+        <div id="crosshair"></div>
+        <div id="speedometer" class="hud">
+            <div id="speedValue">0 KT</div>
+        </div>
+        <div id="altimeter" class="hud">
+            <div id="altitudeValue">0 FT</div>
+        </div>
+        <div id="throttleGauge" class="hud">
+            <div id="throttleBar" style="height: 0%;"></div>
+        </div>
+        <div id="statusInfo" class="hud">
+            <div>Mission Time: <span id="missionTime">00:00</span></div>
+            <div>Targets: <span id="targetCount">0</span></div>
+            <div>Score: <span id="score">0</span></div>
+        </div>
+        <div id="radar" class="hud"></div>
+        <div id="weaponInfo" class="hud">
+            <div>Missiles: <span id="missileCount">4</span></div>
+            <div>Ammo: <span id="ammoCount">200</span></div>
+        </div>
+        <div id="gForce" class="hud">
+            G: <span id="gValue">1.0</span>
+        </div>
+    </div>
+    <script type="module">
+        import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
+        import { GLTFLoader } from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js';
+        // 게임 상수
+        const GAME_CONSTANTS = {
+            MISSION_DURATION: 300, // 5분
+            MAP_SIZE: 10000,
+            MAX_ALTITUDE: 8000,
+            MIN_ALTITUDE: 100,
+            MAX_SPEED: 500,
+            STALL_SPEED: 80,
+            GRAVITY: 9.8,
+            AIR_DENSITY: 1.225,
+            MOUSE_SENSITIVITY: 0.002,
+            MAX_G_FORCE: 9.0
+        };
+        // 전투기 클래스
+        class Fighter {
+            constructor() {
+                this.mesh = null;
+                this.isLoaded = false;
+                // 물리 속성
+                this.position = new THREE.Vector3(0, 1000, 0);
+                this.velocity = new THREE.Vector3(0, 0, 0);
+                this.acceleration = new THREE.Vector3(0, 0, 0);
+                this.rotation = new THREE.Euler(0, 0, 0);
+                this.angularVelocity = new THREE.Vector3(0, 0, 0);
+                // 비행 속성
+                this.throttle = 0.3; // 0-1
+                this.speed = 0;
+                this.altitude = 1000;
+                this.gForce = 1.0;
+                this.stallWarning = false;
+                // 마우스 입력
+                this.mouseInput = { x: 0, y: 0 };
+                this.targetPitch = 0;
+                this.targetYaw = 0;
+                this.targetRoll = 0;
+                // 무기
+                this.missiles = 4;
+                this.ammo = 200;
+                this.bullets = [];
+                // 카메라 오프셋
+                this.cameraOffset = new THREE.Vector3(0, 3, -15);
+            }
+            async initialize(scene, loader) {
+                try {
+                    const result = await loader.loadAsync('/models/f-15.glb');
+                    this.mesh = result.scene;
+                    this.mesh.position.copy(this.position);
+                    this.mesh.scale.set(1, 1, 1);
+                    // 그림자 설정
+                    this.mesh.traverse((child) => {
+                        if (child.isMesh) {
+                            child.castShadow = true;
+                            child.receiveShadow = true;
+                        }
+                    });
+                    scene.add(this.mesh);
+                    this.isLoaded = true;
+                } catch (error) {
+                    console.error('전투기 모델 로딩 실패:', error);
+                    this.isLoaded = false;
+                }
+            }
+            updateMouseInput(deltaX, deltaY) {
+                // 마우스 움직임을 조종간 입력으로 변환
+                this.mouseInput.x += deltaX * GAME_CONSTANTS.MOUSE_SENSITIVITY;
+                this.mouseInput.y += deltaY * GAME_CONSTANTS.MOUSE_SENSITIVITY;
+                // 제한
+                this.mouseInput.x = Math.max(-1, Math.min(1, this.mouseInput.x));
+                this.mouseInput.y = Math.max(-1, Math.min(1, this.mouseInput.y));
+            }
+            updateControls(keys, deltaTime) {
+                // 스로틀 조절 (W/S)
+                if (keys.w) this.throttle = Math.min(1, this.throttle + deltaTime * 0.5);
+                if (keys.s) this.throttle = Math.max(0, this.throttle - deltaTime * 0.5);
+                // 러더 (A/D)
+                let rudderInput = 0;
+                if (keys.a) rudderInput = -1;
+                if (keys.d) rudderInput = 1;
+                // 목표 회전각 계산
+                this.targetPitch = -this.mouseInput.y * Math.PI / 6; // ±30도
+                this.targetYaw += rudderInput * deltaTime * 2; // 러더
+                this.targetRoll = -this.mouseInput.x * Math.PI / 4; // ±45도
+                // 마우스 입력 감쇠
+                this.mouseInput.x *= 0.95;
+                this.mouseInput.y *= 0.95;
+            }
+            updatePhysics(deltaTime) {
+                if (!this.mesh) return;
+                // 현재 회전을 목표 회전으로 부드럽게 이동
+                const lerpFactor = deltaTime * 2;
+                this.rotation.x = THREE.MathUtils.lerp(this.rotation.x, this.targetPitch, lerpFactor);
+                this.rotation.y = THREE.MathUtils.lerp(this.rotation.y, this.targetYaw, lerpFactor);
+                this.rotation.z = THREE.MathUtils.lerp(this.rotation.z, this.targetRoll, lerpFactor);
+                // 엔진 추력 계산
+                const thrust = this.throttle * 50000; // 뉴턴
+                const mass = 20000; // kg
+                // 전진 방향 벡터
+                const forward = new THREE.Vector3(0, 0, 1);
+                forward.applyEuler(this.rotation);
+                // 추력 가속도
+                const thrustAccel = forward.multiplyScalar(thrust / mass);
+                // 중력
+                const gravity = new THREE.Vector3(0, -GAME_CONSTANTS.GRAVITY, 0);
+                // 항력 (단순화)
+                const drag = this.velocity.clone().multiplyScalar(-0.1 * this.velocity.length());
+                // 총 가속도
+                this.acceleration = thrustAccel.add(gravity).add(drag);
+                // 속도 업데이트
+                this.velocity.add(this.acceleration.clone().multiplyScalar(deltaTime));
+                // 위치 업데이트
+                this.position.add(this.velocity.clone().multiplyScalar(deltaTime));
+                // 고도 제한
+                if (this.position.y < GAME_CONSTANTS.MIN_ALTITUDE) {
+                    this.position.y = GAME_CONSTANTS.MIN_ALTITUDE;
+                    this.velocity.y = Math.max(0, this.velocity.y);
+                }
+                // G-Force 계산
+                const acceleration_magnitude = this.acceleration.length();
+                this.gForce = acceleration_magnitude / GAME_CONSTANTS.실제 중력;
+                // 메시 위치와 회전 업데이트
+                this.mesh.position.copy(this.position);
+                this.mesh.rotation.copy(this.rotation);
+                // 속도와 고도 계산
+                this.speed = this.velocity.length() * 1.94384; // m/s to knots
+                this.altitude = this.position.y * 3.28084; // m to feet
+                // 실속 경고
+                this.stallWarning = this.speed < GAME_CONSTANTS.STALL_SPEED;
+            }
+            shoot(scene) {
+                if (this.ammo <= 0) return;
+                this.ammo--;
+                // 총알 생성
+                const bulletGeometry = new THREE.SphereGeometry(0.1);
+                const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
+                const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
+                // 총구 위치 계산
+                const muzzleOffset = new THREE.Vector3(0, 0, 5);
+                muzzleOffset.applyEuler(this.rotation);
+                bullet.position.copy(this.position).add(muzzleOffset);
+                // 총알 속도
+                const bulletSpeed = 1000; // m/s
+                const direction = new THREE.Vector3(0, 0, 1);
+                direction.applyEuler(this.rotation);
+                bullet.velocity = direction.multiplyScalar(bulletSpeed).add(this.velocity);
+                scene.add(bullet);
+                this.bullets.push(bullet);
+                // 발사 사운드 (예시)
+                // const audio = new Audio('sounds/gunfire.ogg');
+                // audio.play();
+            }
+            updateBullets(scene, deltaTime) {
+                for (let i = this.bullets.length - 1; i >= 0; i--) {
+                    const bullet = this.bullets[i];
+                    bullet.position.add(bullet.velocity.clone().multiplyScalar(deltaTime));
+                    // 총알 제거 조건
+                    if (bullet.position.distanceTo(this.position) > 5000 || bullet.position.y < 0) {
+                        scene.remove(bullet);
+                        this.bullets.splice(i, 1);
+                    }
+                }
+            }
+            getCameraPosition() {
+                // 전투기 뒤쪽 카메라 위치 계산
+                const offset = this.cameraOffset.clone();
+                offset.applyEuler(this.rotation);
+                return this.position.clone().add(offset);
+            }
+            getCameraTarget() {
+                // 카메라가 바라볼 위치 (전투기 약간 앞)
+                const target = new THREE.Vector3(0, 0, 5);
+                target.applyEuler(this.rotation);
+                return this.position.clone().add(target);
+            }
+        }
+        // 적 전투기 클래스
+        class EnemyFighter {
+            constructor(scene, position) {
+                this.mesh = null;
+                this.isLoaded = false;
+                this.scene = scene;
+                this.position = position.clone();
+                this.velocity = new THREE.Vector3(0, 0, 0);
+                this.rotation = new THREE.Euler(0, 0, 0);
+                this.health = 100;
+                this.speed = 200; // knots
+                this.bullets = [];
+                this.lastShootTime = 0;
+                // AI 상태
+                this.aiState = 'patrol';
+                this.target = null;
+                this.lastStateChange = 0;
+            }
+            async initialize(loader) {
+                try {
+                    const result = await loader.loadAsync('/models/mig-29.glb');
+                    this.mesh = result.scene;
+                    this.mesh.position.copy(this.position);
+                    this.mesh.scale.set(1, 1, 1);
+                    this.mesh.traverse((child) => {
+                        if (child.isMesh) {
+                            child.castShadow = true;
+                            child.receiveShadow = true;
+                        }
+                    });
+                    this.scene.add(this.mesh);
+                    this.isLoaded = true;
+                } catch (error) {
+                    console.error('적 전투기 모델 로딩 실패:', error);
+                    this.isLoaded = false;
+                }
+            }
+            update(playerPosition, deltaTime) {
+                if (!this.mesh || !this.isLoaded) return;
+                // 간단한 AI 로직
+                const distanceToPlayer = this.position.distanceTo(playerPosition);
+                if (distanceToPlayer < 2000) {
+                    // 플레이어 추적
+                    const direction = new THREE.Vector3()
+                        .subVectors(playerPosition, this.position)
+                        .normalize();
+                    this.velocity.copy(direction).multiplyScalar(this.speed * 0.5144); // knots to m/s
+                    // 회전 계산
+                    this.rotation.y = Math.atan2(direction.x, direction.z);
+                    this.rotation.x = Math.atan2(-direction.y, Math.sqrt(direction.x * direction.x + direction.z * direction.z));
+                }
+                // 위치 업데이트
+                this.position.add(this.velocity.clone().multiplyScalar(deltaTime));
+                this.mesh.position.copy(this.position);
+                this.mesh.rotation.copy(this.rotation);
+                // 공격
+                if (distanceToPlayer < 1000 && Date.now() - this.lastShootTime > 2000) {
+                    this.shoot();
+                }
+                // 총알 업데이트
+                this.updateBullets(deltaTime);
+            }
+            shoot() {
+                this.lastShootTime = Date.now();
+                const bulletGeometry = new THREE.SphereGeometry(0.1);
+                const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
+                const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
+                const muzzleOffset = new THREE.Vector3(0, 0, 3);
+                muzzleOffset.applyEuler(this.rotation);
+                bullet.position.copy(this.position).add(muzzleOffset);
+                const direction = new THREE.Vector3(0, 0, 1);
+                direction.applyEuler(this.rotation);
+                bullet.velocity = direction.multiplyScalar(800);
+                this.scene.add(bullet);
+                this.bullets.push(bullet);
+            }
+            updateBullets(deltaTime) {
+                for (let i = this.bullets.length - 1; i >= 0; i--) {
+                    const bullet = this.bullets[i];
+                    bullet.position.add(bullet.velocity.clone().multiplyScalar(deltaTime));
+                    if (bullet.position.distanceTo(this.position) > 3000 || bullet.position.y < 0) {
+                        this.scene.remove(bullet);
+                        this.bullets.splice(i, 1);
+                    }
+                }
+            }
+            takeDamage(damage) {
+                this.health -= damage;
+                return this.health <= 0;
+            }
+            destroy() {
+                if (this.mesh) {
+                    this.scene.remove(this.mesh);
+                    this.bullets.forEach(bullet => this.scene.remove(bullet));
+                    this.bullets = [];
+                    this.isLoaded = false;
+                }
+            }
+        }
+        // 게임 클래스
+        class Game {
+            constructor() {
+                this.scene = new THREE.Scene();
+                this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 20000);
+                this.renderer = new THREE.WebGLRenderer({ antialias: true });
+                this.renderer.setSize(window.innerWidth, window.innerHeight);
+                this.renderer.shadowMap.enabled = true;
+                this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+                document.getElementById('gameContainer').appendChild(this.renderer.domElement);
+                this.loader = new GLTFLoader();
+                this.fighter = new Fighter();
+                this.enemies = [];
+                this.isLoaded = false;
+                this.isGameOver = false;
+                this.missionTime = 0;
+                this.score = 0;
+                this.lastTime = performance.now();
+                // 입력 상태
+                this.keys = { w: false, a: false, s: false, d: false };
+                this.mouse = { x: 0, y: 0 };
+                this.setupEventListeners();
+            }
+            async initialize() {
+                try {
+                    document.getElementById('loading').style.display = 'block';
+                    // 씬 설정
+                    this.setupScene();
+                    // 전투기 초기화
+                    await this.fighter.initialize(this.scene, this.loader);
+                    if (!this.fighter.isLoaded) {
+                        throw new Error('전투기 로딩 실패');
+                    }
+                    // 적 생성
+                    this.spawnEnemies();
+                    this.isLoaded = true;
+                    document.getElementById('loading').style.display = 'none';
+                    // 게임 시작
+                    this.animate();
+                    this.startMissionTimer();
+                } catch (error) {
+                    console.error('게임 초기화 실패:', error);
+                    this.handleLoadingError();
+                }
+            }
+            setupScene() {
+                // 하늘 그라데이션
+                this.scene.background = new THREE.Color(0x87CEEB);
+                // 안개
+                this.scene.fog = new THREE.Fog(0x87CEEB, 1000, 15000);
+                // 조명
+                const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+                this.scene.add(ambientLight);
+                const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
+                directionalLight.position.set(1000, 2000, 1000);
+                directionalLight.castShadow = true;
+                directionalLight.shadow.mapSize.width = 2048;
+                directionalLight.shadow.mapSize.height = 2048;
+                directionalLight.shadow.camera.near = 0.5;
+                directionalLight.shadow.camera.far = 10000;
+                directionalLight.shadow.camera.left = -5000;
+                directionalLight.shadow.camera.right = 5000;
+                directionalLight.shadow.camera.top = 5000;
+                directionalLight.shadow.camera.bottom = -5000;
+                this.scene.add(directionalLight);
+                // 지형 (간단한 평면)
+                const groundGeometry = new THREE.PlaneGeometry(20000, 20000);
+                const groundMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 });
+                const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+                ground.rotation.x = -Math.PI / 2;
+                ground.receiveShadow = true;
+                this.scene.add(ground);
+                // 구름 (간단한 예시)
+                this.addClouds();
+            }
+            addClouds() {
+                const cloudGeometry = new THREE.SphereGeometry(100, 8, 6);
+                const cloudMaterial = new THREE.MeshLambertMaterial({
+                    color: 0xffffff,
+                    transparent: true,
+                    opacity: 0.7
+                });
+                for (let i = 0; i < 50; i++) {
+                    const cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
+                    cloud.position.set(
+                        (Math.random() - 0.5) * 10000,
+                        Math.random() * 2000 + 500,
+                        (Math.random() - 0.5) * 10000
+                    );
+                    cloud.scale.set(
+                        Math.random() * 2 + 1,
+                        Math.random() * 2 + 1,
+                        Math.random() * 2 + 1
+                    );
+                    this.scene.add(cloud);
+                }
+            }
+            spawnEnemies() {
+                for (let i = 0; i < 3; i++) {
+                    const position = new THREE.Vector3(
+                        (Math.random() - 0.5) * 5000,
+                        Math.random() * 2000 + 1000,
+                        (Math.random() - 0.5) * 5000
+                    );
+                    const enemy = new EnemyFighter(this.scene, position);
+                    enemy.initialize(this.loader);
+                    this.enemies.push(enemy);
+                }
+            }
+            setupEventListeners() {
+                // 키보드 이벤트
+                document.addEventListener('keydown', (event) => {
+                    if (this.isGameOver) return;
+                    switch(event.code) {
+                        case 'KeyW': this.keys.w = true; break;
+                        case 'KeyA': this.keys.a = true; break;
+                        case 'KeyS': this.keys.s = true; break;
+                        case 'KeyD': this.keys.d = true; break;
+                    }
+                });
+                document.addEventListener('keyup', (event) => {
+                    switch(event.code) {
+                        case 'KeyW': this.keys.w = false; break;
+                        case 'KeyA': this.keys.a = false; break;
+                        case 'KeyS': this.keys.s = false; break;
+                        case 'KeyD': this.keys.d = false; break;
+                    }
+                });
+                // 마우스 이벤트
+                document.addEventListener('mousemove', (event) => {
+                    if (!document.pointerLockElement || this.isGameOver) return;
+                    const deltaX = event.movementX || 0;
+                    const deltaY = event.movementY || 0;
+                    this.fighter.updateMouseInput(deltaX, deltaY);
+                });
+                document.addEventListener('click', () => {
+                    if (!document.pointerLockElement) {
+                        document.body.requestPointerLock();
+                    } else if (!this.isGameOver && this.fighter.isLoaded) {
+                        this.fighter.shoot(this.scene);
+                    }
+                });
+                // 윈도우 리사이즈
+                window.addEventListener('resize', () => {
+                    this.camera.aspect = window.innerWidth / window.innerHeight;
+                    this.camera.updateProjectionMatrix();
+                    this.renderer.setSize(window.innerWidth, window.innerHeight);
+                });
+            }
+            startMissionTimer() {
+                setInterval(() => {
+                    if (!this.isGameOver) {
+                        this.missionTime++;
+                        const minutes = Math.floor(this.missionTime / 60);
+                        const seconds = this.missionTime % 60;
+                        document.getElementById('missionTime').textContent =
+                            `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+                    }
+                }, 1000);
+            }
+            updateUI() {
+                if (this.fighter.isLoaded) {
+                    document.getElementById('speedValue').textContent = `${Math.round(this.fighter.speed)} KT`;
+                    document.getElementById('altitudeValue').textContent = `${Math.round(this.fighter.altitude)} FT`;
+                    document.getElementById('throttleBar').style.height = `${this.fighter.throttle * 100}%`;
+                    document.getElementById('gValue').textContent = this.fighter.gForce.toFixed(1);
+                    document.getElementById('ammoCount').textContent = this.fighter.ammo;
+                    document.getElementById('missileCount').textContent = this.fighter.missiles;
+                }
+                document.getElementById('targetCount').textContent = this.enemies.length;
+                document.getElementById('score').textContent = this.score;
+            }
+            checkCollisions() {
+                // 플레이어 총알과 적 충돌
+                for (let i = this.fighter.bullets.length - 1; i >= 0; i--) {
+                    const bullet = this.fighter.bullets[i];
+                    for (let j = this.enemies.length - 1; j >= 0; j--) {
+                        const enemy = this.enemies[j];
+                        if (!enemy.mesh || !enemy.isLoaded) continue;
+                        const distance = bullet.position.distanceTo(enemy.position);
+                        if (distance < 10) {
+                            // 명중!
+                            this.scene.remove(bullet);
+                            this.fighter.bullets.splice(i, 1);
+                            if (enemy.takeDamage(25)) {
+                                enemy.destroy();
+                                this.enemies.splice(j, 1);
+                                this.score += 100;
+                            }
+                            break;
+                        }
+                    }
+                }
+                // 적 총알과 플레이어 충돌
+                this.enemies.forEach(enemy => {
+                    enemy.bullets.forEach((bullet, index) => {
+                        const distance = bullet.position.distanceTo(this.fighter.position);
+                        if (distance < 15) {
+                            // 피격!
+                            this.scene.remove(bullet);
+                            enemy.bullets.splice(index, 1);
+                            this.endGame(false);
+                        }
+                    });
+                });
+            }
+            animate() {
+                if (this.isGameOver) return;
+                requestAnimationFrame(() => this.animate());
+                const currentTime = performance.now();
+                const deltaTime = Math.min((currentTime - this.lastTime) / 1000, 0.1);
+                this.lastTime = currentTime;
+                if (this.isLoaded && this.fighter.isLoaded) {
+                    // 전투기 업데이트
+                    this.fighter.updateControls(this.keys, deltaTime);
+                    this.fighter.updatePhysics(deltaTime);
+                    this.fighter.updateBullets(this.scene, deltaTime);
+                    // 카메라 업데이트
+                    const cameraPos = this.fighter.getCameraPosition();
+                    const cameraTarget = this.fighter.getCameraTarget();
+                    this.camera.position.copy(cameraPos);
+                    this.camera.lookAt(cameraTarget);
+                    // 적 업데이트
+                    this.enemies.forEach(enemy => {
+                        enemy.update(this.fighter.position, deltaTime);
+                    });
+                    // 충돌 검사
+                    this.checkCollisions();
+                    // UI 업데이트
+                    this.updateUI();
+                    // 승리 조건 확인
+                    if (this.enemies.length === 0) {
+                        this.endGame(true);
+                    }
+                }
+                this.renderer.render(this.scene, this.camera);
+            }
+            endGame(victory = false) {
+                this.isGameOver = true;
+                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 = victory ? '#00ff00' : '#ff0000';
+                gameOverDiv.style.fontSize = '48px';
+                gameOverDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+                gameOverDiv.style.padding = '20px';
+                gameOverDiv.style.borderRadius = '10px';
+                gameOverDiv.style.textAlign = 'center';
+                gameOverDiv.style.zIndex = '10000';
+                gameOverDiv.innerHTML = `
+                    ${victory ? 'MISSION ACCOMPLISHED!' : 'SHOT DOWN!'}<br>
+                    Score: ${this.score}<br>
+                    Mission Time: ${Math.floor(this.missionTime / 60)}:${(this.missionTime % 60).toString().padStart(2, '0')}<br>
+                    <button onclick="location.reload()"
+                            style="font-size: 24px; padding: 10px; margin-top: 20px;
+                                   cursor: pointer; background: #00ff00; border: none;
+                                   color: black; border-radius: 5px;">
+                        New Mission
+                    </button>
+                `;
+                document.body.appendChild(gameOverDiv);
+                document.exitPointerLock();
+            }
+            handleLoadingError() {
+                document.getElementById('loading').innerHTML =
+                    '<div style="color: red;">로딩 실패. 페이지를 새로고침해 주세요.</div>';
+            }
+        }
+        // 게임 시작 함수
+        window.startGame = function() {
+            document.getElementById('startScreen').style.display = 'none';
+            document.body.requestPointerLock();
+            if (!window.gameInstance) {
+                window.gameInstance = new Game();
+            }
+            window.gameInstance.initialize();
+        };
+        // 게임 인스턴스 초기화
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('전투기 시뮬레이터 준비 완료');
+        });
+    </script>
+</body>
+</html>

index.js DELETED Viewed

@@ -1,76 +0,0 @@
-import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]';
-// Reference the elements that we will need
-const status = document.getElementById('status');
-const fileUpload = document.getElementById('upload');
-const imageContainer = document.getElementById('container');
-const example = document.getElementById('example');
-const EXAMPLE_URL = 'https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/city-streets.jpg';
-// Create a new object detection pipeline
-status.textContent = 'Loading model...';
-const detector = await pipeline('object-detection', 'Xenova/detr-resnet-50');
-status.textContent = 'Ready';
-example.addEventListener('click', (e) => {
-    e.preventDefault();
-    detect(EXAMPLE_URL);
-});
-fileUpload.addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    if (!file) {
-        return;
-    }
-    const reader = new FileReader();
-    // Set up a callback when the file is loaded
-    reader.onload = e2 => detect(e2.target.result);
-    reader.readAsDataURL(file);
-});
-// Detect objects in the image
-async function detect(img) {
-    imageContainer.innerHTML = '';
-    imageContainer.style.backgroundImage = `url(${img})`;
-    status.textContent = 'Analysing...';
-    const output = await detector(img, {
-        threshold: 0.5,
-        percentage: true,
-    });
-    status.textContent = '';
-    output.forEach(renderBox);
-}
-// Render a bounding box and label on the image
-function renderBox({ box, label }) {
-    const { xmax, xmin, ymax, ymin } = box;
-    // Generate a random color for the box
-    const color = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, 0);
-    // Draw the box
-    const boxElement = document.createElement('div');
-    boxElement.className = 'bounding-box';
-    Object.assign(boxElement.style, {
-        borderColor: color,
-        left: 100 * xmin + '%',
-        top: 100 * ymin + '%',
-        width: 100 * (xmax - xmin) + '%',
-        height: 100 * (ymax - ymin) + '%',
-    })
-    // Draw label
-    const labelElement = document.createElement('span');
-    labelElement.textContent = label;
-    labelElement.className = 'bounding-box-label';
-    labelElement.style.backgroundColor = color;
-    boxElement.appendChild(labelElement);
-    imageContainer.appendChild(boxElement);
-}