3D-Airforce-Simulator

Running

App Files Files Community

cutechicken commited on Jul 4

Commit

46b60f2

verified ·

1 Parent(s): 916e77f

Update index.html

Browse files

Files changed (1) hide show

index.html +350 -895

index.html CHANGED Viewed

@@ -1,944 +1,399 @@
-import * as THREE from 'three';
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-// 게임 상수
-const GAME_CONSTANTS = {
-    MISSION_DURATION: 180,
-    MAP_SIZE: 15000,
-    MAX_ALTITUDE: 12000,
-    MIN_ALTITUDE: 100,
-    MAX_SPEED: 800,
-    STALL_SPEED: 120,
-    GRAVITY: 9.8,
-    MOUSE_SENSITIVITY: 0.001, // 마우스 감도 낮춤
-    MAX_G_FORCE: 12.0,
-    ENEMY_COUNT: 4,
-    MISSILE_COUNT: 6,
-    AMMO_COUNT: 300
-};
-// 전투기 클래스
-class Fighter {
-    constructor() {
-        this.mesh = null;
-        this.isLoaded = false;
-        // 물리 속성
-        this.position = new THREE.Vector3(0, 2000, 0);
-        this.velocity = new THREE.Vector3(0, 0, 150); // 초기 전진 속도
-        this.acceleration = new THREE.Vector3(0, 0, 0);
-        this.rotation = new THREE.Euler(0, 0, 0);
-        // 비행 제어 (워썬더 스타일)
-        this.baseSpeed = 150; // 기본 속도
-        this.throttle = 0.5;  // 기본 스로틀 50%
-        this.speed = 150;
-        this.altitude = 2000;
-        this.gForce = 1.0;
-        this.health = 100;
-        // 조종 입력 시스템
-        this.pitchInput = 0;   // 마우스 Y -> 기수 상하
-        this.rollInput = 0;    // 마우스 X -> 좌우 회전 (롤)
-        this.yawInput = 0;     // A/D 키 -> 러더
-        // 마우스 누적 입력
-        this.mousePitch = 0;
-        this.mouseRoll = 0;
-        // 부드러운 회전을 위한 목표값
-        this.targetPitch = 0;
-        this.targetRoll = 0;
-        this.targetYaw = 0;
-        // 무기
-        this.missiles = GAME_CONSTANTS.MISSILE_COUNT;
-        this.ammo = GAME_CONSTANTS.AMMO_COUNT;
-        this.bullets = [];
-        this.lastShootTime = 0;
-        // 카메라 설정
-        this.cameraDistance = 40;
-        this.cameraHeight = 10;
-        this.cameraLag = 0.08; // 카메라 따라오는 속도
-    }
-    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(2, 2, 2);
-            // 그림자 설정
-            this.mesh.traverse((child) => {
-                if (child.isMesh) {
-                    child.castShadow = true;
-                    child.receiveShadow = true;
-                }
-            });
-            scene.add(this.mesh);
-            this.isLoaded = true;
-            console.log('F-15 전투기 로딩 완료');
-        } catch (error) {
-            console.error('F-15 모델 로딩 실패:', error);
-            this.createFallbackModel(scene);
         }
