Spaces:

cutechicken
/

TankWar3D

Running

App Files Files Community

cutechicken commited on Dec 11, 2024

Commit

2523f3b

verified ·

1 Parent(s): efd2261

Update index.html

Browse files

Files changed (1) hide show

index.html +244 -749

index.html CHANGED Viewed

@@ -1,787 +1,282 @@
-import * as THREE from 'three';
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
-// 게임 상수
-const GAME_DURATION = 180;
-const MAP_SIZE = 2000;
-const TANK_HEIGHT = 0.5;
-const ENEMY_GROUND_HEIGHT = 0;
-const ENEMY_SCALE = 10;
-const MAX_HEALTH = 1000;
-const ENEMY_MOVE_SPEED = 0.1;
-const ENEMY_COUNT_MAX = 5;
-const PARTICLE_COUNT = 15;
-const BUILDING_COUNT = 30;  // 건물 수 추가
-const ENEMY_CONFIG = {
-    ATTACK_RANGE: 100,
-    ATTACK_INTERVAL: 2000,
-    BULLET_SPEED: 2
-};
-// TankPlayer 클래스
-class TankPlayer {
-    constructor() {
-        this.body = null;
-        this.turret = null;
-        this.position = new THREE.Vector3(0, 0, 0);
-        this.rotation = new THREE.Euler(0, 0, 0);
-        this.turretRotation = 0;
-        this.moveSpeed = 0.5;
-        this.turnSpeed = 0.03;
-        this.turretGroup = new THREE.Group();
-        this.health = MAX_HEALTH;
-        this.isLoaded = false;
-        this.ammo = 10;
-        this.lastShootTime = 0;
-        this.shootInterval = 1000;
-        this.bullets = [];
-    }
-    async initialize(scene, loader) {
-        try {
-            const bodyResult = await loader.loadAsync('/models/abramsBody.glb');
-            this.body = bodyResult.scene;
-            this.body.position.copy(this.position);
-            const turretResult = await loader.loadAsync('/models/abramsTurret.glb');
-            this.turret = turretResult.scene;
-            this.turretGroup.position.y = 0.2;
-            this.turretGroup.add(this.turret);
-            this.body.add(this.turretGroup);
-            this.body.traverse((child) => {
-                if (child.isMesh) {
-                    child.castShadow = true;
-                    child.receiveShadow = true;
-                }
-            });
-            this.turret.traverse((child) => {
-                if (child.isMesh) {
-                    child.castShadow = true;
-                    child.receiveShadow = true;
-                }
-            });
-            scene.add(this.body);
-            this.isLoaded = true;
-        } catch (error) {
-            console.error('Error loading tank models:', error);
-            this.isLoaded = false;
         }
-    }
-    shoot(scene) {
-    const currentTime = Date.now();
-    if (currentTime - this.lastShootTime < this.shootInterval || this.ammo <= 0) return null;
-    // 총알 생성
-    const bulletGeometry = new THREE.SphereGeometry(0.2);
-    const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
-    const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
-    // 총알 시작 위치 (포탑 끝)
-    const bulletOffset = new THREE.Vector3(0, 0.5, 2);
-    // 포탑의 회전을 적용
-    bulletOffset.applyQuaternion(this.turretGroup.quaternion);
-    bulletOffset.applyQuaternion(this.body.quaternion);
-    bullet.position.copy(this.body.position).add(bulletOffset);
-    // 총알 속도 (포탑 방향)
-    const direction = new THREE.Vector3(0, 0, 1);
-    direction.applyQuaternion(this.turretGroup.quaternion);
-    direction.applyQuaternion(this.body.quaternion);
-    bullet.velocity = direction.multiplyScalar(2);
-    scene.add(bullet);
-    this.bullets.push(bullet);
-    this.ammo--;
-    this.lastShootTime = currentTime;
-    document.getElementById('ammo').textContent = `Ammo: ${this.ammo}/10`;
-    return bullet;
-}
-    update(mouseX, mouseY) {
-   if (!this.body || !this.turretGroup) return;
-   // 총알 업데이트만 수행하고 포탑 회전은 Game 클래스의 handleMovement에서 처리
-   for (let i = this.bullets.length - 1; i >= 0; i--) {
-       const bullet = this.bullets[i];
-       bullet.position.add(bullet.velocity);
-       // 총알이 맵 밖으로 나가면 제거
-       if (Math.abs(bullet.position.x) > MAP_SIZE/2 ||
-           Math.abs(bullet.position.z) > MAP_SIZE/2) {
-           scene.remove(bullet);
-           this.bullets.splice(i, 1);
-       }
-   }
-}
-    move(direction) {
-    if (!this.body) return;
-    const moveVector = new THREE.Vector3();
-    moveVector.x = direction.x * this.moveSpeed;
-    moveVector.z = direction.z * this.moveSpeed;
-    this.body.position.add(moveVector);
-    }
-    rotate(angle) {
-        if (!this.body) return;
-        this.body.rotation.y += angle * this.turnSpeed;
-    }
-    getPosition() {
-        return this.body ? this.body.position : new THREE.Vector3();
-    }
-    takeDamage(damage) {
-        this.health -= damage;
-        return this.health <= 0;
-    }
-}
-// Enemy 클래스 수정
-class Enemy {
-    constructor(scene, position, type = 'tank') {
-        this.scene = scene;
-        this.position = position;
-        this.mesh = null;
-        this.type = type; // 'tank' 또는 'heavy'
-        this.health = type === 'tank' ? 100 : 200; // heavy는 체력이 더 높음
-        this.lastAttackTime = 0;
-        this.bullets = [];
-        this.isLoaded = false;
-        this.moveSpeed = type === 'tank' ? ENEMY_MOVE_SPEED : ENEMY_MOVE_SPEED * 0.7; // heavy는 더 느림
-    }
-    async initialize(loader) {
-        try {
-            // 타입에 따라 다른 모델 로드
-            const modelPath = this.type === 'tank' ? '/models/enemy1.glb' : '/models/enemy4.glb';
-            const result = await loader.loadAsync(modelPath);
-            this.mesh = result.scene;
-            this.mesh.position.copy(this.position);
-            this.mesh.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
-            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 loading enemy model:', error);
-            this.isLoaded = false;
         }
-    }
-    update(playerPosition) {
-        if (!this.mesh || !this.isLoaded) return;
-        // 플레이어 방향으로 회전
-        const direction = new THREE.Vector3()
-            .subVectors(playerPosition, this.mesh.position)
-            .normalize();
-        this.mesh.lookAt(playerPosition);
-        // 플레이어 방향으로 이동 (타입에 따라 다른 속도)
-        this.mesh.position.add(direction.multiplyScalar(this.moveSpeed));
-        // 총알 업데이트
-        for (let i = this.bullets.length - 1; i >= 0; i--) {
-            const bullet = this.bullets[i];
-            bullet.position.add(bullet.velocity);
-            // 총알이 맵 밖으로 나가면 제거
-            if (Math.abs(bullet.position.x) > MAP_SIZE ||
-                Math.abs(bullet.position.z) > MAP_SIZE) {
-                this.scene.remove(bullet);
-                this.bullets.splice(i, 1);
-            }
         }
-    }
-    shoot(playerPosition) {
-        const currentTime = Date.now();
-        const attackInterval = this.type === 'tank' ?
-            ENEMY_CONFIG.ATTACK_INTERVAL :
-            ENEMY_CONFIG.ATTACK_INTERVAL * 1.5; // heavy는 발사 간격이 더 김
-        if (currentTime - this.lastAttackTime < attackInterval) return;
-        const bulletGeometry = new THREE.SphereGeometry(this.type === 'tank' ? 0.2 : 0.3);
-        const bulletMaterial = new THREE.MeshBasicMaterial({
-            color: this.type === 'tank' ? 0xff0000 : 0xff6600
-        });
-        const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
-        bullet.position.copy(this.mesh.position);
-        const direction = new THREE.Vector3()
-            .subVectors(playerPosition, this.mesh.position)
-            .normalize();
-        const bulletSpeed = this.type === 'tank' ?
-            ENEMY_CONFIG.BULLET_SPEED :
-            ENEMY_CONFIG.BULLET_SPEED * 0.8;
-        bullet.velocity = direction.multiplyScalar(bulletSpeed);
-        this.scene.add(bullet);
-        this.bullets.push(bullet);
-        this.lastAttackTime = currentTime;
-    }
-    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;
         }
