Spaces:

gunship999
/

Gunship-3D-FPS

Running

App Files Files Community

gini1 commited on Dec 10, 2024

Commit

9301efb

verified ·

1 Parent(s): 009e6d7

Update index.html

Browse files

Files changed (1) hide show

index.html +163 -390

index.html CHANGED Viewed

@@ -1,109 +1,232 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Desert Combat Game</title>
     <meta charset="utf-8">
     <style>
         body {
             margin: 0;
             overflow: hidden;
             background: #000;
         }
         #info {
             position: absolute;
             top: 10px;
             left: 10px;
-            color: white;
-            background: rgba(0,0,0,0.7);
             padding: 10px;
-            font-family: Arial;
             font-size: 14px;
-            z-index: 100;
             border-radius: 5px;
             user-select: none;
         }
         #timer {
             position: absolute;
             top: 10px;
             right: 10px;
-            color: white;
-            background: rgba(0,0,0,0.7);
             padding: 10px;
-            font-family: Arial;
             font-size: 20px;
-            z-index: 100;
             border-radius: 5px;
         }
         #crosshair {
-            position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            color: rgba(255, 0, 0, 0.8);
-            font-size: 24px;
-            z-index: 100;
-            user-select: none;
             pointer-events: none;
         }
         #healthBar {
             position: absolute;
             bottom: 20px;
             left: 20px;
             width: 400px;
             height: 30px;
-            background: rgba(0,0,0,0.5);
-            border: 3px solid white;
-            z-index: 100;
             border-radius: 15px;
             overflow: hidden;
         }
         #health {
             width: 100%;
             height: 100%;
-            background: linear-gradient(90deg, #ff3333, #ff0000);
             transition: width 0.3s;
         }
         #ammo {
             position: absolute;
             bottom: 20px;
             right: 20px;
-            color: white;
-            background: rgba(0,0,0,0.7);
             padding: 10px;
-            font-family: Arial;
             font-size: 20px;
-            z-index: 100;
             border-radius: 5px;
         }
         #stage {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            color: white;
-            background: rgba(0,0,0,0.8);
             padding: 20px;
-            font-family: Arial;
             font-size: 32px;
-            z-index: 100;
             border-radius: 10px;
             display: none;
         }
         #gameTimer {
             position: absolute;
             top: 60px;
             right: 10px;
-            color: white;
-            background: rgba(0,0,0,0.7);
             padding: 10px;
-            font-family: Arial;
             font-size: 20px;
-            z-index: 100;
             border-radius: 5px;
         }
     </style>
 </head>
 <body>
     <div id="info">
         Click to start<br>
         WASD - Move Helicopter<br>
@@ -113,10 +236,17 @@
     </div>
     <div id="timer">Safe Time: 10s</div>
     <div id="gameTimer">Time: 3:00</div>