-    }
-    createFallbackModel(scene) {
-        const group = new THREE.Group();
-        // 동체
-        const fuselageGeometry = new THREE.CylinderGeometry(0.8, 1.5, 12, 8);
-        const fuselageMaterial = new THREE.MeshLambertMaterial({ color: 0x606060 });
-        const fuselage = new THREE.Mesh(fuselageGeometry, fuselageMaterial);
-        fuselage.rotation.x = Math.PI / 2;
-        group.add(fuselage);
-        // 주익
-        const wingGeometry = new THREE.BoxGeometry(16, 0.3, 4);
-        const wingMaterial = new THREE.MeshLambertMaterial({ color: 0x404040 });
-        const wings = new THREE.Mesh(wingGeometry, wingMaterial);
-        wings.position.z = -1;
-        group.add(wings);
-        // 수직 안정판
-        const tailGeometry = new THREE.BoxGeometry(0.3, 4, 3);
-        const tailMaterial = new THREE.MeshLambertMaterial({ color: 0x404040 });
-        const tail = new THREE.Mesh(tailGeometry, tailMaterial);
-        tail.position.z = -5;
-        tail.position.y = 1.5;
-        group.add(tail);
-        // 수평 안정판
-        const horizontalTailGeometry = new THREE.BoxGeometry(6, 0.2, 2);
-        const horizontalTail = new THREE.Mesh(horizontalTailGeometry, tailMaterial);
-        horizontalTail.position.z = -5;
-        horizontalTail.position.y = 0.5;
-        group.add(horizontalTail);
-        this.mesh = group;
-        this.mesh.position.copy(this.position);
-        this.mesh.scale.set(2, 2, 2);
-        scene.add(this.mesh);
-        this.isLoaded = true;
-        console.log('Fallback 전투기 모델 생성 완료');
-    }
-    // 워썬더 스타일 마우스 입력 처리
-    updateMouseInput(deltaX, deltaY) {
-        // 마우스 X = 롤 (좌우 기울기)
-        // 마우스 Y = 피치 (기수 상하)
-        this.mouseRoll += deltaX * GAME_CONSTANTS.MOUSE_SENSITIVITY;
-        this.mousePitch += deltaY * GAME_CONSTANTS.MOUSE_SENSITIVITY;
-        // 입력 제한 (±1)
-        this.mouseRoll = Math.max(-1, Math.min(1, this.mouseRoll));
-        this.mousePitch = Math.max(-1, Math.min(1, this.mousePitch));
-    }
-    // 키보드 입력 처리
-    updateControls(keys, deltaTime) {
-        // W/S: 스로틀 조절
-        if (keys.w) {
-            this.throttle = Math.min(1.0, this.throttle + deltaTime * 0.8);
-        }
-        if (keys.s) {
-            this.throttle = Math.max(0.1, this.throttle - deltaTime * 0.8);
         }
-        // A/D: 러더 (요 회전)
-        this.yawInput = 0;
-        if (keys.a) this.yawInput = -0.5;
-        if (keys.d) this.yawInput = 0.5;
-        // 현재 입력을 조종 입력으로 설정
-        this.pitchInput = this.mousePitch;
-        this.rollInput = this.mouseRoll;
-        // 목표 회전각 계산 (부드러운 제어)
-        const maxPitchAngle = Math.PI / 6; // 30도
-        const maxRollAngle = Math.PI / 4;  // 45도
-        this.targetPitch = this.pitchInput * maxPitchAngle;
-        this.targetRoll = this.rollInput * maxRollAngle;
-        this.targetYaw += this.yawInput * deltaTime * 1.5;
-        // 마우스 입력 자연스럽게 감쇠
-        this.mouseRoll *= 0.95;
-        this.mousePitch *= 0.95;
-    }
-    // 물리 시뮬레이션
-    updatePhysics(deltaTime) {
-        if (!this.mesh) return;
-        // 회전 부드럽게 보간
-        const rotationSpeed = deltaTime * 3.0;
-        this.rotation.x = THREE.MathUtils.lerp(this.rotation.x, this.targetPitch, rotationSpeed);
-        this.rotation.y = THREE.MathUtils.lerp(this.rotation.y, this.targetYaw, rotationSpeed);
-        this.rotation.z = THREE.MathUtils.lerp(this.rotation.z, this.targetRoll, rotationSpeed);
-        // 스로틀에 따른 속도 계산
-        const minSpeed = 100;  // 최소 속도
-        const maxSpeed = 300;  // 최대 속도
-        const targetSpeed = minSpeed + (maxSpeed - minSpeed) * this.throttle;
-        // 속도 부드럽게 변화
-        this.speed = THREE.MathUtils.lerp(this.speed, targetSpeed, deltaTime * 2);
-        // 전진 방향 벡터 계산
-        const forward = new THREE.Vector3(0, 0, 1);
-        forward.applyEuler(this.rotation);
-        // 속도 벡터 설정 (항상 전진)
-        this.velocity = forward.multiplyScalar(this.speed);
-        // 위치 업데이트
-        this.position.add(this.velocity.clone().multiplyScalar(deltaTime));
-        // 고도 제한
-        if (this.position.y < GAME_CONSTANTS.MIN_ALTITUDE) {
-            this.position.y = GAME_CONSTANTS.MIN_ALTITUDE;
-            if (this.velocity.y < 0) this.velocity.y = 0;
         }
-        if (this.position.y > GAME_CONSTANTS.MAX_ALTITUDE) {
-            this.position.y = GAME_CONSTANTS.MAX_ALTITUDE;
-            if (this.velocity.y > 0) this.velocity.y = 0;
         }
-        // 맵 경계 순환 (무한 맵)
-        const mapLimit = GAME_CONSTANTS.MAP_SIZE / 2;
-        if (this.position.x > mapLimit) this.position.x = -mapLimit;
-        if (this.position.x < -mapLimit) this.position.x = mapLimit;
-        if (this.position.z > mapLimit) this.position.z = -mapLimit;
-        if (this.position.z < -mapLimit) this.position.z = mapLimit;
-        // 메시 업데이트
-        this.mesh.position.copy(this.position);
-        this.mesh.rotation.copy(this.rotation);
-        // 현재 값 업데이트
-        this.altitude = this.position.y;
-        // G-Force 계산 (회전 강도에 따라)
-        const rotationIntensity = Math.abs(this.targetPitch) + Math.abs(this.targetRoll);
-        this.gForce = 1.0 + rotationIntensity * 3;
-    }
-    // 발사 시스템
-    shoot(scene) {
-        const currentTime = Date.now();
-        if (currentTime - this.lastShootTime < 100 || this.ammo <= 0) return;
-        this.lastShootTime = currentTime;
-        this.ammo--;
-        // 총��� 생성
-        const bulletGeometry = new THREE.SphereGeometry(0.2);
-        const bulletMaterial = new THREE.MeshBasicMaterial({
-            color: 0xffff00,
-            emissive: 0xffff00,
-            emissiveIntensity: 0.7
-        });
-        const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
-        // 총구 위치 (전투기 앞쪽)
-        const muzzleOffset = new THREE.Vector3(0, 0, 8);
-        muzzleOffset.applyEuler(this.rotation);
-        bullet.position.copy(this.position).add(muzzleOffset);
-        // 총알 속도 (전투기 속도 + 총알 속도)
-        const bulletSpeed = 1000;
-        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);
-        // 발사음
-        try {
-            const audio = new Audio('sounds/gunfire.ogg');
-            audio.volume = 0.3;
-            audio.play();
-        } catch (e) {
-            console.log('Sound file not found');
         }