-    }
-}
-// Particle 클래스는 그대로 유지
-class Particle {
-    constructor(scene, position) {
-        const geometry = new THREE.SphereGeometry(0.1);
-        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
-        this.mesh = new THREE.Mesh(geometry, material);
-        this.mesh.position.copy(position);
-        this.velocity = new THREE.Vector3(
-            (Math.random() - 0.5) * 0.3,
-            Math.random() * 0.2,
-            (Math.random() - 0.5) * 0.3
-        );
-        this.gravity = -0.01;
-        this.lifetime = 60;
-        this.age = 0;
-        scene.add(this.mesh);
-    }
-    update() {
-        this.velocity.y += this.gravity;
-        this.mesh.position.add(this.velocity);
-        this.age++;
-        return this.age < this.lifetime;
-    }
-    destroy(scene) {
-        scene.remove(this.mesh);
-    }
-}
-// Game 클래스
-class Game {
-    constructor() {
-        // 기본 Three.js 설정
-        this.scene = new THREE.Scene();
-        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-        this.renderer = new THREE.WebGLRenderer({ antialias: true });
-        this.renderer.setSize(window.innerWidth, window.innerHeight);
-        this.renderer.shadowMap.enabled = true;
-        document.getElementById('gameContainer').appendChild(this.renderer.domElement);
-        // 게임 요소 초기화
-        this.tank = new TankPlayer();
-        this.enemies = [];
-        this.particles = [];
-        this.buildings = [];
-        this.loader = new GLTFLoader();
-        this.controls = null;
-        this.gameTime = GAME_DURATION;
-        this.score = 0;
-        this.isGameOver = false;
-        this.isLoading = true;
-        this.previousTankPosition = new THREE.Vector3();
-        this.lastTime = performance.now();
-        // 마우스/키보드 상태
-        this.mouse = { x: 0, y: 0 };
-        this.keys = {
-            forward: false,
-            backward: false,
-            left: false,
-            right: false
-        };
-        // 이벤트 리스너 설정
-        this.setupEventListeners();
-        this.initialize();
-    }
-    async initialize() {
-   try {
-       // 조명 설정
-       const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-       this.scene.add(ambientLight);
-       const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-       directionalLight.position.set(50, 50, 50);
-       directionalLight.castShadow = true;
-       directionalLight.shadow.mapSize.width = 2048;
-       directionalLight.shadow.mapSize.height = 2048;
-       this.scene.add(directionalLight);
-       // 지형 생성
-       const ground = new THREE.Mesh(
-           new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE),
-           new THREE.MeshStandardMaterial({
-               color: 0x333333,
-               roughness: 0.9,
-               metalness: 0.1
-           })
-       );
-       ground.rotation.x = -Math.PI / 2;
-       ground.receiveShadow = true;
-       this.scene.add(ground);
-       // 건물 생성
-       await this.createBuildings();
-       // 탱크 초기화
-       await this.tank.initialize(this.scene, this.loader);
-       if (!this.tank.isLoaded) {
-           throw new Error('Tank loading failed');
-       }
-       // 카메라 설정 수정
-             // 탱크의 현재 위치 가져오기
-      const tankPosition = this.tank.getPosition();
-      // 카메라를 탱크 위치 기준으로 설정
-      this.camera.position.set(
-          tankPosition.x,
-          tankPosition.y + 15,  // 탱크보다 15 유닛 위에
-          tankPosition.z - 30   // 탱크보다 30 유닛 뒤에
-      );
-      // 카메라가 탱크를 바라보도록 설정
-      this.camera.lookAt(new THREE.Vector3(
-          tankPosition.x,
-          tankPosition.y + 2,  // 탱크의 상단 부분을 바라보도록
-          tankPosition.z
-      ));
-       // 로딩 완료
-       this.isLoading = false;
-       document.getElementById('loading').style.display = 'none';
-       // 게임 시작
-       this.animate();
-       this.spawnEnemies();
-       this.startGameTimer();
-   } catch (error) {
-       console.error('Game initialization error:', error);
-       this.handleLoadingError();
-   }
-}
-    setupEventListeners() {
-    // 키보드 이벤트는 그대로 유지
-    document.addEventListener('keydown', (event) => {
-        if (this.isLoading) return;
-        switch(event.code) {
-            case 'KeyW': this.keys.forward = true; break;
-            case 'KeyS': this.keys.backward = true; break;
-            case 'KeyA': this.keys.left = true; break;
-            case 'KeyD': this.keys.right = true; break;
         }
-    });
-    document.addEventListener('keyup', (event) => {
-        if (this.isLoading) return;
-        switch(event.code) {
-            case 'KeyW': this.keys.forward = false; break;
-            case 'KeyS': this.keys.backward = false; break;
-            case 'KeyA': this.keys.left = false; break;
-            case 'KeyD': this.keys.right = false; break;
         }
-    });
-    // 마우스 움직임 이벤트를 수정
-    document.addEventListener('mousemove', (event) => {
-        if (this.isLoading || !document.pointerLockElement) return;
-        // movementX/Y를 사용하여 마우스 회전 계산
-        this.mouse.x += event.movementX * 0.002;
-        this.mouse.y += event.movementY * 0.002;
-    });
-    // 클릭 이벤트 수정 - 포인터 락과 발사를 함께 처리
-    document.addEventListener('click', () => {
-        if (!document.pointerLockElement) {
-            document.body.requestPointerLock();
-        } else {
-            const bullet = this.tank.shoot(this.scene);
-            if (bullet) {
-                // 총알 발사 효과음이나 시각효과 추가 가능
-            }
         }
-    });
-    // 포인터 락 상태 변경 이벤트 추가
-    document.addEventListener('pointerlockchange', () => {
-        if (!document.pointerLockElement) {
-            // 포인터 락이 해제되었을 때의 처리
-            this.mouse.x = 0;
-            this.mouse.y = 0;
         }
-    });
-    // 창 크기 변경 이벤트는 그대로 유지
-    window.addEventListener('resize', () => {
-        this.camera.aspect = window.innerWidth / window.innerHeight;
-        this.camera.updateProjectionMatrix();
-        this.renderer.setSize(window.innerWidth, window.innerHeight);
-    });
-}
-   handleMovement() {
-    if (!this.tank.isLoaded) return;
-    const direction = new THREE.Vector3();
-    if (this.keys.forward) direction.z += 1;
-    if (this.keys.backward) direction.z -= 1;
-    if (this.keys.left) direction.x -= 1;
-    if (this.keys.right) direction.x += 1;
-    if (direction.length() > 0) {
-        direction.normalize();
-        // A,D 키로 탱크 회전
-        if (this.keys.left) this.tank.rotate(-1);
-        if (this.keys.right) this.tank.rotate(1);
-        // 현재 탱크의 방향으로 이동
-        direction.applyEuler(this.tank.body.rotation);
-        this.tank.move(direction);
-    }
-    // 마우스 위치를 탱크 기준으로 변환
-    const mouseVector = new THREE.Vector2(this.mouse.x, -this.mouse.y);
-    const rotationAngle = Math.atan2(mouseVector.x, mouseVector.y);
-    // 포탑 회전
-    if (this.tank.turretGroup) {
-        this.tank.turretGroup.rotation.y = rotationAngle;
-    }
-    // 여기부터 카메라 로직을 수정합니다
-    const tankPos = this.tank.getPosition();
-    const cameraDistance = 30; // 카메라와 탱크 사이의 거리
-    const cameraHeight = 15;   // 카메라의 높이
-    const lookAtHeight = 5;    // 카메라가 바라보는 높이
-    // 탱크의 회전에 따라 카메라 위치 계산
-    const tankRotation = this.tank.body.rotation.y;
-    // 카메라 위치 계산 수정
-    this.camera.position.set(
-        tankPos.x - Math.sin(tankRotation) * cameraDistance,
-        tankPos.y + cameraHeight,
-        tankPos.z - Math.cos(tankRotation) * cameraDistance
-    );
-    // 카메라가 바라보는 지점을 탱크 위치보다 약간 앞쪽으로 설정
-    const lookAtPoint = new THREE.Vector3(
-        tankPos.x + Math.sin(tankRotation) * 10, // 탱크 앞쪽 10 유닛
-        tankPos.y + lookAtHeight,                 // 탱크보다 약간 위
-        tankPos.z + Math.cos(tankRotation) * 10   // 탱크 앞쪽 10 유닛
-    );
-    this.camera.lookAt(lookAtPoint);
-}
-createBuildings() {
-        const buildingTypes = [
-            { width: 10, height: 30, depth: 10, color: 0x808080 },
-            { width: 15, height: 40, depth: 15, color: 0x606060 },
-            { width: 20, height: 50, depth: 20, color: 0x404040 }
-        ];
-        for (let i = 0; i < BUILDING_COUNT; i++) {
-            const type = buildingTypes[Math.floor(Math.random() * buildingTypes.length)];
-            const building = this.createBuilding(type);
-            let position;
-            let attempts = 0;
-            do {
-                position = new THREE.Vector3(
-                    (Math.random() - 0.5) * (MAP_SIZE - type.width),
-                    type.height / 2,
-                    (Math.random() - 0.5) * (MAP_SIZE - type.depth)
-                );
-                attempts++;
-            } while (this.checkBuildingCollision(position, type) && attempts < 50);
-            if (attempts < 50) {
-                building.position.copy(position);
-                this.buildings.push(building);
-                this.scene.add(building);
-            }
         }
-    }
-    createBuilding(type) {
-        const geometry = new THREE.BoxGeometry(type.width, type.height, type.depth);
-        const material = new THREE.MeshPhongMaterial({
-            color: type.color,
-            emissive: 0x222222,
-            specular: 0x111111,
-            shininess: 30
-        });
-        const building = new THREE.Mesh(geometry, material);
-        building.castShadow = true;
-        building.receiveShadow = true;
-        return building;
-    }
-    checkBuildingCollision(position, type) {
-        const margin = 5;
-        const bbox = new THREE.Box3(
-            new THREE.Vector3(
-                position.x - (type.width / 2 + margin),
-                0,
-                position.z - (type.depth / 2 + margin)
-            ),
-            new THREE.Vector3(
-                position.x + (type.width / 2 + margin),
-                type.height,
-                position.z + (type.depth / 2 + margin)
-            )
-        );
-        return this.buildings.some(building => {
-            const buildingBox = new THREE.Box3().setFromObject(building);
-            return bbox.intersectsBox(buildingBox);
-        });
-    }
-    handleLoadingError() {
-        this.isLoading = false;
-        const loadingElement = document.getElementById('loading');
-        if (loadingElement) {
-            loadingElement.innerHTML = `
-                <div class="loading-text" style="color: red;">
-                    Loading failed. Please refresh the page.
-                </div>
-            `;
         }
-    }
-    spawnEnemies() {
-        const spawnEnemy = () => {
-            if (this.enemies.length < ENEMY_COUNT_MAX && !this.isGameOver) {
-                const position = this.getValidEnemySpawnPosition();
-                if (position) {
-                    const type = Math.random() < 0.7 ? 'tank' : 'heavy';
-                    const enemy = new Enemy(this.scene, position, type);
-                    enemy.initialize(this.loader);
-                    this.enemies.push(enemy);
-                }
-            }
-            setTimeout(spawnEnemy, 3000);
-        };
-        spawnEnemy();
-    }
-    getValidEnemySpawnPosition() {
-        const margin = 20;
-        let position;
-        let attempts = 0;
-        const maxAttempts = 50;
-        do {
-            position = new THREE.Vector3(
-                (Math.random() - 0.5) * (MAP_SIZE - margin * 2),
-                ENEMY_GROUND_HEIGHT,
-                (Math.random() - 0.5) * (MAP_SIZE - margin * 2)
-            );
-            const distanceToPlayer = position.distanceTo(this.tank.getPosition());
-            if (distanceToPlayer < 100) continue;
-            let collisionFound = false;
-            for (const building of this.buildings) {
-                const buildingBox = new THREE.Box3().setFromObject(building);
-                if (buildingBox.containsPoint(position)) {
-                    collisionFound = true;
-                    break;
-                }
-            }
-            if (!collisionFound) return position;
-            attempts++;
-        } while (attempts < maxAttempts);
-        return null;
-    }
-    startGameTimer() {
-        const timer = setInterval(() => {
-            if (this.isLoading) return;
-            this.gameTime--;
-            if (this.gameTime <= 0 || this.isGameOver) {
-                clearInterval(timer);
-                this.endGame();
-            }
-        }, 1000);
-    }
-    updateParticles() {
-        for (let i = this.particles.length - 1; i >= 0; i--) {
-            const particle = this.particles[i];
-            if (!particle.update()) {
-                particle.destroy(this.scene);
-                this.particles.splice(i, 1);
-            }
         }
-    }
-    createExplosion(position) {
-        for (let i = 0; i < PARTICLE_COUNT; i++) {
-            this.particles.push(new Particle(this.scene, position));
         }
-    }
-    checkCollisions() {
-        if (this.isLoading || !this.tank.isLoaded) return;
-        const tankPosition = this.tank.getPosition();
-        this.enemies.forEach(enemy => {
-            if (!enemy.mesh || !enemy.isLoaded) return;
-            enemy.bullets.forEach(bullet => {
-                const distance = bullet.position.distanceTo(tankPosition);
-                if (distance < 1) {
-                    if (this.tank.takeDamage(10)) {
-                        this.endGame();
-                    }
-                    this.scene.remove(bullet);
-                    enemy.bullets = enemy.bullets.filter(b => b !== bullet);
-                    this.createExplosion(bullet.position);
-                    document.getElementById('health').style.width =
-                        `${(this.tank.health / MAX_HEALTH) * 100}%`;
-                }
-            });
-        });
-        const tankBoundingBox = new THREE.Box3().setFromObject(this.tank.body);
-        for (const building of this.buildings) {
-            const buildingBox = new THREE.Box3().setFromObject(building);
-            if (tankBoundingBox.intersectsBox(buildingBox)) {
-                this.tank.body.position.copy(this.previousTankPosition);
-                break;
-            }
         }
-        this.previousTankPosition = this.tank.body.position.clone();
-    }
-    endGame() {
-        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 = 'white';
-        gameOverDiv.style.fontSize = '48px';
-        gameOverDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
-        gameOverDiv.style.padding = '20px';
-        gameOverDiv.style.borderRadius = '10px';
-        gameOverDiv.innerHTML = `
-            Game Over<br>
-            Score: ${this.score}<br>
-            Time Survived: ${GAME_DURATION - this.gameTime}s<br>
-            <button onclick="location.reload()"
-                    style="font-size: 24px; padding: 10px; margin-top: 20px;
-                           cursor: pointer; background: #4CAF50; border: none;
-                           color: white; border-radius: 5px;">
-                Play Again
-            </button>
-        `;
-        document.body.appendChild(gameOverDiv);
-    }
-    animate() {
-        if (this.isGameOver) return;
-        requestAnimationFrame(() => this.animate());
-        const currentTime = performance.now();
-        const deltaTime = (currentTime - this.lastTime) / 1000;
-        this.lastTime = currentTime;
-        if (this.isLoading) {
-            this.renderer.render(this.scene, this.camera);
-            return;
         }
-        this.handleMovement();
-        this.tank.update(this.mouse.x, this.mouse.y);
-        const tankPosition = this.tank.getPosition();
-        this.enemies.forEach(enemy => {
-            enemy.update(tankPosition);
-            if (enemy.isLoaded && enemy.mesh.position.distanceTo(tankPosition) < ENEMY_CONFIG.ATTACK_RANGE) {
-                enemy.shoot(tankPosition);
-            }
-        });
-        this.updateParticles();
-        this.checkCollisions();
-        this.updateUI();
-        this.renderer.render(this.scene, this.camera);
-    }
-    updateUI() {
-        const healthBar = document.getElementById('health');
-        if (healthBar) {
-            healthBar.style.width = `${(this.tank.health / MAX_HEALTH) * 100}%`;
         }
-        const timeElement = document.getElementById('time');
-        if (timeElement) {
-            timeElement.textContent = `Time: ${this.gameTime}s`;
         }
-        const scoreElement = document.getElementById('score');
-        if (scoreElement) {
-            scoreElement.textContent = `Score: ${this.score}`;
         }
-    }
-}
-// HTML의 startGame 함수와 연결
-window.startGame = function() {
-    document.getElementById('startScreen').style.display = 'none';
-    document.body.requestPointerLock();
-};
-// 게임 인스턴스 생성
-const game = new Game();

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tank Combat Simulator - FPS Mode</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #000;
+            font-family: 'Courier New', monospace;
         }
+        #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: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 40px;
+            height: 40px;
+            border: 2px solid rgba(255,0,0,0.7);
+            border-radius: 50%;
+            z-index: 1001;
+            pointer-events: none;
+            mix-blend-mode: difference;
         }
+        #crosshair::before,
+        #crosshair::after {
+            content: '';
+            position: absolute;
+            background: rgba(255,0,0,0.7);
         }
+        #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%);
         }
+        #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;
+        }
+        #turretInfo {
+            position: absolute;
+            top: 50px;
+            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;
         }
+        #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;
+        }
+        #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;">Tank Combat Simulator</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">Tank Combat Simulator</div>
+        <div id="gameStats">
+            <div id="score">Score: 0</div>
+            <div id="time">Time: 180s</div>
+        </div>
+        <div id="crosshair"></div>
+        <div id="healthBar"><div id="health"></div></div>
+        <div id="ammo">Ammo: 10/10</div>
+        <div id="turretInfo">Turret Angle: 0°</div>
+        <div id="minimap"></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>