Spaces:

gunship999
/

Gunship-3D-FPS

Running

App Files Files Community

gini1 commited on Dec 10, 2024

Commit

e4c0247

verified ·

1 Parent(s): 2c63faf

Update index.html

Browse files

Files changed (1) hide show

index.html +370 -22

index.html CHANGED Viewed

@@ -1,44 +1,392 @@
-            keys[event.key.toLowerCase()] = true;
         }
-        function onKeyUp(event) {
-            keys[event.key.toLowerCase()] = false;
         }
-        function onMouseMove(event) {
-            const rotSpeed = 0.002;
-            player.rotation.y -= event.movementX * rotSpeed;
         }
-        function movePlayer() {
-            const speed = 0.1;
-            const direction = new THREE.Vector3();
-            if (keys['w']) direction.z -= speed;
-            if (keys['s']) direction.z += speed;
-            if (keys['a']) direction.x -= speed;
-            if (keys['d']) direction.x += speed;
-            direction.applyAxisAngle(new THREE.Vector3(0, 1, 0), player.rotation.y);
-            player.position.add(direction);
-            // Camera follows player
-            camera.position.x = player.position.x;
-            camera.position.z = player.position.z + 5;
-            camera.lookAt(player.position);
         }
         function animate() {
             requestAnimationFrame(animate);
-            movePlayer();
             renderer.render(scene, camera);
         }
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
         });
     </script>
 </body>
-</html>

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Survival Game</title>
+    <style>
+        body { margin: 0; font-family: Arial, sans-serif; }
+        canvas { display: block; }
+        #gameInfo {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
         }
+        #safeTimer {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 20px;
+            border-radius: 10px;
+            font-size: 24px;
+            display: none;
+        }
+        #weaponInfo {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            font-size: 18px;
+            display: none;
+        }
+    </style>
+    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three@0.149.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.149.0/examples/jsm/"
+            }
+        }
+    </script>
+</head>
+<body>
+    <div id="gameInfo">
+        Controls:<br>
+        W/S/A/D - Move<br>
+        SPACE - Jump<br>
+        Mouse - Look Around<br>
+        Survive and find the weapon!
+    </div>
+    <div id="safeTimer"></div>
+    <div id="weaponInfo">Weapon appeared! Get it to win!</div>
+    <script type="module">
+        import * as THREE from 'three';
+        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+        import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
+        let scene, camera, renderer, controls;
+        let playerModel, enemies = [], weapon;
+        let isSafePeriod = true;
+        let gameStartTime = Date.now();
+        const SAFE_PERIOD = 10; // 10초 안전 시간
+        const MAP_SIZE = 2000; // 더 큰 맵 크기
+        const ENEMY_COUNT = 8; // 적의 수 증가
+        let weaponSpawned = false;
+        // 게임 초기화
+        function init() {
+            // 기본 설정
+            scene = new THREE.Scene();
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, MAP_SIZE * 0.6);
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            document.body.appendChild(renderer.domElement);
+            // 포인터 락 컨트롤
+            controls = new PointerLockControls(camera, document.body);
+            // 클릭으로 게임 시작
+            document.addEventListener('click', () => {
+                controls.lock();
+            });
+            // 지형 생성
+            createTerrain();
+            // 조명 설정
+            setupLights();
+            // 플레이어 모델 로드
+            loadPlayerModel();
+            // 적 모델 로드
+            loadEnemies();
+            // 환경 요소 추가
+            createEnvironment();
+            // 무기 스폰 타이머 설정
+            setTimeout(spawnWeapon, getRandomTime(15000, 30000));
+            // 키보드 컨트롤 설정
+            setupControls();
+            // 카메라 초기 위치
+            camera.position.set(0, 5, 0);
+        }
+        // 지형 생성 함수
+        function createTerrain() {
+            const geometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 200, 200);
+            const material = new THREE.MeshStandardMaterial({
+                color: 0x3a8c3a,
+                wireframe: false
+            });
+            // 높낮이 설정
+            const vertices = geometry.attributes.position.array;
+            for (let i = 0; i < vertices.length; i += 3) {
+                vertices[i + 2] = Math.pow(Math.sin(vertices[i] * 0.02) + Math.cos(vertices[i + 1] * 0.02), 2) * 15;
+            }
+            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);
+        }
+        // 조명 설정
+        function setupLights() {
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(1000, 1000, 1000);
+            directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 2048;
+            directionalLight.shadow.mapSize.height = 2048;
+            directionalLight.shadow.camera.near = 0.5;
+            directionalLight.shadow.camera.far = 3000;
+            directionalLight.shadow.camera.left = -1000;
+            directionalLight.shadow.camera.right = 1000;
+            directionalLight.shadow.camera.top = 1000;
+            directionalLight.shadow.camera.bottom = -1000;
+            scene.add(directionalLight);
+        }
+        // 플레이어 모델 로드
+        function loadPlayerModel() {
+            const loader = new GLTFLoader();
+            loader.load('me.glb', (gltf) => {
+                playerModel = gltf.scene;
+                playerModel.scale.set(0.5, 0.5, 0.5);
+                playerModel.castShadow = true;
+                playerModel.receiveShadow = true;
+                scene.add(playerModel);
+                playerModel.traverse((node) => {
+                    if (node.isMesh) {
+                        node.castShadow = true;
+                        node.receiveShadow = true;
+                    }
+                });
+            });
         }