-    }
-    // 총알 업데이트
-    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) > 8000 ||
-                bullet.position.y < 0 ||
-                bullet.position.y > GAME_CONSTANTS.MAX_ALTITUDE + 500) {
-                scene.remove(bullet);
-                this.bullets.splice(i, 1);
-            }
         }
-    }
-    // 피해 시스템
-    takeDamage(damage) {
-        this.health -= damage;
-        return this.health <= 0;
-    }
-    // 카메라 위치 계산 (전투기 뒤쪽에서 추적)
-    getCameraPosition() {
-        // 전투기 뒤쪽 방향 계산
-        const backward = new THREE.Vector3(0, 0, -1);
-        backward.applyEuler(this.rotation);
-        // 카메라 위치 = 전투기 위치 + 뒤쪽 방향 * 거리 + 높이
-        const cameraPos = this.position.clone()
-            .add(backward.multiplyScalar(this.cameraDistance))
-            .add(new THREE.Vector3(0, this.cameraHeight, 0));
-        return cameraPos;
-    }
-    // 카메라 타겟 (전투기를 바라봄)
-    getCameraTarget() {
-        return this.position.clone().add(new THREE.Vector3(0, 0, 0));
-    }
-}
-// 적 전투기 클래스 (간단한 버전)
-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, 120);
-        this.rotation = new THREE.Euler(0, 0, 0);
-        this.health = 100;
-        this.speed = 120;
-        this.bullets = [];
-        this.lastShootTime = 0;
-        // AI 상태
-        this.aiState = 'patrol';
-        this.targetPosition = position.clone();
-        this.patrolCenter = position.clone();
-        this.patrolRadius = 2000;
-        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.5, 1.5, 1.5);
-            this.mesh.traverse((child) => {
-                if (child.isMesh) {
-                    child.castShadow = true;
-                    child.receiveShadow = true;
-                }
-            });
-            this.scene.add(this.mesh);
-            this.isLoaded = true;
-            console.log('MiG-29 적기 로딩 완료');
-        } catch (error) {
-            console.error('MiG-29 모델 로딩 실패:', error);
-            this.createFallbackModel();
         }
