Spaces:
Running
Running
gini1
commited on
Update index.html
Browse files- index.html +163 -390
index.html
CHANGED
@@ -1,109 +1,232 @@
|
|
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
-
<title>
|
5 |
<meta charset="utf-8">
|
6 |
<style>
|
7 |
body {
|
8 |
margin: 0;
|
9 |
overflow: hidden;
|
10 |
background: #000;
|
|
|
11 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
12 |
#info {
|
13 |
position: absolute;
|
14 |
top: 10px;
|
15 |
left: 10px;
|
16 |
-
color:
|
17 |
-
background: rgba(0,
|
18 |
padding: 10px;
|
19 |
-
font-family: Arial;
|
20 |
font-size: 14px;
|
21 |
-
z-index:
|
|
|
22 |
border-radius: 5px;
|
23 |
user-select: none;
|
24 |
}
|
|
|
25 |
#timer {
|
26 |
position: absolute;
|
27 |
top: 10px;
|
28 |
right: 10px;
|
29 |
-
color:
|
30 |
-
background: rgba(0,
|
31 |
padding: 10px;
|
32 |
-
font-family: Arial;
|
33 |
font-size: 20px;
|
34 |
-
z-index:
|
|
|
35 |
border-radius: 5px;
|
36 |
}
|
|
|
37 |
#crosshair {
|
38 |
-
position:
|
39 |
top: 50%;
|
40 |
left: 50%;
|
41 |
transform: translate(-50%, -50%);
|
42 |
-
|
43 |
-
|
44 |
-
|
45 |
-
|
|
|
46 |
pointer-events: none;
|
47 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
48 |
#healthBar {
|
49 |
position: absolute;
|
50 |
bottom: 20px;
|
51 |
left: 20px;
|
52 |
width: 400px;
|
53 |
height: 30px;
|
54 |
-
background: rgba(0,
|
55 |
-
border:
|
56 |
-
z-index:
|
57 |
border-radius: 15px;
|
58 |
overflow: hidden;
|
59 |
}
|
|
|
60 |
#health {
|
61 |
width: 100%;
|
62 |
height: 100%;
|
63 |
-
background: linear-gradient(90deg, #
|
64 |
transition: width 0.3s;
|
65 |
}
|
|
|
66 |
#ammo {
|
67 |
position: absolute;
|
68 |
bottom: 20px;
|
69 |
right: 20px;
|
70 |
-
color:
|
71 |
-
background: rgba(0,
|
72 |
padding: 10px;
|
73 |
-
font-family: Arial;
|
74 |
font-size: 20px;
|
75 |
-
z-index:
|
|
|
76 |
border-radius: 5px;
|
77 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
78 |
#stage {
|
79 |
position: absolute;
|
80 |
top: 50%;
|
81 |
left: 50%;
|
82 |
transform: translate(-50%, -50%);
|
83 |
-
color:
|
84 |
-
background: rgba(0,
|
85 |
padding: 20px;
|
86 |
-
font-family: Arial;
|
87 |
font-size: 32px;
|
88 |
-
z-index:
|
89 |
border-radius: 10px;
|
90 |
display: none;
|
91 |
}
|
|
|
92 |
#gameTimer {
|
93 |
position: absolute;
|
94 |
top: 60px;
|
95 |
right: 10px;
|
96 |
-
color:
|
97 |
-
background: rgba(0,
|
98 |
padding: 10px;
|
99 |
-
font-family: Arial;
|
100 |
font-size: 20px;
|
101 |
-
z-index:
|
|
|
102 |
border-radius: 5px;
|
103 |
}
|
104 |
</style>
|
105 |
</head>
|
106 |
<body>
|
|
|
|
|
107 |
<div id="info">
|
108 |
Click to start<br>
|
109 |
WASD - Move Helicopter<br>
|
@@ -113,10 +236,17 @@
|
|
113 |
</div>
|
114 |
<div id="timer">Safe Time: 10s</div>
|
115 |
<div id="gameTimer">Time: 3:00</div>
|
116 |
-
<div id="crosshair"
|
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 type="importmap">
|
122 |
{
|
@@ -128,364 +258,7 @@
|
|
128 |
</script>
|
129 |
|
130 |
<script type="module">
|
131 |
-
|
132 |
-
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
133 |
-
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
|
134 |
-
|
135 |
-
// 게임 상수
|
136 |
-
const GAME_DURATION = 180;
|
137 |
-
const MAP_SIZE = 2000;
|
138 |
-
const HELICOPTER_HEIGHT = 50;
|
139 |
-
const ENEMY_SCALE = 3;
|
140 |
-
const MAX_HEALTH = 1000;
|
141 |
-
const ENEMY_MODELS = ['1.GLB', '2.GLB', '3.GLB', '4.GLB'];
|
142 |
-
|
143 |
-
// 게임 변수
|
144 |
-
let scene, camera, renderer, controls;
|
145 |
-
let enemies = [];
|
146 |
-
let bullets = [];
|
147 |
-
let enemyBullets = [];
|
148 |
-
let playerHealth = MAX_HEALTH;
|
149 |
-
let ammo = 30;
|
150 |
-
let currentStage = 1;
|
151 |
-
let isGameOver = false;
|
152 |
-
|
153 |
-
// 사운드
|
154 |
-
const sounds = {
|
155 |
-
bgm: new Audio('Music.wav'),
|
156 |
-
gunshot: new Audio('gun.wav')
|
157 |
-
};
|
158 |
-
sounds.bgm.loop = true;
|
159 |
-
|
160 |
-
function init() {
|
161 |
-
// Scene 생성
|
162 |
-
scene = new THREE.Scene();
|
163 |
-
scene.background = new THREE.Color(0x87ceeb); // 하늘색
|
164 |
-
scene.fog = new THREE.Fog(0x87ceeb, 0, 1500);
|
165 |
-
|
166 |
-
// Camera 설정
|
167 |
-
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 3000);
|
168 |
-
camera.position.set(0, HELICOPTER_HEIGHT, 0);
|
169 |
-
|
170 |
-
// Renderer 설정
|
171 |
-
renderer = new THREE.WebGLRenderer({ antialias: true });
|
172 |
-
renderer.setSize(window.innerWidth, window.innerHeight);
|
173 |
-
renderer.shadowMap.enabled = true;
|
174 |
-
document.body.appendChild(renderer.domElement);
|
175 |
-
|
176 |
-
// 조명 설정
|
177 |
-
const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);
|
178 |
-
scene.add(ambientLight);
|
179 |
-
|
180 |
-
const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
|
181 |
-
dirLight.position.set(100, 100, 50);
|
182 |
-
dirLight.castShadow = true;
|
183 |
-
scene.add(dirLight);
|
184 |
-
|
185 |
-
// 지형 생성
|
186 |
-
createTerrain();
|
187 |
-
|
188 |
-
// Controls 설정
|
189 |
-
controls = new PointerLockControls(camera, document.body);
|
190 |
-
|
191 |
-
// 이벤트 리스너
|
192 |
-
document.addEventListener('click', onClick);
|
193 |
-
document.addEventListener('keydown', onKeyDown);
|
194 |
-
document.addEventListener('keyup', onKeyUp);
|
195 |
-
|
196 |
-
// 적 로드
|
197 |
-
loadEnemies();
|
198 |
-
|
199 |
-
// 애니메이션 ��작
|
200 |
-
animate();
|
201 |
-
}
|
202 |
-
|
203 |
-
function createTerrain() {
|
204 |
-
// 지형 생성
|
205 |
-
const geometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 200, 200);
|
206 |
-
const material = new THREE.MeshStandardMaterial({
|
207 |
-
color: 0xD2B48C, // 사막색
|
208 |
-
roughness: 0.8,
|
209 |
-
metalness: 0.2
|
210 |
-
});
|
211 |
-
|
212 |
-
// 지형 높낮이 설정
|
213 |
-
const vertices = geometry.attributes.position.array;
|
214 |
-
for (let i = 0; i < vertices.length; i += 3) {
|
215 |
-
vertices[i + 2] = Math.sin(vertices[i] * 0.01) * Math.cos(vertices[i + 1] * 0.01) * 20;
|
216 |
-
}
|
217 |
-
|
218 |
-
geometry.attributes.position.needsUpdate = true;
|
219 |
-
geometry.computeVertexNormals();
|
220 |
-
|
221 |
-
const terrain = new THREE.Mesh(geometry, material);
|
222 |
-
terrain.rotation.x = -Math.PI / 2;
|
223 |
-
terrain.receiveShadow = true;
|
224 |
-
scene.add(terrain);
|
225 |
-
|
226 |
-
// 장애물 추가
|
227 |
-
addObstacles();
|
228 |
-
}
|
229 |
-
|
230 |
-
function addObstacles() {
|
231 |
-
// 바위 생성
|
232 |
-
const rockGeometry = new THREE.DodecahedronGeometry(10);
|
233 |
-
const rockMaterial = new THREE.MeshStandardMaterial({
|
234 |
-
color: 0x8B4513,
|
235 |
-
roughness: 0.9
|
236 |
-
});
|
237 |
-
|
238 |
-
for (let i = 0; i < 100; i++) {
|
239 |
-
const rock = new THREE.Mesh(rockGeometry, rockMaterial);
|
240 |
-
rock.position.set(
|
241 |
-
(Math.random() - 0.5) * MAP_SIZE * 0.9,
|
242 |
-
Math.random() * 10,
|
243 |
-
(Math.random() - 0.5) * MAP_SIZE * 0.9
|
244 |
-
);
|
245 |
-
rock.rotation.set(
|
246 |
-
Math.random() * Math.PI,
|
247 |
-
Math.random() * Math.PI,
|
248 |
-
Math.random() * Math.PI
|
249 |
-
);
|
250 |
-
rock.castShadow = true;
|
251 |
-
rock.receiveShadow = true;
|
252 |
-
scene.add(rock);
|
253 |
-
}
|
254 |
-
}
|
255 |
-
|
256 |
-
function loadEnemies() {
|
257 |
-
const loader = new GLTFLoader();
|
258 |
-
const enemyCount = 3 + currentStage;
|
259 |
-
|
260 |
-
for (let i = 0; i < enemyCount; i++) {
|
261 |
-
const modelPath = ENEMY_MODELS[i % ENEMY_MODELS.length];
|
262 |
-
|
263 |
-
loader.load(modelPath, (gltf) => {
|
264 |
-
const enemy = gltf.scene;
|
265 |
-
enemy.scale.set(ENEMY_SCALE, ENEMY_SCALE, ENEMY_SCALE);
|
266 |
-
|
267 |
-
// 랜덤 위치에 배치
|
268 |
-
const angle = (i / enemyCount) * Math.PI * 2;
|
269 |
-
const radius = 200;
|
270 |
-
enemy.position.set(
|
271 |
-
Math.cos(angle) * radius,
|
272 |
-
10,
|
273 |
-
Math.sin(angle) * radius
|
274 |
-
);
|
275 |
-
|
276 |
-
enemy.traverse((node) => {
|
277 |
-
if (node.isMesh) {
|
278 |
-
node.castShadow = true;
|
279 |
-
node.receiveShadow = true;
|
280 |
-
node.material.metalness = 0.2;
|
281 |
-
node.material.roughness = 0.8;
|
282 |
-
}
|
283 |
-
});
|
284 |
-
|
285 |
-
scene.add(enemy);
|
286 |
-
enemies.push({
|
287 |
-
model: enemy,
|
288 |
-
health: 100,
|
289 |
-
speed: 0.3 + (currentStage * 0.1)
|
290 |
-
});
|
291 |
-
});
|
292 |
-
}
|
293 |
-
}
|
294 |
-
|
295 |
-
function onClick() {
|
296 |
-
if (!controls.isLocked) {
|
297 |
-
controls.lock();
|
298 |
-
sounds.bgm.play();
|
299 |
-
} else if (ammo > 0) {
|
300 |
-
shoot();
|
301 |
-
}
|
302 |
-
}
|
303 |
-
|
304 |
-
function onKeyDown(event) {
|
305 |
-
switch (event.code) {
|
306 |
-
case 'KeyR':
|
307 |
-
reload();
|
308 |
-
break;
|
309 |
-
}
|
310 |
-
}
|
311 |
-
|
312 |
-
function onKeyUp(event) {
|
313 |
-
// 키 해제 처리
|
314 |
-
}
|
315 |
-
|
316 |
-
function shoot() {
|
317 |
-
if (ammo <= 0) return;
|
318 |
-
|
319 |
-
ammo--;
|
320 |
-
updateAmmoDisplay();
|
321 |
-
|
322 |
-
const bullet = createBullet();
|
323 |
-
bullets.push(bullet);
|
324 |
-
|
325 |
-
sounds.gunshot.currentTime = 0;
|
326 |
-
sounds.gunshot.play();
|
327 |
-
}
|
328 |
-
|
329 |
-
function createBullet() {
|
330 |
-
const bulletGeometry = new THREE.SphereGeometry(0.5);
|
331 |
-
const bulletMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
|
332 |
-
const bullet = new THREE.Mesh(bulletGeometry, bulletMaterial);
|
333 |
-
|
334 |
-
bullet.position.copy(camera.position);
|
335 |
-
const direction = new THREE.Vector3();
|
336 |
-
camera.getWorldDirection(direction);
|
337 |
-
bullet.velocity = direction.multiplyScalar(3);
|
338 |
-
|
339 |
-
scene.add(bullet);
|
340 |
-
return bullet;
|
341 |
-
}
|
342 |
-
|
343 |
-
function reload() {
|
344 |
-
ammo = 30;
|
345 |
-
updateAmmoDisplay();
|
346 |
-
}
|
347 |
-
|
348 |
-
function updateAmmoDisplay() {
|
349 |
-
document.getElementById('ammo').textContent = `Ammo: ${ammo}/30`;
|
350 |
-
}
|
351 |
-
|
352 |
-
function animate() {
|
353 |
-
requestAnimationFrame(animate);
|
354 |
-
|
355 |
-
if (controls.isLocked && !isGameOver) {
|
356 |
-
updateBullets();
|
357 |
-
updateEnemies();
|
358 |
-
checkGameStatus();
|
359 |
-
}
|
360 |
-
|
361 |
-
renderer.render(scene, camera);
|
362 |
-
}
|
363 |
-
|
364 |
-
function updateBullets() {
|
365 |
-
// 총알 업데이트 로직
|
366 |
-
for (let i = bullets.length - 1; i >= 0; i--) {
|
367 |
-
bullets[i].position.add(bullets[i].velocity);
|
368 |
-
|
369 |
-
// 적과의 충돌 체크
|
370 |
-
enemies.forEach(enemy => {
|
371 |
-
if (bullets[i].position.distanceTo(enemy.model.position) < 5) {
|
372 |
-
scene.remove(bullets[i]);
|
373 |
-
bullets.splice(i, 1);
|
374 |
-
enemy.health -= 25;
|
375 |
-
|
376 |
-
if (enemy.health <= 0) {
|
377 |
-
scene.remove(enemy.model);
|
378 |
-
enemies = enemies.filter(e => e !== enemy);
|
379 |
-
}
|
380 |
-
}
|
381 |
-
});
|
382 |
-
|
383 |
-
// 범위 벗어난 총알 제거
|
384 |
-
if (bullets[i] && bullets[i].position.distanceTo(camera.position) > 1000) {
|
385 |
-
scene.remove(bullets[i]);
|
386 |
-
bullets.splice(i, 1);
|
387 |
-
}
|
388 |
-
}
|
389 |
-
}
|
390 |
-
|
391 |
-
function updateEnemies() {
|
392 |
-
enemies.forEach(enemy => {
|
393 |
-
const direction = new THREE.Vector3();
|
394 |
-
direction.subVectors(camera.position, enemy.model.position);
|
395 |
-
direction.normalize();
|
396 |
-
|
397 |
-
enemy.model.position.add(direction.multiplyScalar(enemy.speed));
|
398 |
-
enemy.model.lookAt(camera.position);
|
399 |
-
|
400 |
-
// 플레이어와의 충돌 체크
|
401 |
-
if (enemy.model.position.distanceTo(camera.position) < 10) {
|
402 |
-
gameOver(false);
|
403 |
-
}
|
404 |
-
});
|
405 |
-
}
|
406 |
-
|
407 |
-
function checkGameStatus() {
|
408 |
-
if (enemies.length === 0 && currentStage < 5) {
|
409 |
-
currentStage++;
|
410 |
-
loadEnemies();
|
411 |
-
}
|
412 |
-
}
|
413 |
-
|
414 |
-
function gameOver(won) {
|
415 |
-
isGameOver = true;
|
416 |
-
controls.unlock();
|
417 |
-
sounds.bgm.pause();
|
418 |
-
alert(won ? 'Mission Complete!' : 'Game Over!');
|
419 |
-
location.reload();
|
420 |
-
}
|
421 |
-
|
422 |
-
// 화면 크기 조절 처리
|
423 |
-
window.addEventListener('resize', () => {
|
424 |
-
camera.aspect = window.innerWidth / window.innerHeight;
|
425 |
-
camera.updateProjectionMatrix();
|
426 |
-
renderer.setSize(window.innerWidth, window.innerHeight);
|
427 |
-
});
|
428 |
-
|
429 |
-
// 게임 시작
|
430 |
-
init();
|
431 |
-
|
432 |
-
// 마우스 이동 속도 제어
|
433 |
-
const moveState = {
|
434 |
-
forward: false,
|
435 |
-
backward: false,
|
436 |
-
left: false,
|
437 |
-
right: false
|
438 |
-
};
|
439 |
-
|
440 |
-
// 키보드 이벤트
|
441 |
-
document.addEventListener('keydown', (event) => {
|
442 |
-
switch(event.code) {
|
443 |
-
case 'KeyW': moveState.forward = true; break;
|
444 |
-
case 'KeyS': moveState.backward = true; break;
|
445 |
-
case 'KeyA': moveState.left = true; break;
|
446 |
-
case 'KeyD': moveState.right = true; break;
|
447 |
-
}
|
448 |
-
});
|
449 |
-
|
450 |
-
document.addEventListener('keyup', (event) => {
|
451 |
-
switch(event.code) {
|
452 |
-
case 'KeyW': moveState.forward = false; break;
|
453 |
-
case 'KeyS': moveState.backward = false; break;
|
454 |
-
case 'KeyA': moveState.left = false; break;
|
455 |
-
case 'KeyD': moveState.right = false; break;
|
456 |
-
}
|
457 |
-
});
|
458 |
-
|
459 |
-
// 이동 업데이트
|
460 |
-
function updateMovement() {
|
461 |
-
if (controls.isLocked) {
|
462 |
-
const speed = 2.0;
|
463 |
-
if (moveState.forward) controls.moveForward(speed);
|
464 |
-
if (moveState.backward) controls.moveForward(-speed);
|
465 |
-
if (moveState.left) controls.moveRight(-speed);
|
466 |
-
if (moveState.right) controls.moveRight(speed);
|
467 |
-
}
|
468 |
-
}
|
469 |
-
|
470 |
-
// 메인 게임 루프에 이동 업데이트 추가
|
471 |
-
let lastTime = performance.now();
|
472 |
-
function gameLoop() {
|
473 |
-
const time = performance.now();
|
474 |
-
const delta = (time - lastTime) / 1000;
|
475 |
-
lastTime = time;
|
476 |
-
|
477 |
-
if (controls.isLocked && !isGameOver) {
|
478 |
-
updateMovement();
|
479 |
-
updateBullets();
|
480 |
-
updateEnemies();
|
481 |
-
checkGameStatus();
|
482 |
-
}
|
483 |
-
|
484 |
-
renderer.render(scene, camera);
|
485 |
-
requestAnimationFrame(gameLoop);
|
486 |
-
}
|
487 |
-
|
488 |
-
gameLoop();
|
489 |
</script>
|
490 |
</body>
|
491 |
-
</html>
|
|
|
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
+
<title>Combat Helicopter Simulator</title>
|
5 |
<meta charset="utf-8">
|
6 |
<style>
|
7 |
body {
|
8 |
margin: 0;
|
9 |
overflow: hidden;
|
10 |
background: #000;
|
11 |
+
font-family: 'Courier New', monospace;
|
12 |
}
|
13 |
+
|
14 |
+
#cockpit-frame {
|
15 |
+
position: fixed;
|
16 |
+
top: 0;
|
17 |
+
left: 0;
|
18 |
+
width: 100%;
|
19 |
+
height: 100%;
|
20 |
+
border: 20px solid #2a2a2a;
|
21 |
+
box-sizing: border-box;
|
22 |
+
pointer-events: none;
|
23 |
+
z-index: 1000;
|
24 |
+
}
|
25 |
+
|
26 |
+
#cockpit-overlay {
|
27 |
+
position: fixed;
|
28 |
+
top: 0;
|
29 |
+
left: 0;
|
30 |
+
width: 100%;
|
31 |
+
height: 100%;
|
32 |
+
background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
|
33 |
+
pointer-events: none;
|
34 |
+
z-index: 999;
|
35 |
+
}
|
36 |
+
|
37 |
#info {
|
38 |
position: absolute;
|
39 |
top: 10px;
|
40 |
left: 10px;
|
41 |
+
color: #0f0;
|
42 |
+
background: rgba(0,20,0,0.7);
|
43 |
padding: 10px;
|
|
|
44 |
font-size: 14px;
|
45 |
+
z-index: 1001;
|
46 |
+
border: 1px solid #0f0;
|
47 |
border-radius: 5px;
|
48 |
user-select: none;
|
49 |
}
|
50 |
+
|
51 |
#timer {
|
52 |
position: absolute;
|
53 |
top: 10px;
|
54 |
right: 10px;
|
55 |
+
color: #0f0;
|
56 |
+
background: rgba(0,20,0,0.7);
|
57 |
padding: 10px;
|
|
|
58 |
font-size: 20px;
|
59 |
+
z-index: 1001;
|
60 |
+
border: 1px solid #0f0;
|
61 |
border-radius: 5px;
|
62 |
}
|
63 |
+
|
64 |
#crosshair {
|
65 |
+
position: fixed;
|
66 |
top: 50%;
|
67 |
left: 50%;
|
68 |
transform: translate(-50%, -50%);
|
69 |
+
width: 40px;
|
70 |
+
height: 40px;
|
71 |
+
border: 2px solid rgba(0,255,0,0.7);
|
72 |
+
border-radius: 50%;
|
73 |
+
z-index: 1001;
|
74 |
pointer-events: none;
|
75 |
}
|
76 |
+
|
77 |
+
#crosshair::before,
|
78 |
+
#crosshair::after {
|
79 |
+
content: '';
|
80 |
+
position: absolute;
|
81 |
+
background: rgba(0,255,0,0.7);
|
82 |
+
}
|
83 |
+
|
84 |
+
#crosshair::before {
|
85 |
+
top: 50%;
|
86 |
+
left: -10px;
|
87 |
+
right: -10px;
|
88 |
+
height: 2px;
|
89 |
+
transform: translateY(-50%);
|
90 |
+
}
|
91 |
+
|
92 |
+
#crosshair::after {
|
93 |
+
left: 50%;
|
94 |
+
top: -10px;
|
95 |
+
bottom: -10px;
|
96 |
+
width: 2px;
|
97 |
+
transform: translateX(-50%);
|
98 |
+
}
|
99 |
+
|
100 |
#healthBar {
|
101 |
position: absolute;
|
102 |
bottom: 20px;
|
103 |
left: 20px;
|
104 |
width: 400px;
|
105 |
height: 30px;
|
106 |
+
background: rgba(0,20,0,0.7);
|
107 |
+
border: 2px solid #0f0;
|
108 |
+
z-index: 1001;
|
109 |
border-radius: 15px;
|
110 |
overflow: hidden;
|
111 |
}
|
112 |
+
|
113 |
#health {
|
114 |
width: 100%;
|
115 |
height: 100%;
|
116 |
+
background: linear-gradient(90deg, #0f0, #00ff00);
|
117 |
transition: width 0.3s;
|
118 |
}
|
119 |
+
|
120 |
#ammo {
|
121 |
position: absolute;
|
122 |
bottom: 20px;
|
123 |
right: 20px;
|
124 |
+
color: #0f0;
|
125 |
+
background: rgba(0,20,0,0.7);
|
126 |
padding: 10px;
|
|
|
127 |
font-size: 20px;
|
128 |
+
z-index: 1001;
|
129 |
+
border: 1px solid #0f0;
|
130 |
border-radius: 5px;
|
131 |
}
|
132 |
+
|
133 |
+
#altitude-indicator,
|
134 |
+
#speed-indicator,
|
135 |
+
#compass {
|
136 |
+
position: fixed;
|
137 |
+
color: #0f0;
|
138 |
+
background: rgba(0,20,0,0.7);
|
139 |
+
padding: 10px;
|
140 |
+
border: 1px solid #0f0;
|
141 |
+
border-radius: 5px;
|
142 |
+
z-index: 1001;
|
143 |
+
}
|
144 |
+
|
145 |
+
#altitude-indicator {
|
146 |
+
left: 20px;
|
147 |
+
top: 50%;
|
148 |
+
}
|
149 |
+
|
150 |
+
#speed-indicator {
|
151 |
+
right: 20px;
|
152 |
+
top: 50%;
|
153 |
+
}
|
154 |
+
|
155 |
+
#compass {
|
156 |
+
top: 20px;
|
157 |
+
left: 50%;
|
158 |
+
transform: translateX(-50%);
|
159 |
+
}
|
160 |
+
|
161 |
+
#radar {
|
162 |
+
position: fixed;
|
163 |
+
bottom: 20px;
|
164 |
+
right: 20px;
|
165 |
+
width: 200px;
|
166 |
+
height: 200px;
|
167 |
+
background: rgba(0,20,0,0.7);
|
168 |
+
border: 2px solid #0f0;
|
169 |
+
border-radius: 50%;
|
170 |
+
z-index: 1001;
|
171 |
+
overflow: hidden;
|
172 |
+
}
|
173 |
+
|
174 |
+
.radar-sweep {
|
175 |
+
position: absolute;
|
176 |
+
top: 50%;
|
177 |
+
left: 50%;
|
178 |
+
width: 50%;
|
179 |
+
height: 2px;
|
180 |
+
background: linear-gradient(90deg, #0f0, transparent);
|
181 |
+
transform-origin: left center;
|
182 |
+
animation: radar-sweep 4s infinite linear;
|
183 |
+
}
|
184 |
+
|
185 |
+
.radar-dot {
|
186 |
+
position: absolute;
|
187 |
+
width: 4px;
|
188 |
+
height: 4px;
|
189 |
+
background: #f00;
|
190 |
+
border-radius: 50%;
|
191 |
+
transform: translate(-50%, -50%);
|
192 |
+
}
|
193 |
+
|
194 |
+
@keyframes radar-sweep {
|
195 |
+
from { transform: rotate(0deg); }
|
196 |
+
to { transform: rotate(360deg); }
|
197 |
+
}
|
198 |
+
|
199 |
#stage {
|
200 |
position: absolute;
|
201 |
top: 50%;
|
202 |
left: 50%;
|
203 |
transform: translate(-50%, -50%);
|
204 |
+
color: #0f0;
|
205 |
+
background: rgba(0,20,0,0.8);
|
206 |
padding: 20px;
|
|
|
207 |
font-size: 32px;
|
208 |
+
z-index: 1001;
|
209 |
border-radius: 10px;
|
210 |
display: none;
|
211 |
}
|
212 |
+
|
213 |
#gameTimer {
|
214 |
position: absolute;
|
215 |
top: 60px;
|
216 |
right: 10px;
|
217 |
+
color: #0f0;
|
218 |
+
background: rgba(0,20,0,0.7);
|
219 |
padding: 10px;
|
|
|
220 |
font-size: 20px;
|
221 |
+
z-index: 1001;
|
222 |
+
border: 1px solid #0f0;
|
223 |
border-radius: 5px;
|
224 |
}
|
225 |
</style>
|
226 |
</head>
|
227 |
<body>
|
228 |
+
<div id="cockpit-frame"></div>
|
229 |
+
<div id="cockpit-overlay"></div>
|
230 |
<div id="info">
|
231 |
Click to start<br>
|
232 |
WASD - Move Helicopter<br>
|
|
|
236 |
</div>
|
237 |
<div id="timer">Safe Time: 10s</div>
|
238 |
<div id="gameTimer">Time: 3:00</div>
|
239 |
+
<div id="crosshair"></div>
|
240 |
<div id="healthBar"><div id="health"></div></div>
|
241 |
<div id="ammo">Ammo: 30/30</div>
|
242 |
<div id="stage">Stage 1</div>
|
243 |
+
<div id="altitude-indicator">ALT: <span>50</span>m</div>
|
244 |
+
<div id="speed-indicator">SPD: <span>0</span>km/h</div>
|
245 |
+
<div id="compass">HDG: <span>0</span>°</div>
|
246 |
+
<div id="radar">
|
247 |
+
<div class="radar-sweep"></div>
|
248 |
+
<div class="radar-targets"></div>
|
249 |
+
</div>
|
250 |
|
251 |
<script type="importmap">
|
252 |
{
|
|
|
258 |
</script>
|
259 |
|
260 |
<script type="module">
|
261 |
+
// [이전에 제공된 JavaScript 코드를 여기에 삽입]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
262 |
</script>
|
263 |
</body>
|
264 |
+
</html>
|