Spaces:

gunship999
/

Gunship-3D-FPS

Running

App Files Files Community

gini1 commited on Dec 10, 2024

Commit

726fff4

verified ·

1 Parent(s): e4c0247

Update index.html

Browse files

Files changed (1) hide show

index.html +90 -320

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <title>Survival Game</title>
     <style>
-        body { margin: 0; font-family: Arial, sans-serif; }
         canvas { display: block; }
         #gameInfo {
             position: absolute;
@@ -13,380 +13,150 @@
             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>

 <head>
     <title>Survival Game</title>
     <style>
+        body { margin: 0; }
         canvas { display: block; }
         #gameInfo {
             position: absolute;
             color: white;
             padding: 10px;
             border-radius: 5px;
+            z-index: 100;
         }
     </style>
 </head>
 <body>
     <div id="gameInfo">
+        Click to start<br>
+        WASD - Move<br>
+        Mouse - Look Around
     </div>
     <script type="module">
+        import * as THREE from 'https://unpkg.com/three@0.149.0/build/three.module.js';
+        import { PointerLockControls } from 'https://unpkg.com/three@0.149.0/examples/jsm/controls/PointerLockControls.js';
+        // 메인 변수
         let scene, camera, renderer, controls;
+        // 초기화 함수
         function init() {
+            // Scene 생성
             scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x87ceeb);  // 하늘색 배경
+            // Camera 설정
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 5, 10);
+            // Renderer 설정
             renderer = new THREE.WebGLRenderer({ antialias: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
             renderer.shadowMap.enabled = true;
             document.body.appendChild(renderer.domElement);
+            // Controls 설정
             controls = new PointerLockControls(camera, document.body);
+            // 클릭 이벤트
+            document.addEventListener('click', function() {
                 controls.lock();
             });
+            // 기본 지형 생성
+            createGround();
+            // 기본 조명 추가
+            addLights();
+            // 테스트용 박스 추가
+            addTestBox();
         }
         // 지형 생성 함수
+        function createGround() {
+            const groundGeometry = new THREE.PlaneGeometry(100, 100);
+            const groundMaterial = new THREE.MeshStandardMaterial({
                 color: 0x3a8c3a,
+                roughness: 0.8,
+                metalness: 0.2
             });
+            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+            ground.rotation.x = -Math.PI / 2;
+            ground.receiveShadow = true;
+            scene.add(ground);
         }
+        // 조명 추가 함수
+        function addLights() {
+            // 주변광
             const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
             scene.add(ambientLight);
+            // 직사광
             const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(20, 30, 20);
             directionalLight.castShadow = true;
             scene.add(directionalLight);
         }
+        // 테스트용 박스 추가
+        function addTestBox() {
+            const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
+            const boxMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
+            const box = new THREE.Mesh(boxGeometry, boxMaterial);
+            box.position.set(0, 1, -5);
+            box.castShadow = true;
+            box.receiveShadow = true;
+            scene.add(box);
+        }
+        // 움직임 관련 변수들
+        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 animate() {
             requestAnimationFrame(animate);
             if (controls.isLocked) {
+                const speed = 0.2;
+                if (moveState.forward) controls.moveForward(speed);
+                if (moveState.backward) controls.moveForward(-speed);
+                if (moveState.left) controls.moveRight(-speed);
+                if (moveState.right) controls.moveRight(speed);
             }
             renderer.render(scene, camera);
         }
+        // 화면 크기 조정 처리
+        window.addEventListener('resize', onWindowResize, false);
+        function onWindowResize() {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        // 초기화 및 애니메이션 시작
         init();
         animate();
     </script>
 </body>
+</html>