-    }
-    createFallbackModel() {
-        const group = new THREE.Group();
-        const fuselageGeometry = new THREE.CylinderGeometry(0.6, 1.0, 8, 8);
-        const fuselageMaterial = new THREE.MeshLambertMaterial({ color: 0x800000 });
-        const fuselage = new THREE.Mesh(fuselageGeometry, fuselageMaterial);
-        fuselage.rotation.x = Math.PI / 2;
-        group.add(fuselage);
-        const wingGeometry = new THREE.BoxGeometry(12, 0.3, 3);
-        const wingMaterial = new THREE.MeshLambertMaterial({ color: 0x600000 });
-        const wings = new THREE.Mesh(wingGeometry, wingMaterial);
-        wings.position.z = -0.5;
-        group.add(wings);
-        this.mesh = group;
-        this.mesh.position.copy(this.position);
-        this.mesh.scale.set(1.5, 1.5, 1.5);
-        this.scene.add(this.mesh);
-        this.isLoaded = true;
-        console.log('Fallback 적기 모델 생성 완료');
-    }
-    update(playerPosition, deltaTime) {
-        if (!this.mesh || !this.isLoaded) return;
-        const currentTime = Date.now();
-        const distanceToPlayer = this.position.distanceTo(playerPosition);
-        // 간단한 AI: 플레이어 추적
-        if (distanceToPlayer < 5000) {
-            const direction = new THREE.Vector3()
-                .subVectors(playerPosition, this.position)
-                .normalize();
-            this.velocity = direction.multiplyScalar(this.speed);
-            this.rotation.y = Math.atan2(direction.x, direction.z);
-            // 공격
-            if (distanceToPlayer < 2000 && currentTime - this.lastShootTime > 1500) {
-                this.shoot();
-            }
-        } else {
-            // 순찰
-            if (this.position.distanceTo(this.targetPosition) < 300) {
-                const angle = Math.random() * Math.PI * 2;
-                this.targetPosition = this.patrolCenter.clone().add(
-                    new THREE.Vector3(
-                        Math.cos(angle) * this.patrolRadius,
-                        (Math.random() - 0.5) * 1000,
-                        Math.sin(angle) * this.patrolRadius
-                    )
-                );
-            }
-            const direction = new THREE.Vector3()
-                .subVectors(this.targetPosition, this.position)
-                .normalize();
-            this.velocity = direction.multiplyScalar(this.speed * 0.7);
-            this.rotation.y = Math.atan2(direction.x, direction.z);
-        }
-        // 위치 업데이트
-        this.position.add(this.velocity.clone().multiplyScalar(deltaTime));
-        // 고도 제한
-        if (this.position.y < GAME_CONSTANTS.MIN_ALTITUDE) {
-            this.position.y = GAME_CONSTANTS.MIN_ALTITUDE;
-        }
-        if (this.position.y > GAME_CONSTANTS.MAX_ALTITUDE) {
-            this.position.y = GAME_CONSTANTS.MAX_ALTITUDE;
         }
-        // 맵 경계 순환
-        const mapLimit = GAME_CONSTANTS.MAP_SIZE / 2;
-        if (this.position.x > mapLimit) this.position.x = -mapLimit;
-        if (this.position.x < -mapLimit) this.position.x = mapLimit;
-        if (this.position.z > mapLimit) this.position.z = -mapLimit;
-        if (this.position.z < -mapLimit) this.position.z = mapLimit;
-        // 메시 업데이트
-        this.mesh.position.copy(this.position);
-        this.mesh.rotation.copy(this.rotation);
-        // 총알 업데이트
-        this.updateBullets(deltaTime);
-    }
-    shoot() {
-        this.lastShootTime = Date.now();
-        const bulletGeometry = new THREE.SphereGeometry(0.15);
-        const bulletMaterial = new THREE.MeshBasicMaterial({
-            color: 0xff0000,
-            emissive: 0xff0000,
-            emissiveIntensity: 0.5
-        });
-        const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
-        const muzzleOffset = new THREE.Vector3(0, 0, 6);
-        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) > 5000 ||
-                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, 50000);
-        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;
-        this.renderer.setClearColor(0x87CEEB);
-        this.renderer.setPixelRatio(window.devicePixelRatio);
-        document.getElementById('gameContainer').appendChild(this.renderer.domElement);
-        this.loader = new GLTFLoader();
-        this.fighter = new Fighter();
-        this.enemies = [];
-        this.isLoaded = false;
-        this.isGameOver = false;
-        this.gameTime = GAME_CONSTANTS.MISSION_DURATION;
-        this.score = 0;
-        this.lastTime = performance.now();
-        this.gameTimer = null;
-        this.animationFrameId = null;
-        // 오디오 시스템
-        this.bgm = null;
-        this.bgmPlaying = false;
-        // 입력 상태
-        this.keys = { w: false, a: false, s: false, d: false };
-        this.isStarted = false;
-        // 기본 초기화
-        this.setupScene();
-        this.setupEventListeners();
-        this.preloadGame();
-    }
-    async preloadGame() {
-        try {
-            console.log('게임 리소스 사전 로딩 중...');
-            // 전투기 사전 로딩
-            await this.fighter.initialize(this.scene, this.loader);
-            if (!this.fighter.isLoaded) {
-                throw new Error('전투기 로딩 실패');
-            }
-            // 초기 카메라 위치 설정
-            const initialCameraPos = this.fighter.getCameraPosition();
-            this.camera.position.copy(initialCameraPos);
-            this.camera.lookAt(this.fighter.position);
-            // 적 생성
-            await this.preloadEnemies();
-            this.isLoaded = true;
-            console.log('게임 리소스 로딩 완료');
-            // 로딩 화면 숨기기
-            document.getElementById('loading').style.display = 'none';
-            // 렌더링 시작
-            this.animate();
-        } catch (error) {
-            console.error('게임 사전 로딩 실패:', error);
-            document.getElementById('loading').innerHTML =
-                '<div class="loading-text" style="color: red;">로딩 실패. 페이지를 새로고침해주세요.</div>';
-        }
-    }
-    async preloadEnemies() {
-        for (let i = 0; i < GAME_CONSTANTS.ENEMY_COUNT; i++) {
-            const angle = (i / GAME_CONSTANTS.ENEMY_COUNT) * Math.PI * 2;
-            const distance = 6000 + Math.random() * 3000;
-            const position = new THREE.Vector3(
-                Math.cos(angle) * distance,
-                2500 + Math.random() * 2000,
-                Math.sin(angle) * distance
-            );
-            const enemy = new EnemyFighter(this.scene, position);
-            await enemy.initialize(this.loader);
-            this.enemies.push(enemy);
-        }
-    }
-    setupScene() {
-        // 하늘 배경
-        this.scene.background = new THREE.Color(0x87CEEB);
-        this.scene.fog = new THREE.Fog(0x87CEEB, 1000, 30000);
-        // 조명
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
-        this.scene.add(ambientLight);
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
-        directionalLight.position.set(8000, 10000, 8000);
-        directionalLight.castShadow = true;
-        directionalLight.shadow.mapSize.width = 2048;
-        directionalLight.shadow.mapSize.height = 2048;
-        directionalLight.shadow.camera.near = 0.5;
-        directionalLight.shadow.camera.far = 20000;
-        directionalLight.shadow.camera.left = -10000;
-        directionalLight.shadow.camera.right = 10000;
-        directionalLight.shadow.camera.top = 10000;
-        directionalLight.shadow.camera.bottom = -10000;
-        this.scene.add(directionalLight);
-        // 지형
-        const groundGeometry = new THREE.PlaneGeometry(GAME_CONSTANTS.MAP_SIZE, GAME_CONSTANTS.MAP_SIZE);
-        const groundMaterial = new THREE.MeshLambertMaterial({
-            color: 0x8FBC8F,
-            transparent: true,
-            opacity: 0.8
-        });
-        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.5
-        });
-        for (let i = 0; i < 100; i++) {
-            const cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
-            cloud.position.set(
-                (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE,
-                Math.random() * 4000 + 1000,
-                (Math.random() - 0.5) * GAME_CONSTANTS.MAP_SIZE
-            );
-            cloud.scale.set(
-                Math.random() * 3 + 1,
-                Math.random() * 2 + 0.5,
-                Math.random() * 3 + 1
-            );
-            this.scene.add(cloud);
         }
-    }
-    setupEventListeners() {
-        // 키보드 이벤트
-        document.addEventListener('keydown', (event) => {
-            if (!this.isStarted || 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.isStarted || this.isGameOver) return;
-            const deltaX = event.movementX || 0;
-            const deltaY = event.movementY || 0;
-            this.fighter.updateMouseInput(deltaX, deltaY);
-        });
-        document.addEventListener('click', () => {
-            if (!this.isStarted) return;
-            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);
-        });
-    }
-    startGame() {
-        if (!this.isLoaded) {
-            console.log('게임이 아직 로딩 중입니다...');
-            return;
         }
-        this.isStarted = true;
-        this.startBGM();
-        this.startGameTimer();
-        console.log('게임 시작!');
-    }
-    startBGM() {
-        if (this.bgmPlaying) return;
-        try {
-            this.bgm = new Audio('sounds/main_bgm.ogg');
-            this.bgm.volume = 0.5;
-            this.bgm.loop = true;
-            this.bgm.play();
-            this.bgmPlaying = true;
-            console.log('BGM 재생 시작');
-        } catch (error) {
-            console.log('BGM 파일을 찾을 수 없습니다:', error);
         }
-    }
-    startGameTimer() {
-        this.gameTimer = setInterval(() => {
-            if (!this.isGameOver) {
-                this.gameTime--;
-                if (this.gameTime <= 0) {
-                    this.endGame(true);
-                }
-            }
-        }, 1000);
-    }
-    updateUI() {
-        if (this.fighter.isLoaded) {
-            const speedKnots = Math.round(this.fighter.speed * 1.94384);
-            const altitudeFeet = Math.round(this.fighter.altitude * 3.28084);
-            document.getElementById('score').textContent = `Score: ${this.score}`;
-            document.getElementById('time').textContent = `Time: ${this.gameTime}s`;
-            document.getElementById('health').style.width = `${this.fighter.health}%`;
-            document.getElementById('ammoDisplay').textContent = `AMMO: ${this.fighter.ammo}`;
-            const gameStats = document.getElementById('gameStats');
-            if (gameStats) {
-                gameStats.innerHTML = `
-                    <div>Score: ${this.score}</div>
-                    <div>Time: ${this.gameTime}s</div>
-                    <div>Speed: ${speedKnots} KT</div>
-                    <div>Alt: ${altitudeFeet} FT</div>
-                    <div>Throttle: ${Math.round(this.fighter.throttle * 100)}%</div>
-                    <div>G-Force: ${this.fighter.gForce.toFixed(1)}</div>
-                    <div>Targets: ${this.enemies.length}</div>
-                `;
-            }
         }
-    }
-    updateRadar() {
-        const radar = document.getElementById('radar');
-        if (!radar) return;
-        const oldDots = radar.getElementsByClassName('enemy-dot');
-        while (oldDots[0]) {
-            oldDots[0].remove();
         }
-        const radarCenter = { x: 100, y: 100 };
-        const radarRange = 10000;
-        this.enemies.forEach(enemy => {
-            if (!enemy.mesh || !enemy.isLoaded) return;
-            const distance = this.fighter.position.distanceTo(enemy.position);
-            if (distance <= radarRange) {
-                const relativePos = enemy.position.clone().sub(this.fighter.position);
-                const angle = Math.atan2(relativePos.x, relativePos.z);
-                const relativeDistance = distance / radarRange;
-                const dotX = radarCenter.x + Math.sin(angle) * (radarCenter.x * relativeDistance);
-                const dotY = radarCenter.y + Math.cos(angle) * (radarCenter.y * relativeDistance);
-                const dot = document.createElement('div');
-                dot.className = 'enemy-dot';
-                dot.style.left = `${dotX}px`;
-                dot.style.top = `${dotY}px`;
-                radar.appendChild(dot);
             }
-        });
-    }
-    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 < 25) {
-                    this.scene.remove(bullet);
-                    this.fighter.bullets.splice(i, 1);
-                    if (enemy.takeDamage(30)) {
-                        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 < 30) {
-                    this.scene.remove(bullet);
-                    enemy.bullets.splice(index, 1);
-                    if (this.fighter.takeDamage(20)) {
-                        this.endGame(false);
-                    }
-                }
-            });
-        });
-    }
-    animate() {
-        if (this.isGameOver) return;
-        this.animationFrameId = 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) {
-            if (this.isStarted) {
-                // 전투기 업데이트
-                this.fighter.updateControls(this.keys, deltaTime);
-                this.fighter.updatePhysics(deltaTime);
-                this.fighter.updateBullets(this.scene, deltaTime);
-                // 적 업데이트
-                this.enemies.forEach(enemy => {
-                    enemy.update(this.fighter.position, deltaTime);
-                });
-                // 충돌 검사
-                this.checkCollisions();
-                // UI 업데이트
-                this.updateUI();
-                this.updateRadar();
-                // 승리 조건 확인
-                if (this.enemies.length === 0) {
-                    this.endGame(true);
-                }
-            }
-            // 카메라 업데이트 (부드럽게 따라가기)
-            const targetCameraPos = this.fighter.getCameraPosition();
-            const targetCameraTarget = this.fighter.getCameraTarget();
-            this.camera.position.lerp(targetCameraPos, this.fighter.cameraLag);
-            this.camera.lookAt(targetCameraTarget);
         }