+        // 적 로드 및 생성
+        function loadEnemies() {
+            const loader = new GLTFLoader();
+            loader.load('enemy.glb', (gltf) => {
+                const enemyModel = gltf.scene;
+                for (let i = 0; i < ENEMY_COUNT; i++) {
+                    const enemy = enemyModel.clone();
+                    enemy.scale.set(0.5, 0.5, 0.5);
+                    enemy.position.set(
+                        (Math.random() - 0.5) * MAP_SIZE * 0.8,
+                        5,
+                        (Math.random() - 0.5) * MAP_SIZE * 0.8
+                    );
+                    enemy.castShadow = true;
+                    enemy.receiveShadow = true;
+                    scene.add(enemy);
+                    enemies.push({
+                        model: enemy,
+                        velocity: new THREE.Vector3(),
+                        speed: 0.3 + Math.random() * 0.3
+                    });
+                }
+            });
         }
+        // 환경 요소 생성
+        function createEnvironment() {
+            // 나무 생성
+            const treeGeometry = new THREE.CylinderGeometry(0, 4, 20, 8);
+            const treeMaterial = new THREE.MeshStandardMaterial({ color: 0x0d5c0d });
+            for (let i = 0; i < 500; i++) {
+                const tree = new THREE.Mesh(treeGeometry, treeMaterial);
+                tree.position.set(
+                    (Math.random() - 0.5) * MAP_SIZE * 0.9,
+                    10,
+                    (Math.random() - 0.5) * MAP_SIZE * 0.9
+                );
+                tree.castShadow = true;
+                tree.receiveShadow = true;
+                scene.add(tree);
+            }
+            // 바위 생성
+            const rockGeometry = new THREE.DodecahedronGeometry(3);
+            const rockMaterial = new THREE.MeshStandardMaterial({ color: 0x666666 });
+            for (let i = 0; i < 200; i++) {
+                const rock = new THREE.Mesh(rockGeometry, rockMaterial);
+                rock.position.set(
+                    (Math.random() - 0.5) * MAP_SIZE * 0.9,
+                    3,
+                    (Math.random() - 0.5) * MAP_SIZE * 0.9
+                );
+                rock.castShadow = true;
+                rock.receiveShadow = true;
+                scene.add(rock);
+            }
+            // 안개 추가
+            scene.fog = new THREE.Fog(0xcce0ff, 0, MAP_SIZE * 0.3);
+        }
+        // 무기 생성
+        function spawnWeapon() {
+            const weaponGeometry = new THREE.BoxGeometry(2, 0.5, 8);
+            const weaponMaterial = new THREE.MeshStandardMaterial({
+                color: 0xffd700,
+                metalness: 0.7,
+                roughness: 0.3,
+                emissive: 0xffd700,
+                emissiveIntensity: 0.5
+            });
+            weapon = new THREE.Mesh(weaponGeometry, weaponMaterial);
+            weapon.position.set(
+                (Math.random() - 0.5) * MAP_SIZE * 0.6,
+                5,
+                (Math.random() - 0.5) * MAP_SIZE * 0.6
+            );
+            weapon.rotation.y = Math.random() * Math.PI * 2;
+            weapon.castShadow = true;
+            scene.add(weapon);
+            weaponSpawned = true;
+            // 무기 출현 알림 표시
+            const weaponInfo = document.getElementById('weaponInfo');
+            weaponInfo.style.display = 'block';
+            setTimeout(() => weaponInfo.style.display = 'none', 5000);
+        }
+        // 랜덤 시간 생성
+        function getRandomTime(min, max) {
+            return Math.floor(Math.random() * (max - min)) + min;
         }
+        // 컨트롤 설정
+        function setupControls() {
+            const moveState = {
+                forward: false,
+                backward: false,
+                left: false,
+                right: false,
+                jump: 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 victory() {
+            alert('Congratulations! You found the weapon and won!');
+            location.reload();
+        }
+        // 게임 오버
+        function gameOver() {
+            alert('Game Over! You were caught!');
+            location.reload();
+        }
+        // 애니메이션 루프
         function animate() {
             requestAnimationFrame(animate);
+            if (controls.isLocked) {
+                // 안전 시간 체크
+                const elapsedTime = Math.floor((Date.now() - gameStartTime) / 1000);
+                const remainingTime = SAFE_PERIOD - elapsedTime;
+                const safeTimer = document.getElementById('safeTimer');
+                if (remainingTime > 0) {
+                    safeTimer.style.display = 'block';
+                    safeTimer.textContent = `Safe Period: ${remainingTime}s`;
+                    isSafePeriod = true;
+                } else {
+                    safeTimer.style.display = 'none';
+                    isSafePeriod = false;
+                }
+                // 적 업데이트
+                enemies.forEach(enemy => {
+                    if (!isSafePeriod) {
+                        const direction = new THREE.Vector3();
+                        direction.subVectors(camera.position, enemy.model.position);
+                        direction.y = 0;
+                        direction.normalize();
+                        enemy.velocity.add(direction.multiplyScalar(enemy.speed));
+                        enemy.velocity.multiplyScalar(0.98);
+                        enemy.model.position.add(enemy.velocity);
+                        // 적과의 충돌 체크
+                        if (enemy.model.position.distanceTo(camera.position) < 3) {
+                            gameOver();
+                        }
+                        // 적 회전
+                        enemy.model.lookAt(camera.position);
+                    }
+                });
+                // 무기와의 충돌 체크
+                if (weaponSpawned && weapon) {
+                    if (weapon.position.distanceTo(camera.position) < 3) {
+                        victory();
+                    }
+                }
+                // 플레이어 모델 업데이트
+                if (playerModel) {
+                    playerModel.position.copy(camera.position);
+                    playerModel.position.y -= 2;
+                    playerModel.rotation.y = camera.rotation.y;
+                }
+            }
             renderer.render(scene, camera);
         }
+        // 윈도우 리사이즈 처리
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window
+renderer.setSize(window.innerWidth, window.innerHeight);
         });
+        // 게임 시작
+        init();
+        animate();
     </script>
 </body>
+</html>