Update index.html

index.html

@@ -42,6 +42,22 @@
         #fileUpload.hidden {
             display: none;
         }
+        .custom-file-upload {
+            display: inline-block;
+            padding: 12px 24px;
+            background: #2196F3;
+            color: white;
+            border-radius: 5px;
+            cursor: pointer;
+            margin: 10px 0;
+            transition: background 0.3s;
+        }
+        .custom-file-upload:hover {
+            background: #1976D2;
+        }
+        input[type="file"] {
+            display: none;
+        }
         #startButton {
             margin-top: 10px;
             padding: 10px 20px;
@@ -55,6 +71,22 @@
             background: #666;
             cursor: not-allowed;
         }
+        #selectedFileName {
+            margin-top: 10px;
+            color: #4CAF50;
+        }
+        #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;
+        }
     </style>
     <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
     <script type="importmap">
@@ -85,10 +117,14 @@
     <div id="fileUpload">
         <h2>3D Open World Game</h2>
         <p>Upload your character model (GLB file)</p>
-        <input type="file" id="glbFile" accept=".glb" />
-        <br>
+        <label class="custom-file-upload">
+            Choose GLB File
+            <input type="file" id="glbFile" accept=".glb" />
+        </label>
+        <div id="selectedFileName"></div>
         <button id="startButton" disabled>Start Game</button>
     </div>
+    <div id="safeTimer"></div>
 
     <script type="module">
         import * as THREE from 'three';
@@ -98,15 +134,23 @@
         let scene, camera, renderer, controls;
         let character = null;
         let uploadedModel = null;
+        let hp = 100;
+        let gameStartTime = 0;
+        let isSafePeriod = true;
+        const SAFE_PERIOD = 30; // 30초 안전 시간
 
-        // File upload handling
+        // 파일 업로드 처리
         const fileInput = document.getElementById('glbFile');
         const startButton = document.getElementById('startButton');
         const uploadDiv = document.getElementById('fileUpload');
+        const selectedFileName = document.getElementById('selectedFileName');
+        const safeTimer = document.getElementById('safeTimer');
+        const hpElement = document.getElementById('hp');
 
         fileInput.addEventListener('change', function(e) {
             const file = e.target.files[0];
             if (file) {
+                selectedFileName.textContent = `Selected: ${file.name}`;
                 uploadedModel = URL.createObjectURL(file);
                 startButton.disabled = false;
             }
@@ -119,6 +163,59 @@
             }
         });
 
+        // NPC 클래스
+        class NPC {
+            constructor(position) {
+                const geometry = new THREE.CapsuleGeometry(1, 2, 4, 8);
+                const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
+                this.mesh = new THREE.Mesh(geometry, material);
+                this.mesh.position.copy(position);
+                this.mesh.castShadow = true;
+                this.velocity = new THREE.Vector3();
+                this.direction = new THREE.Vector3();
+                this.speed = 0.05; // 감소된 기본 속도
+                this.damage = 0.5;  // 감소된 데미지
+                scene.add(this.mesh);
+            }
+
+            update(playerPosition) {
+                // 안전 시간 체크
+                if (isSafePeriod) {
+                    const elapsedTime = Math.floor((Date.now() - gameStartTime) / 1000);
+                    const remainingTime = SAFE_PERIOD - elapsedTime;
+                    
+                    if (remainingTime > 0) {
+                        safeTimer.style.display = 'block';
+                        safeTimer.textContent = `Safe Period: ${remainingTime}s`;
+                        return; // NPC 움직임 중지
+                    } else {
+                        safeTimer.style.display = 'none';
+                        isSafePeriod = false;
+                    }
+                }
+
+                // 거리에 따른 속도와 데미지 조절
+                const distance = this.mesh.position.distanceTo(playerPosition);
+                this.speed = Math.min(0.05 + (50 - distance) * 0.001, 0.15);
+
+                this.direction.subVectors(playerPosition, this.mesh.position);
+                this.direction.normalize();
+                this.velocity.add(this.direction.multiplyScalar(this.speed));
+                this.velocity.multiplyScalar(0.95);
+                this.mesh.position.add(this.velocity);
+
+                // 충돌 및 데미지 처리
+                if (distance < 2 && !isSafePeriod) {
+                    hp -= this.damage;
+                    hpElement.textContent = Math.floor(hp);
+                    if (hp <= 0) {
+                        alert('Game Over! Play again?');
+                        location.reload();
+                    }
+                }
+            }
+        }
+
         function initGame() {
             // 기본 설정
             scene = new THREE.Scene();
@@ -128,6 +225,10 @@
             renderer.shadowMap.enabled = true;
             document.body.appendChild(renderer.domElement);
 
+            // 게임 시작 시간 기록
+            gameStartTime = Date.now();
+            isSafePeriod = true;
+
             // 물리 시스템 변수
             const gravity = -0.5;
             let velocity = new THREE.Vector3();
@@ -135,10 +236,6 @@
             let canJump = true;
             let playerHeight = 2;
 
-            // 캐릭터 상태
-            let hp = 100;
-            const hpElement = document.getElementById('hp');
-
             // 포인터 락 컨트롤
             controls = new PointerLockControls(camera, document.body);
 
@@ -230,45 +327,15 @@
                 }
             };
 