-        this.renderer.render(this.scene, this.camera);
-    }
-    endGame(victory = false) {
-        this.isGameOver = true;
-        if (this.bgm) {
-            this.bgm.pause();
-            this.bgm = null;
-            this.bgmPlaying = false;
         }
-        if (this.gameTimer) {
-            clearInterval(this.gameTimer);
         }
-        document.exitPointerLock();
-        const gameOverDiv = document.createElement('div');
-        gameOverDiv.className = 'start-screen';
-        gameOverDiv.innerHTML = `
-            <h1 style="color: ${victory ? '#0f0' : '#f00'}; font-size: 48px;">
-                ${victory ? 'MISSION ACCOMPLISHED!' : 'SHOT DOWN!'}
-            </h1>
-            <div style="color: #0f0; font-size: 24px; margin: 20px 0;">
-                Final Score: ${this.score}<br>
-                Enemies Destroyed: ${GAME_CONSTANTS.ENEMY_COUNT - this.enemies.length}<br>
-                Mission Time: ${GAME_CONSTANTS.MISSION_DURATION - this.gameTime}s
-            </div>
-            <button class="start-button" onclick="location.reload()">
-                New Mission
-            </button>
-        `;
-        document.body.appendChild(gameOverDiv);
-    }
-}
-// 게임 인스턴스
-let gameInstance = null;
-// 전역 함수
-window.startGame = function() {
-    document.getElementById('startScreen').style.display = 'none';
-    document.body.requestPointerLock();
-    if (gameInstance && gameInstance.isLoaded) {
-        gameInstance.startGame();
-    } else {
-        console.log('게임이 아직 준비되지 않았습니다...');
-    }
-};
-// 게임 초기화
-document.addEventListener('DOMContentLoaded', () => {
-    console.log('전투기 시뮬레이터 초기화 중...');
-    gameInstance = new Game();
-});

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js"></script>
+    <title>JET FIGHT SIMULATER - FPS Mode</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #000;
+            font-family: 'Courier New', monospace;
         }
