Hugging Face's logo

Spaces:
KaiShin1885
/
Shooting
Running

App Files Community
KaiShin1885 commited on
Commit
a8bc10f
·
verified ·
1 Parent(s): f033f54

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +447 -18
index.html CHANGED
@@ -1,19 +1,448 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <title>FPS Game</title>
5
+ <style>
6
+ body { margin: 0; overflow: hidden; }
7
+ #gameCanvas { width: 100vw; height: 100vh; }
8
+
9
+ .ui {
10
+ position: fixed;
11
+ color: white;
12
+ font-family: Arial;
13
+ pointer-events: none;
14
+ text-shadow: 1px 1px 2px black;
15
+ }
16
+
17
+ #health {
18
+ top: 20px;
19
+ left: 20px;
20
+ width: 200px;
21
+ height: 20px;
22
+ background: rgba(255,0,0,0.3);
23
+ border: 2px solid red;
24
+ }
25
+
26
+ #healthBar {
27
+ width: 100%;
28
+ height: 100%;
29
+ background: red;
30
+ transition: width 0.2s;
31
+ }
32
+
33
+ #ammo {
34
+ top: 50px;
35
+ left: 20px;
36
+ font-size: 24px;
37
+ }
38
+
39
+ #enemies {
40
+ top: 80px;
41
+ left: 20px;
42
+ font-size: 20px;
43
+ }
44
+
45
+ #crosshair {
46
+ top: 50%;
47
+ left: 50%;
48
+ transform: translate(-50%, -50%);
49
+ font-size: 24px;
50
+ }
51
+
52
+ .modal {
53
+ position: fixed;
54
+ top: 50%;
55
+ left: 50%;
56
+ transform: translate(-50%, -50%);
57
+ background: rgba(0,0,0,0.9);
58
+ padding: 30px;
59
+ border-radius: 10px;
60
+ text-align: center;
61
+ color: white;
62
+ border: 2px solid white;
63
+ min-width: 300px;
64
+ }
65
+
66
+ .button {
67
+ margin: 10px;
68
+ padding: 15px 30px;
69
+ font-size: 18px;
70
+ cursor: pointer;
71
+ background: #4CAF50;
72
+ border: none;
73
+ color: white;
74
+ border-radius: 5px;
75
+ transition: background 0.3s;
76
+ }
77
+
78
+ .button:hover {
79
+ background: #45a049;
80
+ }
81
+
82
+ .modal h1 {
83
+ color: #4CAF50;
84
+ margin-bottom: 20px;
85
+ }
86
+ </style>
87
+ </head>
88
+ <body>
89
+ <canvas id="gameCanvas"></canvas>
90
+
91
+ <div class="ui">
92
+ <div id="health"><div id="healthBar"></div></div>
93
+ <div id="ammo">90/90</div>
94
+ <div id="enemies">Enemies: 3</div>
95
+ <div id="crosshair">+</div>
96
+ </div>
97
+
98
+ <div id="menuModal" class="modal">
99
+ <h1>FPS Game</h1>
100
+ <h2>Select Difficulty</h2>
101
+ <button class="button" onclick="startGame(1)">Level 1 (3 Enemies)</button>
102
+ <button class="button" onclick="startGame(2)">Level 2 (5 Enemies)</button>
103
+ <button class="button" onclick="startGame(3)">Level 3 (7 Enemies)</button>
104
+ <button class="button" onclick="startGame(4)">Level 4 (9 Enemies)</button>
105
+ <button class="button" onclick="startGame(5)">Level 5 (12 Enemies)</button>
106
+ </div>
107
+
108
+ <div id="gameOverModal" class="modal" style="display:none;">
109
+ <h1>Game Over</h1>
110
+ <p>Your health reached 0!</p>
111
+ <button class="button" onclick="showMenu()">Try Again</button>
112
+ </div>
113
+
114
+ <div id="victoryModal" class="modal" style="display:none;">
115
+ <h1>Victory!</h1>
116
+ <p>All enemies eliminated!</p>
117
+ <button class="button" onclick="showMenu()">Play Again</button>
118
+ </div>
119
+
120
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
121
+ <script>
122
+ const GAME_CONFIG = {
123
+ PLAYER: {
124
+ HEALTH: 200,
125
+ AMMO: 90,
126
+ DAMAGE: 5,
127
+ SPEED: 0.15,
128
+ FIRE_RATE: 100
129
+ },
130
+ ENEMY: {
131
+ HEALTH: 30,
132
+ DAMAGE: 10,
133
+ FIRE_RATE: 1000,
134
+ GROUP_DISTANCE: 10,
135
+ SPEED: 0.05
136
+ },
137
+ LEVELS: {
138
+ 1: { enemies: 3, obstacles: 5, mapSize: 100 },
139
+ 2: { enemies: 5, obstacles: 8, mapSize: 150 },
140
+ 3: { enemies: 7, obstacles: 12, mapSize: 200 },
141
+ 4: { enemies: 9, obstacles: 16, mapSize: 250 },
142
+ 5: { enemies: 12, obstacles: 20, mapSize: 300 }
143
+ }
144
+ };
145
+
146
+ const scene = new THREE.Scene();
147
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
148
+ const renderer = new THREE.WebGLRenderer({canvas: document.getElementById('gameCanvas')});
149
+ renderer.setSize(window.innerWidth, window.innerHeight);
150
+
151
+ let gameState = {
152
+ player: {
153
+ health: GAME_CONFIG.PLAYER.HEALTH,
154
+ ammo: GAME_CONFIG.PLAYER.AMMO,
155
+ lastShot: 0
156
+ },
157
+ enemies: [],
158
+ bullets: [],
159
+ enemyBullets: [],
160
+ isShooting: false,
161
+ isPlaying: false,
162
+ level: 1
163
+ };
164
+
165
+ const keys = { w: false, s: false, a: false, d: false };
166
+
167
+ document.addEventListener('keydown', e => {
168
+ if(keys.hasOwnProperty(e.key.toLowerCase())) {
169
+ keys[e.key.toLowerCase()] = true;
170
+ }
171
+ });
172
+
173
+ document.addEventListener('keyup', e => {
174
+ if(keys.hasOwnProperty(e.key.toLowerCase())) {
175
+ keys[e.key.toLowerCase()] = false;
176
+ }
177
+ });
178
+
179
+ document.addEventListener('mousedown', e => {
180
+ if(e.button === 0) gameState.isShooting = true;
181
+ });
182
+
183
+ document.addEventListener('mouseup', e => {
184
+ if(e.button === 0) gameState.isShooting = false;
185
+ });
186
+
187
+ document.addEventListener('mousemove', e => {
188
+ if(document.pointerLockElement === document.body) {
189
+ camera.rotation.y -= e.movementX * 0.002;
190
+ }
191
+ });
192
+
193
+ function startGame(level) {
194
+ gameState = {
195
+ player: {
196
+ health: GAME_CONFIG.PLAYER.HEALTH,
197
+ ammo: GAME_CONFIG.PLAYER.AMMO,
198
+ lastShot: 0
199
+ },
200
+ enemies: [],
201
+ bullets: [],
202
+ enemyBullets: [],
203
+ isShooting: false,
204
+ isPlaying: true,
205
+ level: level
206
+ };
207
+
208
+ hideAllModals();
209
+ document.body.requestPointerLock();
210
+ createLevel(level);
211
+ gameLoop();
212
+ }
213
+
214
+ function hideAllModals() {
215
+ document.getElementById('menuModal').style.display = 'none';
216
+ document.getElementById('gameOverModal').style.display = 'none';
217
+ document.getElementById('victoryModal').style.display = 'none';
218
+ }
219
+
220
+ function showMenu() {
221
+ hideAllModals();
222
+ document.getElementById('menuModal').style.display = 'block';
223
+ }
224
+
225
+ function gameOver() {
226
+ gameState.isPlaying = false;
227
+ document.exitPointerLock();
228
+ hideAllModals();
229
+ document.getElementById('gameOverModal').style.display = 'block';
230
+ }
231
+
232
+ function victory() {
233
+ gameState.isPlaying = false;
234
+ document.exitPointerLock();
235
+ hideAllModals();
236
+ document.getElementById('victoryModal').style.display = 'block';
237
+ }
238
+
239
+ function createLevel(level) {
240
+ while(scene.children.length > 0) {
241
+ scene.remove(scene.children[0]);
242
+ }
243
+
244
+ const config = GAME_CONFIG.LEVELS[level];
245
+
246
+ // Ground
247
+ const ground = new THREE.Mesh(
248
+ new THREE.PlaneGeometry(config.mapSize, config.mapSize),
249
+ new THREE.MeshBasicMaterial({color: 0x444444})
250
+ );
251
+ ground.rotation.x = -Math.PI/2;
252
+ scene.add(ground);
253
+
254
+ // Obstacles
255
+ for(let i = 0; i < config.obstacles; i++) {
256
+ const obstacle = new THREE.Mesh(
257
+ new THREE.BoxGeometry(5, 10, 5),
258
+ new THREE.MeshBasicMaterial({color: 0x666666})
259
+ );
260
+ obstacle.position.set(
261
+ (Math.random() - 0.5) * config.mapSize * 0.8,
262
+ 5,
263
+ (Math.random() - 0.5) * config.mapSize * 0.8
264
+ );
265
+ scene.add(obstacle);
266
+ }
267
+
268
+ // Enemies
269
+ for(let i = 0; i < config.enemies; i++) {
270
+ const enemy = new THREE.Mesh(
271
+ new THREE.BoxGeometry(2, 4, 2),
272
+ new THREE.MeshBasicMaterial({color: 0xff0000})
273
+ );
274
+
275
+ const angle = (Math.PI * 2 / config.enemies) * i;
276
+ const radius = config.mapSize * 0.4;
277
+ enemy.position.set(
278
+ Math.cos(angle) * radius,
279
+ 2,
280
+ Math.sin(angle) * radius
281
+ );
282
+
283
+ enemy.health = GAME_CONFIG.ENEMY.HEALTH;
284
+ enemy.lastShot = 0;
285
+
286
+ scene.add(enemy);
287
+ gameState.enemies.push(enemy);
288
+ }
289
+
290
+ camera.position.set(0, 2, 0);
291
+ camera.rotation.set(0, 0, 0);
292
+
293
+ updateUI();
294
+ }
295
+
296
+ function movePlayer() {
297
+ const moveVector = new THREE.Vector3();
298
+
299
+ if(keys.w) moveVector.z -= GAME_CONFIG.PLAYER.SPEED;
300
+ if(keys.s) moveVector.z += GAME_CONFIG.PLAYER.SPEED;
301
+ if(keys.a) moveVector.x -= GAME_CONFIG.PLAYER.SPEED;
302
+ if(keys.d) moveVector.x += GAME_CONFIG.PLAYER.SPEED;
303
+
304
+ moveVector.applyAxisAngle(new THREE.Vector3(0, 1, 0), camera.rotation.y);
305
+ camera.position.add(moveVector);
306
+ }
307
+
308
+ function shoot() {
309
+ if(gameState.player.ammo <= 0 ||
310
+ Date.now() - gameState.player.lastShot < GAME_CONFIG.PLAYER.FIRE_RATE) return;
311
+
312
+ gameState.player.ammo--;
313
+ gameState.player.lastShot = Date.now();
314
+
315
+ const bullet = new THREE.Mesh(
316
+ new THREE.SphereGeometry(0.2),
317
+ new THREE.MeshBasicMaterial({color: 0xffff00})
318
+ );
319
+
320
+ bullet.position.copy(camera.position);
321
+ const direction = new THREE.Vector3(0, 0, -1);
322
+ direction.applyQuaternion(camera.quaternion);
323
+ bullet.velocity = direction.multiplyScalar(2);
324
+
325
+ scene.add(bullet);
326
+ gameState.bullets.push(bullet);
327
+
328
+ updateUI();
329
+ }
330
+
331
+ function updateBullets() {
332
+ // Player bullets
333
+ for(let i = gameState.bullets.length - 1; i >= 0; i--) {
334
+ const bullet = gameState.bullets[i];
335
+ bullet.position.add(bullet.velocity);
336
+
337
+ gameState.enemies.forEach((enemy, enemyIndex) => {
338
+ if(bullet.position.distanceTo(enemy.position) < 2) {
339
+ enemy.health -= GAME_CONFIG.PLAYER.DAMAGE;
340
+ scene.remove(bullet);
341
+ gameState.bullets.splice(i, 1);
342
+
343
+ if(enemy.health <= 0) {
344
+ scene.remove(enemy);
345
+ gameState.enemies.splice(enemyIndex, 1);
346
+ gameState.player.ammo += 30;
347
+ updateUI();
348
+
349
+ if(gameState.enemies.length === 0) {
350
+ victory();
351
+ }
352
+ }
353
+ }
354
+ });
355
+ }
356
+
357
+ // Enemy bullets
358
+ for(let i = gameState.enemyBullets.length - 1; i >= 0; i--) {
359
+ const bullet = gameState.enemyBullets[i];
360
+ bullet.position.add(bullet.velocity);
361
+
362
+ if(bullet.position.distanceTo(camera.position) < 1) {
363
+ gameState.player.health -= GAME_CONFIG.ENEMY.DAMAGE;
364
+ scene.remove(bullet);
365
+ gameState.enemyBullets.splice(i, 1);
366
+ updateUI();
367
+
368
+ if(gameState.player.health <= 0) {
369
+ gameOver();
370
+ }
371
+ }
372
+ }
373
+ }
374
+
375
+ function updateEnemies() {
376
+ gameState.enemies.forEach(enemy => {
377
+ // Movement with group avoidance
378
+ const toPlayer = new THREE.Vector3()
379
+ .subVectors(camera.position, enemy.position)
380
+ .normalize();
381
+
382
+ const avoidance = new THREE.Vector3();
383
+ gameState.enemies.forEach(other => {
384
+ if(other !== enemy) {
385
+ const dist = enemy.position.distanceTo(other.position);
386
+ if(dist < GAME_CONFIG.ENEMY.GROUP_DISTANCE) {
387
+ const away = new THREE.Vector3()
388
+ .subVectors(enemy.position, other.position)
389
+ .normalize()
390
+ .multiplyScalar(1/dist);
391
+ avoidance.add(away);
392
+ }
393
+ }
394
+ });
395
+
396
+ const movement = toPlayer.add(avoidance.multiplyScalar(0.5))
397
+ .normalize()
398
+ .multiplyScalar(GAME_CONFIG.ENEMY.SPEED);
399
+ enemy.position.add(movement);
400
+
401
+ // Shooting
402
+ if(Date.now() - enemy.lastShot > GAME_CONFIG.ENEMY.FIRE_RATE) {
403
+ enemy.lastShot = Date.now();
404
+ const bullet = new THREE.Mesh(
405
+ new THREE.SphereGeometry(0.2),
406
+ new THREE.MeshBasicMaterial({color: 0xff0000})
407
+ );
408
+ bullet.position.copy(enemy.position);
409
+ bullet.velocity = toPlayer.normalize().multiplyScalar(0.5);
410
+ scene.add(bullet);
411
+ gameState.enemyBullets.push(bullet);
412
+ }
413
+ });
414
+ }
415
+
416
+ function updateUI() {
417
+ document.getElementById('healthBar').style.width =
418
+ (gameState.player.health / GAME_CONFIG.PLAYER.HEALTH * 100) + '%';
419
+ document.getElementById('ammo').textContent =
420
+ `Ammo: ${gameState.player.ammo}/${GAME_CONFIG.PLAYER.AMMO}`;
421
+ document.getElementById('enemies').textContent =
422
+ `Enemies: ${gameState.enemies.length}`;
423
+ }
424
+
425
+ function gameLoop() {
426
+ if(!gameState.isPlaying) return;
427
+
428
+ requestAnimationFrame(gameLoop);
429
+
430
+ if(gameState.isShooting) shoot();
431
+ movePlayer();
432
+ updateEnemies();
433
+ updateBullets();
434
+
435
+ renderer.render(scene, camera);
436
+ }
437
+
438
+ window.addEventListener('resize', () => {
439
+ camera.aspect = window.innerWidth / window.innerHeight;
440
+ camera.updateProjectionMatrix();
441
+ renderer.setSize(window.innerWidth, window.innerHeight);
442
+ });
443
+
444
+ // Initialize game
445
+ updateUI();
446
+ </script>
447
+ </body>
448
+ </html>