-    <div id="crosshair">+</div>
     <div id="healthBar"><div id="health"></div></div>
     <div id="ammo">Ammo: 30/30</div>
     <div id="stage">Stage 1</div>
     <script type="importmap">
         {
@@ -128,364 +258,7 @@
     </script>
     <script type="module">
-        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 HELICOPTER_HEIGHT = 50;
-        const ENEMY_SCALE = 3;
-        const MAX_HEALTH = 1000;
-        const ENEMY_MODELS = ['1.GLB', '2.GLB', '3.GLB', '4.GLB'];
-        // 게임 변수
-        let scene, camera, renderer, controls;
-        let enemies = [];
-        let bullets = [];
-        let enemyBullets = [];
-        let playerHealth = MAX_HEALTH;
-        let ammo = 30;
-        let currentStage = 1;
-        let isGameOver = false;
-        // 사운드
-        const sounds = {
-            bgm: new Audio('Music.wav'),
-            gunshot: new Audio('gun.wav')
-        };
-        sounds.bgm.loop = true;
-        function init() {
-            // Scene 생성
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x87ceeb);  // 하늘색
-            scene.fog = new THREE.Fog(0x87ceeb, 0, 1500);
-            // Camera 설정
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 3000);
-            camera.position.set(0, HELICOPTER_HEIGHT, 0);
-            // Renderer 설정
-            renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.shadowMap.enabled = true;
-            document.body.appendChild(renderer.domElement);
-            // 조명 설정
-            const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
-            scene.add(ambientLight);
-            const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
-            dirLight.position.set(100, 100, 50);
-            dirLight.castShadow = true;
-            scene.add(dirLight);
-            // 지형 생성
-            createTerrain();
-            // Controls 설정
-            controls = new PointerLockControls(camera, document.body);
-            // 이벤트 리스너
-            document.addEventListener('click', onClick);
-            document.addEventListener('keydown', onKeyDown);
-            document.addEventListener('keyup', onKeyUp);
-            // 적 로드
-            loadEnemies();
-            // 애니메이션 ��작
-            animate();
-        }
-        function createTerrain() {
-            // 지형 생성
-            const geometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 200, 200);
-            const material = new THREE.MeshStandardMaterial({
-                color: 0xD2B48C,  // 사막색
-                roughness: 0.8,
-                metalness: 0.2
-            });
-            // 지형 높낮이 설정
-            const vertices = geometry.attributes.position.array;
-            for (let i = 0; i < vertices.length; i += 3) {
-                vertices[i + 2] = Math.sin(vertices[i] * 0.01) * Math.cos(vertices[i + 1] * 0.01) * 20;
-            }
-            geometry.attributes.position.needsUpdate = true;
-            geometry.computeVertexNormals();
-            const terrain = new THREE.Mesh(geometry, material);
-            terrain.rotation.x = -Math.PI / 2;
-            terrain.receiveShadow = true;
-            scene.add(terrain);
-            // 장애물 추가
-            addObstacles();
-        }
-        function addObstacles() {
-            // 바위 생성
-            const rockGeometry = new THREE.DodecahedronGeometry(10);
-            const rockMaterial = new THREE.MeshStandardMaterial({
-                color: 0x8B4513,
-                roughness: 0.9
-            });
-            for (let i = 0; i < 100; i++) {
-                const rock = new THREE.Mesh(rockGeometry, rockMaterial);
-                rock.position.set(
-                    (Math.random() - 0.5) * MAP_SIZE * 0.9,
-                    Math.random() * 10,
-                    (Math.random() - 0.5) * MAP_SIZE * 0.9
-                );
-                rock.rotation.set(
-                    Math.random() * Math.PI,
-                    Math.random() * Math.PI,
-                    Math.random() * Math.PI
-                );
-                rock.castShadow = true;
-                rock.receiveShadow = true;
-                scene.add(rock);
-            }
-        }
-        function loadEnemies() {
-            const loader = new GLTFLoader();
-            const enemyCount = 3 + currentStage;
-            for (let i = 0; i < enemyCount; i++) {
-                const modelPath = ENEMY_MODELS[i % ENEMY_MODELS.length];
-                loader.load(modelPath, (gltf) => {
-                    const enemy = gltf.scene;
-                    enemy.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
-                    // 랜덤 위치에 배치
-                    const angle = (i / enemyCount) * Math.PI * 2;
-                    const radius = 200;
-                    enemy.position.set(
-                        Math.cos(angle) * radius,
-                        10,
-                        Math.sin(angle) * radius
-                    );
-                    enemy.traverse((node) => {
-                        if (node.isMesh) {
-                            node.castShadow = true;
-                            node.receiveShadow = true;
-                            node.material.metalness = 0.2;
-                            node.material.roughness = 0.8;
-                        }
-                    });
-                    scene.add(enemy);
-                    enemies.push({
-                        model: enemy,
-                        health: 100,
-                        speed: 0.3 + (currentStage * 0.1)
-                    });
-                });
-            }
-        }
-        function onClick() {
-            if (!controls.isLocked) {
-                controls.lock();
-                sounds.bgm.play();
-            } else if (ammo > 0) {
-                shoot();
-            }
-        }
-        function onKeyDown(event) {
-            switch (event.code) {
-                case 'KeyR':
-                    reload();
-                    break;
-            }
-        }
-        function onKeyUp(event) {
-            // 키 해제 처리
-        }
-        function shoot() {
-            if (ammo <= 0) return;
-            ammo--;
-            updateAmmoDisplay();
-            const bullet = createBullet();
-            bullets.push(bullet);
-            sounds.gunshot.currentTime = 0;
-            sounds.gunshot.play();
-        }
-        function createBullet() {
-            const bulletGeometry = new THREE.SphereGeometry(0.5);
-            const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
-            const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
-            bullet.position.copy(camera.position);
-            const direction = new THREE.Vector3();
-            camera.getWorldDirection(direction);
-            bullet.velocity = direction.multiplyScalar(3);
-            scene.add(bullet);
-            return bullet;
-        }
-        function reload() {
-            ammo = 30;
-            updateAmmoDisplay();
-        }
-        function updateAmmoDisplay() {
-            document.getElementById('ammo').textContent = `Ammo: ${ammo}/30`;
-        }
-        function animate() {
-            requestAnimationFrame(animate);
-            if (controls.isLocked && !isGameOver) {
-                updateBullets();
-                updateEnemies();
-                checkGameStatus();
-            }
-            renderer.render(scene, camera);
-        }
-        function updateBullets() {
-            // 총알 업데이트 로직
-            for (let i = bullets.length - 1; i >= 0; i--) {
-                bullets[i].position.add(bullets[i].velocity);
-                // 적과의 충돌 체크
-                enemies.forEach(enemy => {
-                    if (bullets[i].position.distanceTo(enemy.model.position) < 5) {
-                        scene.remove(bullets[i]);
-                        bullets.splice(i, 1);
-                        enemy.health -= 25;
-                        if (enemy.health <= 0) {
-                            scene.remove(enemy.model);
-                            enemies = enemies.filter(e => e !== enemy);
-                        }
-                    }
-                });
-                // 범위 벗어난 총알 제거
-                if (bullets[i] && bullets[i].position.distanceTo(camera.position) > 1000) {
-                    scene.remove(bullets[i]);
-                    bullets.splice(i, 1);
-                }
-            }
-        }
-        function updateEnemies() {
-            enemies.forEach(enemy => {
-                const direction = new THREE.Vector3();
-                direction.subVectors(camera.position, enemy.model.position);
-                direction.normalize();
-                enemy.model.position.add(direction.multiplyScalar(enemy.speed));
-                enemy.model.lookAt(camera.position);
-                // 플레이어와의 충돌 체크
-                if (enemy.model.position.distanceTo(camera.position) < 10) {
-                    gameOver(false);
-                }
-            });
-        }
-        function checkGameStatus() {
-            if (enemies.length === 0 && currentStage < 5) {
-                currentStage++;
-                loadEnemies();
-            }
-        }
-        function gameOver(won) {
-            isGameOver = true;
-            controls.unlock();
-            sounds.bgm.pause();
-            alert(won ? 'Mission Complete!' : 'Game Over!');
-            location.reload();
-        }
-        // 화면 크기 조절 처리
-        window.addEventListener('resize', () => {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        });
-        // 게임 시작
-        init();
-        // 마우스 이동 속도 제어
-        const moveState = {
-            forward: false,
-            backward: false,
-            left: false,
-            right: false
-        };
-        // 키보드 이벤트
-        document.addEventListener('keydown', (event) => {
-            switch(event.code) {
-                case 'KeyW': moveState.forward = true; break;
-                case 'KeyS': moveState.backward = true; break;
-                case 'KeyA': moveState.left = true; break;
-                case 'KeyD': moveState.right = true; break;
-            }
-        });
-        document.addEventListener('keyup', (event) => {
-            switch(event.code) {
-                case 'KeyW': moveState.forward = false; break;
-                case 'KeyS': moveState.backward = false; break;
-                case 'KeyA': moveState.left = false; break;
-                case 'KeyD': moveState.right = false; break;
-            }
-        });
-        // 이동 업데이트
-        function updateMovement() {
-            if (controls.isLocked) {
-                const speed = 2.0;
-                if (moveState.forward) controls.moveForward(speed);
-                if (moveState.backward) controls.moveForward(-speed);
-                if (moveState.left) controls.moveRight(-speed);
-                if (moveState.right) controls.moveRight(speed);
-            }
-        }
-        // 메인 게임 루프에 이동 업데이트 추가
-        let lastTime = performance.now();
-        function gameLoop() {
-            const time = performance.now();
-            const delta = (time - lastTime) / 1000;
-            lastTime = time;
-            if (controls.isLocked && !isGameOver) {
-                updateMovement();
-                updateBullets();
-                updateEnemies();
-                checkGameStatus();
-            }
-            renderer.render(scene, camera);
-            requestAnimationFrame(gameLoop);
-        }
-        gameLoop();
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html>
 <head>