+        #enemyLabels {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
         }
+        .enemy-label {
+            position: absolute;
+            background-color: rgba(255, 0, 0, 0.7);
+            color: white;
+            padding: 2px 6px;
+            border-radius: 3px;
+            font-size: 12px;
+            font-family: Arial, sans-serif;
+            transform: translate(-50%, -50%);
+            white-space: nowrap;
         }
+        #loading {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0,0,0,0.8);
+            padding: 20px;
+            border-radius: 10px;
+            z-index: 2000;
+            text-align: center;
         }
+        .loading-spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid #0f0;
+            border-top: 5px solid transparent;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
         }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
+        .loading-text {
+            color: #0f0;
+            font-size: 24px;
+            text-align: center;
         }
+        #gameContainer {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+            cursor: crosshair;
         }
+        #info {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: #0f0;
+            background: rgba(0,20,0,0.7);
+            padding: 10px;
+            font-size: 14px;
+            z-index: 1001;
+            border: 1px solid #0f0;
+            border-radius: 5px;
+            user-select: none;
         }
+        #crosshair {
+    position: fixed;
+    top: 25%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 40px;
+    height: 40px;
+    border: 2px solid #00ff00;
+    border-radius: 50%;
+    z-index: 1001;
+    pointer-events: none;
+    transition: all 0.2s ease;
+}
+/* 물체가 감지되었을 때의 스타일 */
+#crosshair.target-detected {
+    border-color: #ff0000;
+    border-width: 3px;
+    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
 }
