Spaces:

gunship999
/

Gunship-3D-FPS

Running

App Files Files Community

gini1 commited on 4 days ago

Commit

0d86eb7

•

1 Parent(s): 6ff4d9b

Update index.html

Browse files

Files changed (1) hide show

index.html +319 -14

index.html CHANGED Viewed

@@ -1,46 +1,351 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>Basic Three.js Test</title>
     <style>
         body { margin: 0; }
     </style>
 </head>
 <body>
     <script type="module">
         import * as THREE from 'https://unpkg.com/three@0.157.0/build/three.module.js';
         // 기본 설정
         const scene = new THREE.Scene();
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-        const renderer = new THREE.WebGLRenderer();
         renderer.setSize(window.innerWidth, window.innerHeight);
         document.body.appendChild(renderer.domElement);
-        // 테스트용 큐브 생성
-        const geometry = new THREE.BoxGeometry();
-        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
-        const cube = new THREE.Mesh(geometry, material);
-        scene.add(cube);
-        camera.position.z = 5;
-        // 애니메이션
         function animate() {
             requestAnimationFrame(animate);
-            cube.rotation.x += 0.01;
-            cube.rotation.y += 0.01;
             renderer.render(scene, camera);
         }
-        // 화면 크기 조정 처리
         window.addEventListener('resize', () => {
-            renderer.setSize(window.innerWidth, window.innerHeight);
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
         });
         animate();

 <!DOCTYPE html>
 <html>
 <head>
+    <title>3D Survival Game</title>
     <style>
         body { margin: 0; }
+        #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;
+        }
+        #weaponAlert {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            background: rgba(255,0,0,0.7);
+            padding: 20px;
+            font-family: Arial;
+            font-size: 24px;
+            display: none;
+            z-index: 100;
+            border-radius: 10px;
+        }
+        #safeTimer {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            color: white;
+            background: rgba(0,128,0,0.7);
+            padding: 10px;
+            font-family: Arial;
+            font-size: 18px;
+            z-index: 100;
+            border-radius: 5px;
+        }
     </style>
 </head>
 <body>
+    <div id="info">
+        Click to start<br>
+        WASD - Move<br>
+        Mouse - Look around<br>
+        Find the weapon to win!<br>
+        Avoid the enemies!
+    </div>
+    <div id="weaponAlert">Weapon has appeared!</div>
+    <div id="safeTimer"></div>
     <script type="module">
         import * as THREE from 'https://unpkg.com/three@0.157.0/build/three.module.js';
+        import { GLTFLoader } from 'https://unpkg.com/three@0.157.0/examples/jsm/loaders/GLTFLoader.js';
+        import { PointerLockControls } from 'https://unpkg.com/three@0.157.0/examples/jsm/controls/PointerLockControls.js';
         // 기본 설정
         const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x87ceeb);
+        scene.fog = new THREE.Fog(0x87ceeb, 0, 500);
         const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const 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);