+    <title>Combat Helicopter Simulator</title>
     <meta charset="utf-8">
     <style>
         body {
             margin: 0;
             overflow: hidden;
             background: #000;
+            font-family: 'Courier New', monospace;
         }
+        #cockpit-frame {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: 20px solid #2a2a2a;
+            box-sizing: border-box;
+            pointer-events: none;
+            z-index: 1000;
+        }
+        #cockpit-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
+            pointer-events: none;
+            z-index: 999;
+        }
         #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;
         }
         #timer {
             position: absolute;
             top: 10px;
             right: 10px;
+            color: #0f0;
+            background: rgba(0,20,0,0.7);
             padding: 10px;
             font-size: 20px;
+            z-index: 1001;
+            border: 1px solid #0f0;
             border-radius: 5px;
         }
         #crosshair {
+            position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            width: 40px;
+            height: 40px;
+            border: 2px solid rgba(0,255,0,0.7);
+            border-radius: 50%;
+            z-index: 1001;
             pointer-events: none;
         }
+        #crosshair::before,
+        #crosshair::after {
+            content: '';
+            position: absolute;
+            background: rgba(0,255,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: 400px;
             height: 30px;
+            background: rgba(0,20,0,0.7);
+            border: 2px solid #0f0;
+            z-index: 1001;
             border-radius: 15px;
             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;
         }