-            // NPC 시스템
-            class NPC {
-                constructor(position) {
-                    const geometry = new THREE.CapsuleGeometry(1, 2, 4, 8);
-                    const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
-                    this.mesh = new THREE.Mesh(geometry, material);
-                    this.mesh.position.copy(position);
-                    this.mesh.castShadow = true;
-                    this.velocity = new THREE.Vector3();
-                    this.direction = new THREE.Vector3();
-                    scene.add(this.mesh);
-                }
-
-                update(playerPosition) {
-                    this.direction.subVectors(playerPosition, this.mesh.position);
-                    this.direction.normalize();
-                    this.velocity.add(this.direction.multiplyScalar(0.1));
-                    this.velocity.multiplyScalar(0.95);
-                    this.mesh.position.add(this.velocity);
-
-                    const distance = this.mesh.position.distanceTo(playerPosition);
-                    if (distance < 2) {
-                        hp -= 1;
-                        hpElement.textContent = hp;
-                        if (hp <= 0) {
-                            alert('Game Over!');
-                            location.reload();
-                        }
-                    }
-                }
-            }
-
             // NPC 생성
             const npcs = [];
             for (let i = 0; i < 5; i++) {
+                const angle = (i / 5) * Math.PI * 2;
+                const radius = 100; // 더 멀리 배치
                 const position = new THREE.Vector3(
-                    (Math.random() - 0.5) * 100,
+                    Math.cos(angle) * radius,
                     2,
-                    (Math.random() - 0.5) * 100
+                    Math.sin(angle) * radius
                 );
                 npcs.push(new NPC(position));
             }
@@ -322,7 +389,9 @@
 
             // 바위 생성
             const rockGeometry = new THREE.DodecahedronGeometry(2);
-            const rockMaterial = new THREE.MeshStandardMaterial({ color: 0x666666 });
+            const rockMaterial = new THREE.MeshSt
+
+const rockMaterial = new THREE.MeshStandardMaterial({ color: 0x666666 });
             addEnvironmentObject(rockGeometry, rockMaterial, 50, 1);
 
             // 캐릭터 모델 로드
@@ -392,7 +461,7 @@
                     // 비 업데이트
                     if (rain.visible) {
                         const positions = rain.geometry.attributes.position.array;
-                        for (let i = 1; i < positions.length; i +=3) {
+                        for (let i = 1; i < positions.length; i += 3) {
                             positions[i] -= 2;
                             if (positions[i] < 0) {
                                 positions[i] = 500;
@@ -426,4 +495,4 @@
         };
     </script>
 </body>
-</html>                             
+</html>