Hugging Face's logo

Spaces:
gruntech
/
asteroids
Running

App Files Community
gruntech commited on
Commit
6f150fa
·
verified ·
1 Parent(s): e4b0e32

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +571 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Asteroids
3
- emoji: 📈
4
- colorFrom: red
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: asteroids
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,571 @@
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 lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Simple Asteroids Game</title>
7
+ <style>
8
+ body {
9
+ margin: 0;
10
+ padding: 0;
11
+ overflow: hidden;
12
+ background-color: #000;
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: center;
16
+ font-family: 'Arial', sans-serif;
17
+ color: #fff;
18
+ }
19
+
20
+ #game-container {
21
+ position: relative;
22
+ width: 800px;
23
+ height: 600px;
24
+ margin-top: 20px;
25
+ background-color: #111;
26
+ box-shadow: 0 0 20px rgba(0, 0, 255, 0.5);
27
+ border: 1px solid #444;
28
+ }
29
+
30
+ #game-canvas {
31
+ position: absolute;
32
+ top: 0;
33
+ left: 0;
34
+ width: 100%;
35
+ height: 100%;
36
+ }
37
+
38
+ #ui {
39
+ position: absolute;
40
+ top: 10px;
41
+ left: 10px;
42
+ color: #0f0;
43
+ font-size: 18px;
44
+ user-select: none;
45
+ text-shadow: 0 0 5px #0f0;
46
+ }
47
+
48
+ #controls {
49
+ margin-top: 10px;
50
+ color: #aaa;
51
+ text-align: center;
52
+ line-height: 1.5;
53
+ }
54
+
55
+ #game-over {
56
+ position: absolute;
57
+ top: 50%;
58
+ left: 50%;
59
+ transform: translate(-50%, -50%);
60
+ font-size: 48px;
61
+ color: #f00;
62
+ text-shadow: 0 0 10px #f00;
63
+ display: none;
64
+ text-align: center;
65
+ }
66
+
67
+ #restart {
68
+ margin-top: 20px;
69
+ padding: 10px 20px;
70
+ font-size: 18px;
71
+ background: linear-gradient(#333, #111);
72
+ color: #0f0;
73
+ border: 1px solid #0f0;
74
+ border-radius: 5px;
75
+ cursor: pointer;
76
+ }
77
+
78
+ #restart:hover {
79
+ background: linear-gradient(#444, #222);
80
+ }
81
+ </style>
82
+ </head>
83
+ <body>
84
+ <h1>ASTEROIDS</h1>
85
+ <div id="game-container">
86
+ <canvas id="game-canvas"></canvas>
87
+ <div id="ui">
88
+ SCORE: <span id="score">0</span><br>
89
+ LIVES: <span id="lives">3</span>
90
+ </div>
91
+ <div id="game-over">
92
+ GAME OVER<br>
93
+ <button id="restart">PLAY AGAIN</button>
94
+ </div>
95
+ </div>
96
+ <div id="controls">
97
+ CONTROLS:<br>
98
+ Arrow Keys to rotate and thrust<br>
99
+ Space to shoot
100
+ </div>
101
+
102
+ <script>
103
+ // Game elements
104
+ const canvas = document.getElementById('game-canvas');
105
+ const ctx = canvas.getContext('2d');
106
+ const scoreElement = document.getElementById('score');
107
+ const livesElement = document.getElementById('lives');
108
+ const gameOverElement = document.getElementById('game-over');
109
+ const restartButton = document.getElementById('restart');
110
+
111
+ // Set canvas dimensions
112
+ canvas.width = 800;
113
+ canvas.height = 600;
114
+
115
+ // Game state
116
+ let score = 0;
117
+ let lives = 3;
118
+ let gameOver = false;
119
+ let asteroids = [];
120
+ let bullets = [];
121
+ let particles = [];
122
+ let keys = {};
123
+
124
+ // Player ship
125
+ const ship = {
126
+ x: canvas.width / 2,
127
+ y: canvas.height / 2,
128
+ radius: 15,
129
+ angle: 0,
130
+ rotation: 0,
131
+ thrusting: false,
132
+ thrust: {
133
+ x: 0,
134
+ y: 0
135
+ },
136
+ velocity: {
137
+ x: 0,
138
+ y: 0
139
+ }
140
+ };
141
+
142
+ // Key listeners
143
+ window.addEventListener('keydown', (e) => {
144
+ keys[e.key] = true;
145
+ });
146
+
147
+ window.addEventListener('keyup', (e) => {
148
+ keys[e.key] = false;
149
+ });
150
+
151
+ // Restart game
152
+ restartButton.addEventListener('click', () => {
153
+ resetGame();
154
+ });
155
+
156
+ function resetGame() {
157
+ score = 0;
158
+ lives = 3;
159
+ gameOver = false;
160
+ asteroids = [];
161
+ bullets = [];
162
+ particles = [];
163
+
164
+ ship.x = canvas.width / 2;
165
+ ship.y = canvas.height / 2;
166
+ ship.angle = 0;
167
+ ship.velocity.x = 0;
168
+ ship.velocity.y = 0;
169
+
170
+ scoreElement.textContent = score;
171
+ livesElement.textContent = lives;
172
+ gameOverElement.style.display = 'none';
173
+
174
+ createAsteroids(4);
175
+ }
176
+
177
+ // Create initial asteroids
178
+ function createAsteroids(count) {
179
+ for (let i = ;0; i < count; i++) {
180
+ asteroids.push(createAsteroid());
181
+ }
182
+ }
183
+
184
+ // Create a single asteroid
185
+ function createAsteroid() {
186
+ const x = Math.random() < 0.5 ?
187
+ 0 - 50 : canvas.width + 50;
188
+ const y = Math.random() * canvas.height;
189
+
190
+ const size = Math.floor(Math.random() * 3) + 1; // 1 (large), 2 (medium), 3 (small)
191
+
192
+ let radius;
193
+ let points;
194
+
195
+ switch(size) {
196
+ case 1:
197
+ radius = 50;
198
+ points = 100;
199
+ break;
200
+ case 2:
201
+ radius = 25;
202
+ points = 50;
203
+ break;
204
+ case 3:
205
+ radius = 10;
206
+ points = 20;
207
+ break;
208
+ }
209
+
210
+ const angle = Math.random() * Math.PI * 2;
211
+ const speed = 1 + Math.random() * 2;
212
+
213
+ const asteroid = {
214
+ x,
215
+ y,
216
+ radius,
217
+ size,
218
+ points,
219
+ vertices: Math.floor(Math.random() * 9) + 5,
220
+ angle,
221
+ speed,
222
+ velocity: {
223
+ x: Math.cos(angle) * speed,
224
+ y: Math.sin(angle) * speed
225
+ },
226
+ rotation: (Math.random() - 0.5) * 0.2
227
+ };
228
+
229
+ return asteroid;
230
+ }
231
+
232
+ // Main game loop
233
+ function gameLoop() {
234
+ if (gameOver) return;
235
+
236
+ ctx.fillStyle = '#111';
237
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
238
+
239
+ updateShip();
240
+ drawShip();
241
+
242
+ updateBullets();
243
+ drawBullets();
244
+
245
+ updateAsteroids();
246
+ drawAsteroids();
247
+
248
+ updateParticles();
249
+ drawParticles();
250
+
251
+ checkCollisions();
252
+
253
+ spawnAsteroids();
254
+
255
+ requestAnimationFrame(gameLoop);
256
+ }
257
+
258
+ function updateShip() {
259
+ // Rotate ship
260
+ if (keys['ArrowLeft']) {
261
+ ship.rotation = -0.1;
262
+ } else if (keys['ArrowRight']) {
263
+ ship.rotation = 0.1;
264
+ } else {
265
+ ship.rotation = 0;
266
+ }
267
+
268
+ // Apply rotation
269
+ ship.angle += ship.rotation;
270
+
271
+ // Thrust
272
+ if (keys['ArrowUp']) {
273
+ ship.thrusting = true;
274
+
275
+ ship.thrust.x = Math.cos(ship.angle) * 0.1;
276
+ ship.thrust.y = Math.sin(ship.angle) * 0.1;
277
+ } else {
278
+ ship.thrusting = false;
279
+ ship.thrust.x = 0;
280
+ ship.thrust.y = 0;
281
+ }
282
+
283
+ // Apply thrust to velocity
284
+ ship.velocity.x += ship.thrust.x;
285
+ ship.velocity.y += ship.thrust.y;
286
+
287
+ // Friction
288
+ ship.velocity.x *= 0.98;
289
+ ship.velocity.y *= 0.98;
290
+
291
+ // Update position
292
+ ship.x += ship.velocity.x;
293
+ ship.y += ship.velocity.y;
294
+
295
+ // Screen wrapping
296
+ if (ship.x < 0 - ship.radius) {
297
+ ship.x = canvas.width + ship.radius;
298
+ } else if (ship.x > canvas.width + ship.radius) {
299
+ ship.x = 0 - ship.radius;
300
+ }
301
+
302
+ if (ship.y < 0 - ship.radius) {
303
+ ship.y = canvas.height + ship.radius;
304
+ } else if (ship.y > canvas.height + ship.radius) {
305
+ ship.y = 0 - ship.radius;
306
+ }
307
+
308
+ // Fire bullets
309
+ if (keys[' '] && !keys['_space']) {
310
+ keys['_space'] = true;
311
+ fireBullet();
312
+ } else if (!keys[' ']) {
313
+ keys['_space'] = false;
314
+ }
315
+ }
316
+
317
+ function drawShip() {
318
+ ctx.save();
319
+ ctx.translate(ship.x, ship.y);
320
+ ctx.rotate(ship.angle);
321
+
322
+ // Ship body
323
+ ctx.strokeStyle = '#0f0';
324
+ ctx.lineWidth = 2;
325
+ ctx.beginPath();
326
+ ctx.moveTo(20, 0);
327
+ ctx.lineTo(-10, -10);
328
+ ctx.lineTo(-5, 0);
329
+ ctx.lineTo(-10, 10);
330
+ ctx.closePath();
331
+ ctx.stroke();
332
+
333
+ // Thrust flame
334
+ if (ship.thrusting) {
335
+ ctx.beginPath();
336
+ ctx.moveTo(-15, 0);
337
+ ctx.lineTo(-25, 0);
338
+ ctx.strokeStyle = '#f80';
339
+ ctx.stroke();
340
+ }
341
+
342
+ ctx.restore();
343
+ }
344
+
345
+ function fireBullet() {
346
+ const bullet = {
347
+ x: ship.x + Math.cos(ship.angle) * 20,
348
+ y: ship.y + Math.sin(ship.angle) * 20,
349
+ velocity: {
350
+ x: Math.cos(ship.angle) * 7 + ship.velocity.x,
351
+ y: Math.sin(ship.angle) * 7 + ship.velocity.y
352
+ },
353
+ radius: 2,
354
+ life: 60
355
+ };
356
+
357
+ bullets.push(bullet);
358
+ }
359
+
360
+ function updateBullets() {
361
+ for (let i = bullets.length - 1; i >= 0; i--) {
362
+ bullets[i].x += bullets[i].velocity.x;
363
+ bullets[i].y += bullets[i].velocity.y;
364
+ bullets[i].life--;
365
+
366
+ // Screen wrapping
367
+ if (bullets[i].x < 0) bullets[i].x = canvas.width;
368
+ else if (bullets[i].x > canvas.width) bullets[i].x = 0;
369
+
370
+ if (bullets[i].y < 0) bullets[i].y = canvas.height;
371
+ else if (bullets[i].y > canvas.height) bullets[i].y = 0;
372
+
373
+ // Remove old bullets
374
+ if (bullets[i].life <= 0) {
375
+ bullets.splice(i, 1);
376
+ }
377
+ }
378
+ }
379
+
380
+ function drawBullets() {
381
+ ctx.fillStyle = '#0f0';
382
+ for (let bullet of bullets) {
383
+ ctx.beginPath();
384
+ ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
385
+ ctx.fill();
386
+ }
387
+ }
388
+
389
+ function updateAsteroids() {
390
+ for (let asteroid of asteroids) {
391
+ asteroid.x += asteroid.velocity.x;
392
+ asteroid.y += asteroid.velocity.y;
393
+ asteroid.angle += asteroid.rotation;
394
+
395
+ // Screen wrapping
396
+ if (asteroid.x < 0 - asteroid.radius) {
397
+ asteroid.x = canvas.width + asteroid.radius;
398
+ } else if (asteroid.x > canvas.width + asteroid.radius) {
399
+ asteroid.x = 0 - asteroid.radius;
400
+ }
401
+
402
+ if (asteroid.y < 0 - asteroid.radius) {
403
+ asteroid.y = canvas.height + asteroid.radius;
404
+ } else if (asteroid.y > canvas.height + asteroid.radius) {
405
+ asteroid.y = 0 - asteroid.radius;
406
+ }
407
+ }
408
+ }
409
+
410
+ function drawAsteroids() {
411
+ for (const asteroid of asteroids) {
412
+ ctx.save();
413
+ ctx.translate(asteroid.x, asteroid.y);
414
+ ctx.rotate(asteroid.angle);
415
+
416
+ ctx.strokeStyle = '#fff';
417
+ ctx.lineWidth = 2;
418
+ ctx.beginPath();
419
+
420
+ // Draw irregular polygon
421
+ for (let i = 0; i < asteroid.vertices; i++) {
422
+ const angle = (i / asteroid.vertices) * Math.PI * 2;
423
+ const offset = asteroid.radius * (1 - Math.random() * 0.3);
424
+ const x = Math.cos(angle) * offset;
425
+ const y = Math.sin(angle) * offset;
426
+
427
+ if (i === 0) {
428
+ ctx.moveTo(x, y);
429
+ } else {
430
+ ctx.lineTo(x, y);
431
+ }
432
+ }
433
+
434
+ ctx.closePath();
435
+ ctx.stroke();
436
+ ctx.restore();
437
+ }
438
+ }
439
+
440
+ function checkCollisions() {
441
+ // Bullets vs Asteroids
442
+ for (let i = asteroids.length - 1; i >= 0; i--) {
443
+ const asteroid = asteroids[i];
444
+
445
+ for (let j = bullets.length - 1; j >= 0; j--) {
446
+ const bullet = bullets[j];
447
+
448
+ const dx = asteroid.x - bullet.x;
449
+ const dy = asteroid.y - bullet.y;
450
+ const distance = Math.sqrt(dx * dx + dy * dy);
451
+
452
+ if (distance < asteroid.radius + bullet.radius) {
453
+ // Hit!
454
+ createParticles(asteroid);
455
+ score += asteroid.points;
456
+ scoreElement.textContent = score;
457
+
458
+ // Break apart asteroid if it's large enough
459
+ if (asteroid.size > 1) {
460
+ const numNew = 2 + Math.floor(Math.random() * 2);
461
+ for (let n = 0; n < numNew; n++) {
462
+ const newAsteroid = {
463
+ x: asteroid.x + (Math.random() * 20 - 10),
464
+ y: asteroid.y + (Math.random() * 20 - 10),
465
+ radius: asteroid.radius / 1.5,
466
+ size: asteroid.size - 1,
467
+ points: asteroid.points / 2,
468
+ vertices: asteroid.vertices,
469
+ angle: Math.random() * Math.PI * 2,
470
+ speed: asteroid.speed * 1.5,
471
+ velocity: {
472
+ x: (Math.cos(Math.random() * Math.PI * 2) * asteroid.speed * 1.5),
473
+ y: (Math.sin(Math.random() * Math.PI * 2) * asteroid.speed * 1.5)
474
+ },
475
+ rotation: (Math.random() - 0.5) * 0.3
476
+ };
477
+ asteroids.push(newAsteroid);
478
+ }
479
+ }
480
+
481
+ // Remove asteroid and bullet
482
+ asteroids.splice(i, 1);
483
+ bullets.splice(j, 1);
484
+ break;
485
+ }
486
+ }
487
+ }
488
+
489
+ // Ship vs Asteroids
490
+ for (let i = 0; i < asteroids.length; i++) {
491
+ const asteroid = asteroids[i];
492
+ const dx = ship.x - asteroid.x;
493
+ const dy = ship.y - asteroid.y;
494
+ const distance = Math.sqrt(dx * dx + dy * dy);
495
+
496
+ if (distance < ship.radius + asteroid.radius) {
497
+ // Collision!
498
+ lives--;
499
+ livesElement.textContent = lives;
500
+ createParticles(asteroid);
501
+
502
+ if (lives <= 0) {
503
+ gameOver = true;
504
+ gameOverElement.style.display = 'block';
505
+ return;
506
+ }
507
+
508
+ // Respawn ship
509
+ ship.x = canvas.width / 2;
510
+ ship.y = canvas.height / 2;
511
+ ship.velocity.x = 0;
512
+ ship.velocity.y = 0;
513
+
514
+ // Remove the asteroid (optional)
515
+ // asteroids.splice(i, 1);
516
+ break;
517
+ }
518
+ }
519
+ }
520
+
521
+ function createParticles(asteroid) {
522
+ const particleCount = 15 + Math.floor(Math.random() * 10);
523
+
524
+ for (let i = 0; i < particleCount; i++) {
525
+ const size = 1 + Math.random() * 3;
526
+ particles.push({
527
+ x: asteroid.x + (Math.random() * 20 - 10),
528
+ y: asteroid.y + (Math.random() * 20 - 10),
529
+ size: size,
530
+ color: `hsl(${Math.random() * 60 + 30}, 100%, 50%)`,
531
+ speed: 1 + Math.random() * 3 * (asteroid.radius / 30),
532
+ angle: Math.random() * Math.PI * 2,
533
+ life: 30 + Math.random() * 40
534
+ });
535
+ }
536
+ }
537
+
538
+ function updateParticles() {
539
+ for (let i = particles.length - 1; i >= 0; i--) {
540
+ particles[i].x += Math.cos(particles[i].angle) * particles[i].speed;
541
+ particles[i].y += Math.sin(particles[i].angle) * particles[i].speed;
542
+ particles[i].life--;
543
+
544
+ if (particles[i].life <= 0) {
545
+ particles.splice(i, 1);
546
+ }
547
+ }
548
+ }
549
+
550
+ function drawParticles() {
551
+ for (const particle of particles) {
552
+ ctx.fillStyle = particle.color;
553
+ ctx.beginPath();
554
+ ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
555
+ ctx.fill();
556
+ }
557
+ }
558
+
559
+ function spawnAsteroids() {
560
+ // Only spawn new asteroids if there are 3 or less
561
+ if (asteroids.length <= 3 && Math.random() < 0.01) {
562
+ asteroids.push(createAsteroid());
563
+ }
564
+ }
565
+
566
+ // Start the game
567
+ resetGame();
568
+ gameLoop();
569
+ </script>
570
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
571
+ </html>