+        #altitude-indicator,
+        #speed-indicator,
+        #compass {
+            position: fixed;
+            color: #0f0;
+            background: rgba(0,20,0,0.7);
+            padding: 10px;
+            border: 1px solid #0f0;
+            border-radius: 5px;
+            z-index: 1001;
+        }
+        #altitude-indicator {
+            left: 20px;
+            top: 50%;
+        }
+        #speed-indicator {
+            right: 20px;
+            top: 50%;
+        }
+        #compass {
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        #radar {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 200px;
+            height: 200px;
+            background: rgba(0,20,0,0.7);
+            border: 2px solid #0f0;
+            border-radius: 50%;
+            z-index: 1001;
+            overflow: hidden;
+        }
+        .radar-sweep {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 50%;
+            height: 2px;
+            background: linear-gradient(90deg, #0f0, transparent);
+            transform-origin: left center;
+            animation: radar-sweep 4s infinite linear;
+        }
+        .radar-dot {
+            position: absolute;
+            width: 4px;
+            height: 4px;
+            background: #f00;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+        }
+        @keyframes radar-sweep {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
         #stage {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            color: #0f0;
+            background: rgba(0,20,0,0.8);
             padding: 20px;
             font-size: 32px;
+            z-index: 1001;
             border-radius: 10px;
             display: none;
         }
         #gameTimer {
             position: absolute;
             top: 60px;
             right: 10px;
+            color: #0f0;
+            background: rgba(0,20,0,0.7);
             padding: 10px;
             font-size: 20px;
+            z-index: 1001;
+            border: 1px solid #0f0;
             border-radius: 5px;
         }
     </style>
 </head>
 <body>
+    <div id="cockpit-frame"></div>
+    <div id="cockpit-overlay"></div>
     <div id="info">
         Click to start<br>
         WASD - Move Helicopter<br>
     </div>
     <div id="timer">Safe Time: 10s</div>
     <div id="gameTimer">Time: 3:00</div>
+    <div id="crosshair"></div>
     <div id="healthBar"><div id="health"></div></div>
     <div id="ammo">Ammo: 30/30</div>
     <div id="stage">Stage 1</div>
+    <div id="altitude-indicator">ALT: <span>50</span>m</div>
+    <div id="speed-indicator">SPD: <span>0</span>km/h</div>
+    <div id="compass">HDG: <span>0</span>°</div>
+    <div id="radar">
+        <div class="radar-sweep"></div>
+        <div class="radar-targets"></div>
+    </div>
     <script type="importmap">
         {
     </script>
     <script type="module">
+        // [이전에 제공된 JavaScript 코드를 여기에 삽입]
     </script>
 </body>
+</html>