+#crosshair::before,
+#crosshair::after {
+    content: '';
+    position: absolute;
+    background: #00ff00;
+    transition: all 0.2s ease;
+}
+#crosshair::before {
+    top: 50%;
+    left: -10px;
+    right: -10px;
+    height: 2px;
+    transform: translateY(-50%);
+}
+#crosshair::after {
+    left: 50%;
+    top: -10px;
+    bottom: -10px;
+    width: 2px;
+    transform: translateX(-50%);
+}
+/* 물체가 감지되었을 때의 크로스 라인 스타일 */
+#crosshair.target-detected::before,
+#crosshair.target-detected::after {
+    background: #ff0000;
+}
+        #healthBar {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            width: 200px;
+            height: 20px;
+            background: rgba(0,20,0,0.7);
+            border: 2px solid #0f0;
+            z-index: 1001;
+            border-radius: 10px;
+            overflow: hidden;
         }
+        #health {
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, #0f0, #00ff00);
+            transition: width 0.3s;
+        }
+        #ammo {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            color: #0f0;
+            background: rgba(0,20,0,0.7);
+            padding: 10px;
+            font-size: 20px;
+            z-index: 1001;
+            border: 1px solid #0f0;
+            border-radius: 5px;
+        }
+        #gameTitle {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #0f0;
+            background: rgba(0,20,0,0.7);
+            padding: 10px 20px;
+            font-size: 20px;
+            z-index: 1001;
+            border: 1px solid #0f0;
+            border-radius: 5px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+        #ammoDisplay {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            color: #0f0;
+            background: rgba(0,20,0,0.7);
+            padding: 10px;
+            font-size: 20px;
+            z-index: 1001;
+            border: 1px solid #0f0;
+            border-radius: 5px;
         }
