Spaces:
Running
Running
gini1
commited on
Commit
β’
a7d011b
1
Parent(s):
3ad9530
Update index.html
Browse files- index.html +199 -99
index.html
CHANGED
@@ -1,7 +1,7 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
-
<title>
|
5 |
<meta charset="utf-8">
|
6 |
<style>
|
7 |
body {
|
@@ -29,7 +29,7 @@
|
|
29 |
background: rgba(0,0,0,0.7);
|
30 |
padding: 10px;
|
31 |
font-family: Arial;
|
32 |
-
font-size:
|
33 |
z-index: 100;
|
34 |
border-radius: 5px;
|
35 |
}
|
@@ -38,7 +38,7 @@
|
|
38 |
top: 50%;
|
39 |
left: 50%;
|
40 |
transform: translate(-50%, -50%);
|
41 |
-
color: rgba(255,
|
42 |
font-size: 24px;
|
43 |
z-index: 100;
|
44 |
user-select: none;
|
@@ -48,18 +48,18 @@
|
|
48 |
position: absolute;
|
49 |
bottom: 20px;
|
50 |
left: 20px;
|
51 |
-
width:
|
52 |
-
height:
|
53 |
background: rgba(0,0,0,0.5);
|
54 |
-
border:
|
55 |
z-index: 100;
|
56 |
-
border-radius:
|
57 |
overflow: hidden;
|
58 |
}
|
59 |
#health {
|
60 |
width: 100%;
|
61 |
height: 100%;
|
62 |
-
background: #ff3333;
|
63 |
transition: width 0.3s;
|
64 |
}
|
65 |
#ammo {
|
@@ -70,7 +70,33 @@
|
|
70 |
background: rgba(0,0,0,0.7);
|
71 |
padding: 10px;
|
72 |
font-family: Arial;
|
73 |
-
font-size:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
74 |
z-index: 100;
|
75 |
border-radius: 5px;
|
76 |
}
|
@@ -79,15 +105,18 @@
|
|
79 |
<body>
|
80 |
<div id="info">
|
81 |
Click to start<br>
|
82 |
-
WASD - Move<br>
|
83 |
-
Mouse -
|
84 |
Left Click - Shoot<br>
|
85 |
-
R - Reload
|
|
|
86 |
</div>
|
87 |
<div id="timer">Safe Time: 10s</div>
|
|
|
88 |
<div id="crosshair">+</div>
|
89 |
<div id="healthBar"><div id="health"></div></div>
|
90 |
<div id="ammo">Ammo: 30/30</div>
|
|
|
91 |
|
92 |
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
|
93 |
|
@@ -105,19 +134,33 @@
|
|
105 |
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
106 |
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
|
107 |
|
108 |
-
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
109 |
let scene, camera, renderer, controls;
|
110 |
-
let enemies = [], bullets = [];
|
111 |
-
let enemyBullets = [];
|
112 |
let isGameOver = false;
|
113 |
let isSafePeriod = true;
|
114 |
let startTime = 0;
|
115 |
-
let
|
|
|
116 |
let ammo = 30;
|
|
|
117 |
const maxAmmo = 30;
|
118 |
-
|
119 |
-
|
120 |
-
const
|
|
|
|
|
|
|
|
|
|
|
121 |
|
122 |
// Scene μ΄κΈ°ν
|
123 |
function initScene() {
|
@@ -126,7 +169,7 @@
|
|
126 |
scene.fog = new THREE.Fog(0x87ceeb, 0, 500);
|
127 |
|
128 |
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
129 |
-
camera.position.set(0,
|
130 |
|
131 |
renderer = new THREE.WebGLRenderer({ antialias: true });
|
132 |
renderer.setSize(window.innerWidth, window.innerHeight);
|
@@ -135,27 +178,29 @@
|
|
135 |
document.body.appendChild(renderer.domElement);
|
136 |
|
137 |
// μ‘°λͺ
|
138 |
-
const ambientLight = new THREE.AmbientLight(0xffffff, 1.
|
139 |
scene.add(ambientLight);
|
140 |
|
141 |
-
const dirLight = new THREE.DirectionalLight(0xffffff, 1.
|
142 |
dirLight.position.set(50, 50, 0);
|
143 |
dirLight.castShadow = true;
|
144 |
-
dirLight.shadow.mapSize.width =
|
145 |
-
dirLight.shadow.mapSize.height =
|
146 |
dirLight.shadow.camera.far = 300;
|
147 |
scene.add(dirLight);
|
148 |
|
149 |
// λ°μ¬κ΄
|
150 |
-
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.
|
151 |
scene.add(hemiLight);
|
152 |
}
|
153 |
|
154 |
// μ΄μ μμ±
|
155 |
function createBullet(isEnemy = false) {
|
156 |
-
const bulletGeometry = new THREE.SphereGeometry(0.
|
157 |
const bulletMaterial = new THREE.MeshBasicMaterial({
|
158 |
-
color: isEnemy ? 0xff0000 : 0xffff00
|
|
|
|
|
159 |
});
|
160 |
const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
|
161 |
|
@@ -164,6 +209,8 @@
|
|
164 |
const direction = new THREE.Vector3();
|
165 |
camera.getWorldDirection(direction);
|
166 |
bullet.velocity = direction.multiplyScalar(2);
|
|
|
|
|
167 |
}
|
168 |
|
169 |
scene.add(bullet);
|
@@ -179,23 +226,29 @@
|
|
179 |
|
180 |
const bullet = createBullet();
|
181 |
bullets.push(bullet);
|
182 |
-
|
183 |
-
// λ°μ¬ μ¬μ΄λλ μ΄ννΈλ₯Ό μΆκ°ν μ μμ
|
184 |
}
|
185 |
|
186 |
// μ λ°μ¬
|
187 |
function enemyShoot(enemy) {
|
|
|
|
|
188 |
const bullet = createBullet(true);
|
189 |
bullet.position.copy(enemy.model.position);
|
190 |
|
191 |
const direction = new THREE.Vector3();
|
192 |
direction.subVectors(camera.position, enemy.model.position);
|
193 |
direction.normalize();
|
194 |
-
bullet.velocity = direction.multiplyScalar(1);
|
195 |
|
196 |
enemyBullets.push(bullet);
|
197 |
}
|
198 |
|
|
|
|
|
|
|
|
|
|
|
|
|
199 |
// μ΄μ μ
λ°μ΄νΈ
|
200 |
function updateBullets() {
|
201 |
// νλ μ΄μ΄ μ΄μ
|
@@ -204,7 +257,7 @@
|
|
204 |
|
205 |
// μ κ³Όμ μΆ©λ 체ν¬
|
206 |
enemies.forEach(enemy => {
|
207 |
-
if (bullets[i].position.distanceTo(enemy.model.position) <
|
208 |
scene.remove(bullets[i]);
|
209 |
bullets.splice(i, 1);
|
210 |
enemy.health -= 25;
|
@@ -212,13 +265,14 @@
|
|
212 |
if (enemy.health <= 0) {
|
213 |
scene.remove(enemy.model);
|
214 |
enemies = enemies.filter(e => e !== enemy);
|
|
|
215 |
}
|
216 |
return;
|
217 |
}
|
218 |
});
|
219 |
|
220 |
// μλͺ
μ ν
|
221 |
-
if (bullets[i] && bullets[i].position.distanceTo(camera.position) >
|
222 |
scene.remove(bullets[i]);
|
223 |
bullets.splice(i, 1);
|
224 |
}
|
@@ -229,10 +283,10 @@
|
|
229 |
enemyBullets[i].position.add(enemyBullets[i].velocity);
|
230 |
|
231 |
// νλ μ΄μ΄μμ μΆ©λ 체ν¬
|
232 |
-
if (enemyBullets[i].position.distanceTo(camera.position) <
|
233 |
scene.remove(enemyBullets[i]);
|
234 |
enemyBullets.splice(i, 1);
|
235 |
-
playerHealth -=
|
236 |
updateHealthBar();
|
237 |
|
238 |
if (playerHealth <= 0) {
|
@@ -242,22 +296,59 @@
|
|
242 |
}
|
243 |
|
244 |
// μλͺ
μ ν
|
245 |
-
if (enemyBullets[i] && enemyBullets[i].position.distanceTo(camera.position) >
|
246 |
scene.remove(enemyBullets[i]);
|
247 |
enemyBullets.splice(i, 1);
|
248 |
}
|
249 |
}
|
250 |
}
|
251 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
252 |
function updateHealthBar() {
|
253 |
const healthBar = document.getElementById('health');
|
254 |
-
healthBar.style.width = `${playerHealth}%`;
|
255 |
}
|
256 |
|
257 |
function updateAmmoDisplay() {
|
258 |
document.getElementById('ammo').textContent = `Ammo: ${ammo}/${maxAmmo}`;
|
259 |
}
|
260 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
261 |
// μ¬μ₯μ
|
262 |
function reload() {
|
263 |
ammo = maxAmmo;
|
@@ -266,7 +357,7 @@
|
|
266 |
|
267 |
// μ§ν μμ±
|
268 |
function createTerrain() {
|
269 |
-
const geometry = new THREE.PlaneGeometry(
|
270 |
const material = new THREE.MeshStandardMaterial({
|
271 |
color: 0x3a8c3a,
|
272 |
roughness: 0.6,
|
@@ -275,7 +366,7 @@
|
|
275 |
|
276 |
const vertices = geometry.attributes.position.array;
|
277 |
for (let i = 0; i < vertices.length; i += 3) {
|
278 |
-
vertices[i + 2] = Math.
|
279 |
}
|
280 |
geometry.attributes.position.needsUpdate = true;
|
281 |
geometry.computeVertexNormals();
|
@@ -289,29 +380,34 @@
|
|
289 |
// μ λ‘λ
|
290 |
function loadEnemies() {
|
291 |
const loader = new GLTFLoader();
|
292 |
-
|
293 |
-
|
294 |
-
|
295 |
-
|
296 |
-
|
297 |
-
const enemy =
|
298 |
-
enemy.scale.set(
|
299 |
|
300 |
-
const angle = (i /
|
301 |
-
const radius =
|
302 |
enemy.position.set(
|
303 |
Math.cos(angle) * radius,
|
304 |
-
|
305 |
Math.sin(angle) * radius
|
306 |
);
|
307 |
|
308 |
enemy.traverse((node) => {
|
309 |
if (node.isMesh) {
|
310 |
-
node.material = node.material.clone();
|
311 |
node.material.metalness = 0.3;
|
312 |
node.material.roughness = 0.5;
|
313 |
node.castShadow = true;
|
314 |
-
node
|
|
|
|
|
|
|
|
|
|
|
315 |
}
|
316 |
});
|
317 |
|
@@ -319,20 +415,24 @@
|
|
319 |
enemies.push({
|
320 |
model: enemy,
|
321 |
health: 100,
|
322 |
-
speed: 0.2,
|
323 |
velocity: new THREE.Vector3(),
|
324 |
-
lastShot: 0
|
|
|
325 |
});
|
326 |
-
|
327 |
-
|
328 |
-
|
329 |
-
|
330 |
-
|
331 |
-
|
332 |
-
|
333 |
-
|
334 |
-
|
335 |
-
|
|
|
|
|
|
|
336 |
}
|
337 |
|
338 |
// 컨νΈλ‘€ μ΄κΈ°ν
|
@@ -346,7 +446,6 @@
|
|
346 |
right: false
|
347 |
};
|
348 |
|
349 |
-
// ν€λ³΄λ μ΄λ²€νΈ
|
350 |
document.addEventListener('keydown', (event) => {
|
351 |
switch(event.code) {
|
352 |
case 'KeyW': moveState.forward = true; break;
|
@@ -366,20 +465,20 @@
|
|
366 |
}
|
367 |
});
|
368 |
|
369 |
-
// λ§μ°μ€ μ΄λ²€νΈ
|
370 |
document.addEventListener('click', () => {
|
371 |
if (controls.isLocked) {
|
372 |
shoot();
|
373 |
} else {
|
374 |
controls.lock();
|
|
|
|
|
|
|
|
|
375 |
}
|
376 |
});
|
377 |
|
378 |
controls.addEventListener('lock', () => {
|
379 |
document.getElementById('info').style.display = 'none';
|
380 |
-
if (!startTime) {
|
381 |
-
startTime = Date.now();
|
382 |
-
}
|
383 |
});
|
384 |
|
385 |
controls.addEventListener('unlock', () => {
|
@@ -393,12 +492,25 @@
|
|
393 |
function updateEnemies() {
|
394 |
if (!isSafePeriod) {
|
395 |
enemies.forEach(enemy => {
|
396 |
-
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
397 |
const direction = new THREE.Vector3();
|
398 |
-
direction.
|
399 |
-
direction.
|
400 |
direction.normalize();
|
401 |
|
|
|
402 |
enemy.velocity.lerp(direction.multiplyScalar(enemy.speed), 0.02);
|
403 |
enemy.model.position.add(enemy.velocity);
|
404 |
|
@@ -407,22 +519,23 @@
|
|
407 |
|
408 |
// λ°μ¬ λ‘μ§
|
409 |
const now = Date.now();
|
410 |
-
|
|
|
411 |
enemyShoot(enemy);
|
412 |
enemy.lastShot = now;
|
413 |
}
|
414 |
});
|
415 |
}
|
416 |
-
|
417 |
-
}
|
418 |
|
419 |
// κ²μ μ€λ² μ²λ¦¬
|
420 |
function gameOver(won) {
|
421 |
if (!isGameOver) {
|
422 |
isGameOver = true;
|
423 |
controls.unlock();
|
|
|
424 |
setTimeout(() => {
|
425 |
-
alert(won ? 'You
|
426 |
location.reload();
|
427 |
}, 100);
|
428 |
}
|
@@ -434,26 +547,15 @@
|
|
434 |
createTerrain();
|
435 |
loadEnemies();
|
436 |
const moveState = initControls();
|
|
|
437 |
|
438 |
// κ²μ 루ν
|
439 |
function animate() {
|
440 |
requestAnimationFrame(animate);
|
441 |
|
442 |
if (controls.isLocked && !isGameOver) {
|
443 |
-
// μμ μκ° μ²΄ν¬
|
444 |
-
if (startTime) {
|
445 |
-
const elapsed = Math.floor((Date.now() - startTime) / 1000);
|
446 |
-
const remaining = SAFE_TIME - elapsed;
|
447 |
-
if (remaining > 0) {
|
448 |
-
document.getElementById('timer').textContent = `Safe Time: ${remaining}s`;
|
449 |
-
} else {
|
450 |
-
document.getElementById('timer').textContent = '';
|
451 |
-
isSafePeriod = false;
|
452 |
-
}
|
453 |
-
}
|
454 |
-
|
455 |
// μ΄λ μ²λ¦¬
|
456 |
-
const speed = 0.
|
457 |
if (moveState.forward) controls.moveForward(speed);
|
458 |
if (moveState.backward) controls.moveForward(-speed);
|
459 |
if (moveState.left) controls.moveRight(-speed);
|
@@ -465,27 +567,25 @@
|
|
465 |
// μ μ
λ°μ΄νΈ
|
466 |
updateEnemies();
|
467 |
|
468 |
-
//
|
469 |
-
|
470 |
-
gameOver(true);
|
471 |
-
}
|
472 |
}
|
473 |
|
474 |
renderer.render(scene, camera);
|
475 |
}
|
476 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
477 |
animate();
|
478 |
}
|
479 |
|
480 |
-
// νλ©΄ ν¬κΈ° μ‘°μ μ²λ¦¬
|
481 |
-
window.addEventListener('resize', () => {
|
482 |
-
camera.aspect = window.innerWidth / window.innerHeight;
|
483 |
-
camera.updateProjectionMatrix();
|
484 |
-
renderer.setSize(window.innerWidth, window.innerHeight);
|
485 |
-
});
|
486 |
-
|
487 |
// κ²μ μμ
|
488 |
init();
|
489 |
</script>
|
490 |
</body>
|
491 |
-
</html>
|
|
|
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
+
<title>Helicopter Combat Game</title>
|
5 |
<meta charset="utf-8">
|
6 |
<style>
|
7 |
body {
|
|
|
29 |
background: rgba(0,0,0,0.7);
|
30 |
padding: 10px;
|
31 |
font-family: Arial;
|
32 |
+
font-size: 20px;
|
33 |
z-index: 100;
|
34 |
border-radius: 5px;
|
35 |
}
|
|
|
38 |
top: 50%;
|
39 |
left: 50%;
|
40 |
transform: translate(-50%, -50%);
|
41 |
+
color: rgba(255, 0, 0, 0.8);
|
42 |
font-size: 24px;
|
43 |
z-index: 100;
|
44 |
user-select: none;
|
|
|
48 |
position: absolute;
|
49 |
bottom: 20px;
|
50 |
left: 20px;
|
51 |
+
width: 400px;
|
52 |
+
height: 30px;
|
53 |
background: rgba(0,0,0,0.5);
|
54 |
+
border: 3px solid white;
|
55 |
z-index: 100;
|
56 |
+
border-radius: 15px;
|
57 |
overflow: hidden;
|
58 |
}
|
59 |
#health {
|
60 |
width: 100%;
|
61 |
height: 100%;
|
62 |
+
background: linear-gradient(90deg, #ff3333, #ff0000);
|
63 |
transition: width 0.3s;
|
64 |
}
|
65 |
#ammo {
|
|
|
70 |
background: rgba(0,0,0,0.7);
|
71 |
padding: 10px;
|
72 |
font-family: Arial;
|
73 |
+
font-size: 20px;
|
74 |
+
z-index: 100;
|
75 |
+
border-radius: 5px;
|
76 |
+
}
|
77 |
+
#stage {
|
78 |
+
position: absolute;
|
79 |
+
top: 50%;
|
80 |
+
left: 50%;
|
81 |
+
transform: translate(-50%, -50%);
|
82 |
+
color: white;
|
83 |
+
background: rgba(0,0,0,0.8);
|
84 |
+
padding: 20px;
|
85 |
+
font-family: Arial;
|
86 |
+
font-size: 32px;
|
87 |
+
z-index: 100;
|
88 |
+
border-radius: 10px;
|
89 |
+
display: none;
|
90 |
+
}
|
91 |
+
#gameTimer {
|
92 |
+
position: absolute;
|
93 |
+
top: 60px;
|
94 |
+
right: 10px;
|
95 |
+
color: white;
|
96 |
+
background: rgba(0,0,0,0.7);
|
97 |
+
padding: 10px;
|
98 |
+
font-family: Arial;
|
99 |
+
font-size: 20px;
|
100 |
z-index: 100;
|
101 |
border-radius: 5px;
|
102 |
}
|
|
|
105 |
<body>
|
106 |
<div id="info">
|
107 |
Click to start<br>
|
108 |
+
WASD - Move Helicopter<br>
|
109 |
+
Mouse - Aim<br>
|
110 |
Left Click - Shoot<br>
|
111 |
+
R - Reload<br>
|
112 |
+
Survive 3 minutes!
|
113 |
</div>
|
114 |
<div id="timer">Safe Time: 10s</div>
|
115 |
+
<div id="gameTimer">Time: 3:00</div>
|
116 |
<div id="crosshair">+</div>
|
117 |
<div id="healthBar"><div id="health"></div></div>
|
118 |
<div id="ammo">Ammo: 30/30</div>
|
119 |
+
<div id="stage">Stage 1</div>
|
120 |
|
121 |
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
|
122 |
|
|
|
134 |
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
135 |
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
|
136 |
|
137 |
+
// κ²μ μμ
|
138 |
+
const GAME_DURATION = 180; // 3λΆ
|
139 |
+
const MAX_STAGES = 5;
|
140 |
+
const ENEMY_MODELS = ['1.GLB', '2.GLB', '3.GLB', '4.GLB'];
|
141 |
+
const HELICOPTER_HEIGHT = 30; // ν¬κΈ° λμ΄
|
142 |
+
const ENEMY_SCALE = 2.5; // μ ν¬κΈ°
|
143 |
+
const MAX_HEALTH = 1000; // μ¦κ°λ 체λ ₯
|
144 |
+
|
145 |
+
// κ²μ λ³μ
|
146 |
let scene, camera, renderer, controls;
|
147 |
+
let enemies = [], bullets = [], enemyBullets = [];
|
|
|
148 |
let isGameOver = false;
|
149 |
let isSafePeriod = true;
|
150 |
let startTime = 0;
|
151 |
+
let gameStartTime = 0;
|
152 |
+
let playerHealth = MAX_HEALTH;
|
153 |
let ammo = 30;
|
154 |
+
let currentStage = 1;
|
155 |
const maxAmmo = 30;
|
156 |
+
|
157 |
+
// μ¬μ΄λ μμ€ν
|
158 |
+
const sounds = {
|
159 |
+
bgm: new Audio('Music.wav'),
|
160 |
+
gunshot: new Audio('gun.wav')
|
161 |
+
};
|
162 |
+
|
163 |
+
sounds.bgm.loop = true;
|
164 |
|
165 |
// Scene μ΄κΈ°ν
|
166 |
function initScene() {
|
|
|
169 |
scene.fog = new THREE.Fog(0x87ceeb, 0, 500);
|
170 |
|
171 |
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
172 |
+
camera.position.set(0, HELICOPTER_HEIGHT, 0);
|
173 |
|
174 |
renderer = new THREE.WebGLRenderer({ antialias: true });
|
175 |
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
178 |
document.body.appendChild(renderer.domElement);
|
179 |
|
180 |
// μ‘°λͺ
|
181 |
+
const ambientLight = new THREE.AmbientLight(0xffffff, 1.2);
|
182 |
scene.add(ambientLight);
|
183 |
|
184 |
+
const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
|
185 |
dirLight.position.set(50, 50, 0);
|
186 |
dirLight.castShadow = true;
|
187 |
+
dirLight.shadow.mapSize.width = 4096;
|
188 |
+
dirLight.shadow.mapSize.height = 4096;
|
189 |
dirLight.shadow.camera.far = 300;
|
190 |
scene.add(dirLight);
|
191 |
|
192 |
// λ°μ¬κ΄
|
193 |
+
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.8);
|
194 |
scene.add(hemiLight);
|
195 |
}
|
196 |
|
197 |
// μ΄μ μμ±
|
198 |
function createBullet(isEnemy = false) {
|
199 |
+
const bulletGeometry = new THREE.SphereGeometry(0.2, 8, 8);
|
200 |
const bulletMaterial = new THREE.MeshBasicMaterial({
|
201 |
+
color: isEnemy ? 0xff0000 : 0xffff00,
|
202 |
+
emissive: isEnemy ? 0xff0000 : 0xffff00,
|
203 |
+
emissiveIntensity: 1
|
204 |
});
|
205 |
const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
|
206 |
|
|
|
209 |
const direction = new THREE.Vector3();
|
210 |
camera.getWorldDirection(direction);
|
211 |
bullet.velocity = direction.multiplyScalar(2);
|
212 |
+
sounds.gunshot.currentTime = 0;
|
213 |
+
sounds.gunshot.play();
|
214 |
}
|
215 |
|
216 |
scene.add(bullet);
|
|
|
226 |
|
227 |
const bullet = createBullet();
|
228 |
bullets.push(bullet);
|
|
|
|
|
229 |
}
|
230 |
|
231 |
// μ λ°μ¬
|
232 |
function enemyShoot(enemy) {
|
233 |
+
if (Math.random() > getFireRate()) return;
|
234 |
+
|
235 |
const bullet = createBullet(true);
|
236 |
bullet.position.copy(enemy.model.position);
|
237 |
|
238 |
const direction = new THREE.Vector3();
|
239 |
direction.subVectors(camera.position, enemy.model.position);
|
240 |
direction.normalize();
|
241 |
+
bullet.velocity = direction.multiplyScalar(1.5);
|
242 |
|
243 |
enemyBullets.push(bullet);
|
244 |
}
|
245 |
|
246 |
+
// μ€ν
μ΄μ§λ³ λ°μ¬ νλ₯
|
247 |
+
function getFireRate() {
|
248 |
+
const baseRate = 0.01;
|
249 |
+
return baseRate * (1 + (currentStage - 1) * 0.5);
|
250 |
+
}
|
251 |
+
|
252 |
// μ΄μ μ
λ°μ΄νΈ
|
253 |
function updateBullets() {
|
254 |
// νλ μ΄μ΄ μ΄μ
|
|
|
257 |
|
258 |
// μ κ³Όμ μΆ©λ 체ν¬
|
259 |
enemies.forEach(enemy => {
|
260 |
+
if (bullets[i].position.distanceTo(enemy.model.position) < 4) {
|
261 |
scene.remove(bullets[i]);
|
262 |
bullets.splice(i, 1);
|
263 |
enemy.health -= 25;
|
|
|
265 |
if (enemy.health <= 0) {
|
266 |
scene.remove(enemy.model);
|
267 |
enemies = enemies.filter(e => e !== enemy);
|
268 |
+
checkStageCompletion();
|
269 |
}
|
270 |
return;
|
271 |
}
|
272 |
});
|
273 |
|
274 |
// μλͺ
μ ν
|
275 |
+
if (bullets[i] && bullets[i].position.distanceTo(camera.position) > 200) {
|
276 |
scene.remove(bullets[i]);
|
277 |
bullets.splice(i, 1);
|
278 |
}
|
|
|
283 |
enemyBullets[i].position.add(enemyBullets[i].velocity);
|
284 |
|
285 |
// νλ μ΄μ΄μμ μΆ©λ 체ν¬
|
286 |
+
if (enemyBullets[i].position.distanceTo(camera.position) < 3) {
|
287 |
scene.remove(enemyBullets[i]);
|
288 |
enemyBullets.splice(i, 1);
|
289 |
+
playerHealth -= 20;
|
290 |
updateHealthBar();
|
291 |
|
292 |
if (playerHealth <= 0) {
|
|
|
296 |
}
|
297 |
|
298 |
// μλͺ
μ ν
|
299 |
+
if (enemyBullets[i] && enemyBullets[i].position.distanceTo(camera.position) > 200) {
|
300 |
scene.remove(enemyBullets[i]);
|
301 |
enemyBullets.splice(i, 1);
|
302 |
}
|
303 |
}
|
304 |
}
|
305 |
|
306 |
+
// μ€ν
μ΄μ§ μλ£ μ²΄ν¬
|
307 |
+
function checkStageCompletion() {
|
308 |
+
if (enemies.length === 0 && currentStage < MAX_STAGES) {
|
309 |
+
currentStage++;
|
310 |
+
showStageMessage();
|
311 |
+
loadEnemies();
|
312 |
+
}
|
313 |
+
}
|
314 |
+
|
315 |
+
// μ€ν
μ΄μ§ λ©μμ§ νμ
|
316 |
+
function showStageMessage() {
|
317 |
+
const stageDiv = document.getElementById('stage');
|
318 |
+
stageDiv.textContent = `Stage ${currentStage}`;
|
319 |
+
stageDiv.style.display = 'block';
|
320 |
+
setTimeout(() => {
|
321 |
+
stageDiv.style.display = 'none';
|
322 |
+
}, 3000);
|
323 |
+
}
|
324 |
+
|
325 |
+
// UI μ
λ°μ΄νΈ
|
326 |
function updateHealthBar() {
|
327 |
const healthBar = document.getElementById('health');
|
328 |
+
healthBar.style.width = `${(playerHealth / MAX_HEALTH) * 100}%`;
|
329 |
}
|
330 |
|
331 |
function updateAmmoDisplay() {
|
332 |
document.getElementById('ammo').textContent = `Ammo: ${ammo}/${maxAmmo}`;
|
333 |
}
|
334 |
|
335 |
+
function updateGameTimer() {
|
336 |
+
if (!gameStartTime) return;
|
337 |
+
|
338 |
+
const elapsed = Math.floor((Date.now() - gameStartTime) / 1000);
|
339 |
+
const remaining = GAME_DURATION - elapsed;
|
340 |
+
|
341 |
+
if (remaining <= 0) {
|
342 |
+
gameOver(true);
|
343 |
+
return;
|
344 |
+
}
|
345 |
+
|
346 |
+
const minutes = Math.floor(remaining / 60);
|
347 |
+
const seconds = remaining % 60;
|
348 |
+
document.getElementById('gameTimer').textContent =
|
349 |
+
`Time: ${minutes}:${seconds.toString().padStart(2, '0')}`;
|
350 |
+
}
|
351 |
+
|
352 |
// μ¬μ₯μ
|
353 |
function reload() {
|
354 |
ammo = maxAmmo;
|
|
|
357 |
|
358 |
// μ§ν μμ±
|
359 |
function createTerrain() {
|
360 |
+
const geometry = new THREE.PlaneGeometry(500, 500, 100, 100);
|
361 |
const material = new THREE.MeshStandardMaterial({
|
362 |
color: 0x3a8c3a,
|
363 |
roughness: 0.6,
|
|
|
366 |
|
367 |
const vertices = geometry.attributes.position.array;
|
368 |
for (let i = 0; i < vertices.length; i += 3) {
|
369 |
+
vertices[i + 2] = Math.cos(vertices[i] * 0.02) * Math.sin(vertices[i + 1] * 0.02) * 5;
|
370 |
}
|
371 |
geometry.attributes.position.needsUpdate = true;
|
372 |
geometry.computeVertexNormals();
|
|
|
380 |
// μ λ‘λ
|
381 |
function loadEnemies() {
|
382 |
const loader = new GLTFLoader();
|
383 |
+
const enemiesCount = 3 + currentStage;
|
384 |
+
|
385 |
+
for (let i = 0; i < enemiesCount; i++) {
|
386 |
+
const modelPath = ENEMY_MODELS[i % ENEMY_MODELS.length];
|
387 |
+
loader.load(modelPath, (gltf) => {
|
388 |
+
const enemy = gltf.scene;
|
389 |
+
enemy.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
|
390 |
|
391 |
+
const angle = (i / enemiesCount) * Math.PI * 2;
|
392 |
+
const radius = 100;
|
393 |
enemy.position.set(
|
394 |
Math.cos(angle) * radius,
|
395 |
+
5,
|
396 |
Math.sin(angle) * radius
|
397 |
);
|
398 |
|
399 |
enemy.traverse((node) => {
|
400 |
if (node.isMesh) {
|
401 |
+
node.material = node.material.clone();
|
402 |
node.material.metalness = 0.3;
|
403 |
node.material.roughness = 0.5;
|
404 |
node.castShadow = true;
|
405 |
+
node
|
406 |
+
|
407 |
+
|
408 |
+
|
409 |
+
node.material.emissive = new THREE.Color(0x444444);
|
410 |
+
node.material.emissiveIntensity = 0.2;
|
411 |
}
|
412 |
});
|
413 |
|
|
|
415 |
enemies.push({
|
416 |
model: enemy,
|
417 |
health: 100,
|
418 |
+
speed: 0.2 + (currentStage * 0.05),
|
419 |
velocity: new THREE.Vector3(),
|
420 |
+
lastShot: 0,
|
421 |
+
moveTarget: new THREE.Vector3()
|
422 |
});
|
423 |
+
|
424 |
+
updateMoveTarget(enemies[enemies.length - 1]);
|
425 |
+
});
|
426 |
+
}
|
427 |
+
}
|
428 |
+
|
429 |
+
// μ μ μλ‘μ΄ μ΄λ λͺ©νμ μ€μ
|
430 |
+
function updateMoveTarget(enemy) {
|
431 |
+
enemy.moveTarget.set(
|
432 |
+
(Math.random() - 0.5) * 400,
|
433 |
+
5,
|
434 |
+
(Math.random() - 0.5) * 400
|
435 |
+
);
|
436 |
}
|
437 |
|
438 |
// 컨νΈλ‘€ μ΄κΈ°ν
|
|
|
446 |
right: false
|
447 |
};
|
448 |
|
|
|
449 |
document.addEventListener('keydown', (event) => {
|
450 |
switch(event.code) {
|
451 |
case 'KeyW': moveState.forward = true; break;
|
|
|
465 |
}
|
466 |
});
|
467 |
|
|
|
468 |
document.addEventListener('click', () => {
|
469 |
if (controls.isLocked) {
|
470 |
shoot();
|
471 |
} else {
|
472 |
controls.lock();
|
473 |
+
if (!gameStartTime) {
|
474 |
+
gameStartTime = Date.now();
|
475 |
+
sounds.bgm.play();
|
476 |
+
}
|
477 |
}
|
478 |
});
|
479 |
|
480 |
controls.addEventListener('lock', () => {
|
481 |
document.getElementById('info').style.display = 'none';
|
|
|
|
|
|
|
482 |
});
|
483 |
|
484 |
controls.addEventListener('unlock', () => {
|
|
|
492 |
function updateEnemies() {
|
493 |
if (!isSafePeriod) {
|
494 |
enemies.forEach(enemy => {
|
495 |
+
// λͺ©νμ κΉμ§μ λ°©ν₯ κ³μ°
|
496 |
+
const toTarget = new THREE.Vector3();
|
497 |
+
toTarget.subVectors(enemy.moveTarget, enemy.model.position);
|
498 |
+
|
499 |
+
// λͺ©νμ μ κ±°μ λλ¬νμΌλ©΄ μ λͺ©νμ μ€μ
|
500 |
+
if (toTarget.length() < 5) {
|
501 |
+
updateMoveTarget(enemy);
|
502 |
+
}
|
503 |
+
|
504 |
+
// μ΄λ λ°©ν₯ κ²°μ (λͺ©νμ 80%, νλ μ΄μ΄ λ°©ν₯ 20%)
|
505 |
+
const toPlayer = new THREE.Vector3();
|
506 |
+
toPlayer.subVectors(camera.position, enemy.model.position);
|
507 |
+
|
508 |
const direction = new THREE.Vector3();
|
509 |
+
direction.addScaledVector(toTarget.normalize(), 0.8);
|
510 |
+
direction.addScaledVector(toPlayer.normalize(), 0.2);
|
511 |
direction.normalize();
|
512 |
|
513 |
+
// μλ μ μ©
|
514 |
enemy.velocity.lerp(direction.multiplyScalar(enemy.speed), 0.02);
|
515 |
enemy.model.position.add(enemy.velocity);
|
516 |
|
|
|
519 |
|
520 |
// λ°μ¬ λ‘μ§
|
521 |
const now = Date.now();
|
522 |
+
const fireInterval = 2000 - (currentStage * 200); // μ€ν
μ΄μ§κ° μ¬λΌκ°μλ‘ λ°μ¬ κ°κ²© κ°μ
|
523 |
+
if (now - enemy.lastShot > fireInterval) {
|
524 |
enemyShoot(enemy);
|
525 |
enemy.lastShot = now;
|
526 |
}
|
527 |
});
|
528 |
}
|
529 |
+
}
|
|
|
530 |
|
531 |
// κ²μ μ€λ² μ²λ¦¬
|
532 |
function gameOver(won) {
|
533 |
if (!isGameOver) {
|
534 |
isGameOver = true;
|
535 |
controls.unlock();
|
536 |
+
sounds.bgm.pause();
|
537 |
setTimeout(() => {
|
538 |
+
alert(won ? 'Mission Accomplished! You survived!' : 'Game Over! You were eliminated!');
|
539 |
location.reload();
|
540 |
}, 100);
|
541 |
}
|
|
|
547 |
createTerrain();
|
548 |
loadEnemies();
|
549 |
const moveState = initControls();
|
550 |
+
showStageMessage();
|
551 |
|
552 |
// κ²μ 루ν
|
553 |
function animate() {
|
554 |
requestAnimationFrame(animate);
|
555 |
|
556 |
if (controls.isLocked && !isGameOver) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
557 |
// μ΄λ μ²λ¦¬
|
558 |
+
const speed = 0.5;
|
559 |
if (moveState.forward) controls.moveForward(speed);
|
560 |
if (moveState.backward) controls.moveForward(-speed);
|
561 |
if (moveState.left) controls.moveRight(-speed);
|
|
|
567 |
// μ μ
λ°μ΄νΈ
|
568 |
updateEnemies();
|
569 |
|
570 |
+
// κ²μ νμ΄λ¨Έ μ
λ°μ΄νΈ
|
571 |
+
updateGameTimer();
|
|
|
|
|
572 |
}
|
573 |
|
574 |
renderer.render(scene, camera);
|
575 |
}
|
576 |
|
577 |
+
// νλ©΄ ν¬κΈ° μ‘°μ μ²λ¦¬
|
578 |
+
window.addEventListener('resize', () => {
|
579 |
+
camera.aspect = window.innerWidth / window.innerHeight;
|
580 |
+
camera.updateProjectionMatrix();
|
581 |
+
renderer.setSize(window.innerWidth, window.innerHeight);
|
582 |
+
});
|
583 |
+
|
584 |
animate();
|
585 |
}
|
586 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
587 |
// κ²μ μμ
|
588 |
init();
|
589 |
</script>
|
590 |
</body>
|
591 |
+
</html>
|