+        // 게임 변수
+        const SAFE_TIME = 15; // 15초 안전시간
+        let gameStartTime = 0;
+        let isSafePeriod = true;
+        let enemies = [];
+        let weapon = null;
+        let playerModel = null;
+        let isGameOver = false;
+        // 포인터 락 컨트롤
+        const controls = new PointerLockControls(camera, document.body);
+        controls.addEventListener('lock', () => {
+            if (!gameStartTime) {
+                gameStartTime = Date.now();
+                setTimeout(spawnWeapon, Math.random() * 10000 + 5000); // 5-15초 사이에 무기 스폰
+            }
+        });
+        // 지형 생성
+        const terrainGeometry = new THREE.PlaneGeometry(500, 500, 100, 100);
+        const terrainMaterial = new THREE.MeshStandardMaterial({
+            color: 0x3a8c3a,
+            roughness: 0.8,
+            metalness: 0.2
+        });
+        // 지형 높낮이 설정
+        const vertices = terrainGeometry.attributes.position.array;
+        for (let i = 0; i < vertices.length; i += 3) {
+            vertices[i + 2] = Math.sin(vertices[i] * 0.05) * Math.cos(vertices[i + 1] * 0.05) * 5;
+        }
+        terrainGeometry.attributes.position.needsUpdate = true;
+        terrainGeometry.computeVertexNormals();
+        const terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
+        terrain.rotation.x = -Math.PI / 2;
+        terrain.receiveShadow = true;
+        scene.add(terrain);
+        // 조명 설정
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(100, 100, 50);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        directionalLight.shadow.camera.near = 0.5;
+        directionalLight.shadow.camera.far = 500;
+        directionalLight.shadow.camera.left = -100;
+        directionalLight.shadow.camera.right = 100;
+        directionalLight.shadow.camera.top = 100;
+        directionalLight.shadow.camera.bottom = -100;
+        scene.add(directionalLight);
+        // 나무 생성
+        function createTrees() {
+            const treeGeometry = new THREE.CylinderGeometry(0, 4, 20, 8);
+            const treeMaterial = new THREE.MeshStandardMaterial({ color: 0x0d5c0d });
+            for (let i = 0; i < 200; i++) {
+                const tree = new THREE.Mesh(treeGeometry, treeMaterial);
+                tree.position.set(
+                    (Math.random() - 0.5) * 400,
+                    10,
+                    (Math.random() - 0.5) * 400
+                );
+                tree.castShadow = true;
+                tree.receiveShadow = true;
+                scene.add(tree);
+            }
+        }
+        // 플레이어 모델 로드
+        const loader = new GLTFLoader();
+        loader.load('me.glb', (gltf) => {
+            playerModel = gltf.scene;
+            playerModel.scale.set(0.5, 0.5, 0.5);
+            playerModel.traverse((node) => {
+                if (node.isMesh) {
+                    node.castShadow = true;
+                    node.receiveShadow = true;
+                }
+            });
+            scene.add(playerModel);
+        });
+        // 적 생성
+        function createEnemies() {
+            loader.load('enemy.glb', (gltf) => {
+                const enemyModel = gltf.scene;
+                for (let i = 0; i < 8; i++) {
+                    const enemy = enemyModel.clone();
+                    enemy.scale.set(0.5, 0.5, 0.5);
+                    // 플레이어로부터 멀리 스폰
+                    const angle = (i / 8) * Math.PI * 2;
+                    const radius = 100;
+                    enemy.position.set(
+                        Math.cos(angle) * radius,
+                        5,
+                        Math.sin(angle) * radius
+                    );
+                    enemy.traverse((node) => {
+                        if (node.isMesh) {
+                            node.castShadow = true;
+                            node.receiveShadow = true;
+                        }
+                    });
+                    scene.add(enemy);
+                    enemies.push({
+                        model: enemy,
+                        velocity: new THREE.Vector3(),
+                        speed: 0.2 + Math.random() * 0.2
+                    });
+                }
+            });
+        }
+        // 무기 스폰
+        function spawnWeapon() {
+            const weaponGeometry = new THREE.BoxGeometry(1, 1, 3);
+            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) * 200,
+                2,
+                (Math.random() - 0.5) * 200
+            );
+            weapon.castShadow = true;
+            scene.add(weapon);
+            // 무기 출현 알림
+            const weaponAlert = document.getElementById('weaponAlert');
+            weaponAlert.style.display = 'block';
+            setTimeout(() => {
+                weaponAlert.style.display = 'none';
+            }, 3000);
+        }
+        // 이동 상태
+        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 gameOver(won = false) {
+            if (!isGameOver) {
+                isGameOver = true;
+                controls.unlock();
+                alert(won ? 'You found the weapon and won!' : 'Game Over! You were caught!');
+                location.reload();
+            }
+        }
+        // 초기 설정
+        camera.position.set(0, 5, 0);
+        createTrees();
+        createEnemies();
+        // 게임 루프
         function animate() {
             requestAnimationFrame(animate);
+            if (controls.isLocked && !isGameOver) {
+                // 안전 시간 체크
+                const elapsedTime = Math.floor((Date.now() - gameStartTime) / 1000);
+                const safeTimer = document.getElementById('safeTimer');
+                if (elapsedTime < SAFE_TIME) {
+                    safeTimer.textContent = `Safe Time: ${SAFE_TIME - elapsedTime}s`;
+                    isSafePeriod = true;
+                } else {
+                    safeTimer.textContent = '';
+                    isSafePeriod = false;
+                }
+                // 이동 처리
+                const speed = 0.5;
+                if (moveState.forward) controls.moveForward(speed);
+                if (moveState.backward) controls.moveForward(-speed);
+                if (moveState.left) controls.moveRight(-speed);
+                if (moveState.right) controls.moveRight(speed);
+                // 플레이어 모델 업데이트
+                if (playerModel) {
+                    playerModel.position.copy(camera.position);
+                    playerModel.position.y -= 2;
+                    // 이동 방향에 따른 회전
+                    if (moveState.forward || moveState.backward || moveState.left || moveState.right) {
+                        const direction = new THREE.Vector3();
+                        camera.getWorldDirection(direction);
+                        playerModel.rotation.y = Math.atan2(direction.x, direction.z);
+                    }
+                }
+                // 적 업데이트
+                if (!isSafePeriod) {
+                    enemies.forEach(enemy => {
+                        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);
+                        // 적 회전
+                        enemy.model.lookAt(camera.position);
+                        // 충돌 체크
+                        if (enemy.model.position.distanceTo(camera.position) < 3) {
+                            gameOver(false);
+                        }
+                    });
+                }
+                // 무기 체크
+                if (weapon) {
+                    weapon.rotation.y += 0.02;
+                    if (camera.position.distanceTo(weapon.position) < 3) {
+                        gameOver(true);
+                    }
+                }
+            }
             renderer.render(scene, camera);
         }
+        // 화면 크기 조정
         window.addEventListener('resize', () => {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        // 시작
+        document.addEventListener('click', () => {
+            controls.lock();
         });
         animate();