+        #reloadingText {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #ff0000;
+            font-size: 24px;
+            font-weight: bold;
+            display: none;
+            z-index: 1002;
+        }
+        #radar {
+            position: absolute;
+            bottom: 60px; /* 체력바 위로 이동 */
+            left: 20px;
+            width: 200px;
+            height: 200px;
+            background: rgba(0,20,0,0.3);
+            border: 2px solid #0f0;
+            border-radius: 50%;
+            z-index: 1001;
+            overflow: hidden;
         }
+        #mission {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: #0f0;
+            background: rgba(0,20,0,0.7);
+            padding: 10px;
+            font-size: 16px;
+            z-index: 1001;
+            border: 1px solid #0f0;
+            border-radius: 5px;
         }
+        #radarLine {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 50%;
+            height: 2px;
+            background: #0f0;
+            transform-origin: left center;
+            animation: radar-sweep 4s infinite linear;
         }
+        .enemy-dot {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            background: #ff0000;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+        }
+        @keyframes radar-sweep {
+            from {
+                transform: rotate(0deg);
             }
+            to {
+                transform: rotate(360deg);
             }
         }
+        #gameStats {
+            position: absolute;
+            top: 10px;
+            right: 20px;
+            color: #0f0;
+            background: rgba(0,20,0,0.7);
+            padding: 10px;
+            font-size: 16px;
+            z-index: 1001;
+            border: 1px solid #0f0;
+            border-radius: 5px;
+            text-align: right;
         }
+        .start-screen {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.8);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            z-index: 2000;
         }
+       .start-button {
+            padding: 15px 30px;
+            font-size: 24px;
+            background: #0f0;
+            color: #000;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-top: 20px;
+            transition: transform 0.2s;
         }
+        .start-button:hover {
+            transform: scale(1.1);
+        }
+        #minimap {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            width: 200px;
+            height: 200px;
+            background: rgba(0,20,0,0.7);
+            border: 2px solid #0f0;
+            border-radius: 5px;
+            z-index: 1001;
+        }
+    </style>
+</head>
+<body>
+    <div id="loading">
+        <div class="loading-spinner"></div>
+        <div class="loading-text">Loading tank assets...</div>
+    </div>
+         <div class="start-screen" id="startScreen">
+        <h1 style="color: #0f0; font-size: 48px; margin-bottom: 20px;">JET FIGHT SIMULATER</h1>
+        <button class="start-button" onclick="startGame()">Start Game</button>
+        <div style="color: #0f0; margin-top: 20px; text-align: center;">
+            <p>Controls:</p>
+            <p>W,A,S,D - Move Tank</p>
+            <p>Mouse - Look Around</p>
+            <p>Left Click - Fire</p>
+            <p>ESC - Pause</p>
+        </div>
+    </div>
+    <div id="gameContainer">
+    <div id="gameTitle">JET FIGHT SIMULATER</div>
+    <div id="mission">MISSION: DESTROY ENEMY JET</div>
+    <div id="gameStats">
+        <div id="score">Score: 0</div>
+        <div id="time">Time: 180s</div>
+    </div>
+    <div id="crosshair"></div>
+    <div id="detected" style="position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); color: red; font-size: 16px; display: none;">DETECTED</div>
+    <div id="enemyLabels"></div>
+    <!-- 체력바 -->
+    <div id="healthBar">
+        <div id="health"></div>
+    </div>
+    <!-- 새로운 탄약 시스템 -->
+    <div id="ammoDisplay">APFSDS: 1/1</div>
+    <!-- 리로딩 텍스트 -->
+    <div id="reloadingText">RELOADING...</div>
+    <!-- 레이더 -->
+    <div id="radar">
+        <div id="radarLine"></div>
+    </div>
+</div>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/[email protected]/build/three.module.js",
+                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+            }
+        }
+    </script>
+    <script>
+        function startGame() {
+            document.getElementById('startScreen').style.display = 'none';
+            // 여기에 게임 시작 로직 추가
+            document.body.requestPointerLock();
+        }
+        // 포인터 락 이벤트 처리
+        document.addEventListener('pointerlockchange', () => {
+            if (document.pointerLockElement === document.body) {
+                console.log('Pointer locked');
+            } else {
+                console.log('Pointer unlocked');
+            }
+        });
+    </script>
+    <script type="module" src="game.js"></script>
+</body>
+</html>