mycosoft commited on
Commit
5b3a2de
·
verified ·
1 Parent(s): a1df33d

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +830 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mycosoftgame
3
- emoji: 🏆
4
- colorFrom: purple
5
- colorTo: purple
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: mycosoftgame
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
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,830 @@
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>Cosmic Defender - Space Shooter Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
10
+
11
+ body {
12
+ font-family: 'Press Start 2P', cursive;
13
+ overflow: hidden;
14
+ background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
15
+ }
16
+
17
+ #gameCanvas {
18
+ background-color: #000;
19
+ border-radius: 8px;
20
+ box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
21
+ }
22
+
23
+ .particle {
24
+ position: absolute;
25
+ width: 2px;
26
+ height: 2px;
27
+ background-color: white;
28
+ border-radius: 50%;
29
+ pointer-events: none;
30
+ }
31
+
32
+ .explosion {
33
+ position: absolute;
34
+ width: 30px;
35
+ height: 30px;
36
+ background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,215,0,1) 30%, rgba(255,69,0,1) 70%, rgba(0,0,0,0) 100%);
37
+ border-radius: 50%;
38
+ pointer-events: none;
39
+ animation: explode 0.5s forwards;
40
+ }
41
+
42
+ @keyframes explode {
43
+ 0% { transform: scale(0.1); opacity: 1; }
44
+ 100% { transform: scale(3); opacity: 0; }
45
+ }
46
+
47
+ .powerup {
48
+ position: absolute;
49
+ width: 20px;
50
+ height: 20px;
51
+ background: radial-gradient(circle, rgba(0,255,255,1) 0%, rgba(0,100,255,1) 100%);
52
+ border-radius: 50%;
53
+ box-shadow: 0 0 10px cyan;
54
+ animation: pulse 1s infinite alternate;
55
+ }
56
+
57
+ @keyframes pulse {
58
+ 0% { transform: scale(1); }
59
+ 100% { transform: scale(1.2); }
60
+ }
61
+
62
+ .game-overlay {
63
+ position: absolute;
64
+ top: 0;
65
+ left: 0;
66
+ width: 100%;
67
+ height: 100%;
68
+ pointer-events: none;
69
+ }
70
+
71
+ .star {
72
+ position: absolute;
73
+ width: 2px;
74
+ height: 2px;
75
+ background-color: white;
76
+ border-radius: 50%;
77
+ animation: twinkle 2s infinite alternate;
78
+ }
79
+
80
+ @keyframes twinkle {
81
+ 0% { opacity: 0.2; }
82
+ 100% { opacity: 1; }
83
+ }
84
+ </style>
85
+ </head>
86
+ <body class="min-h-screen flex flex-col items-center justify-center text-white p-4">
87
+ <div class="relative w-full max-w-4xl">
88
+ <!-- Game Title -->
89
+ <h1 class="text-4xl md:text-5xl text-center mb-4 text-cyan-400 drop-shadow-lg">COSMIC DEFENDER</h1>
90
+
91
+ <!-- Game Stats -->
92
+ <div class="flex justify-between mb-4 text-sm md:text-base">
93
+ <div class="bg-black bg-opacity-50 p-2 rounded">
94
+ <span class="text-green-400">SCORE:</span> <span id="score">0</span>
95
+ </div>
96
+ <div class="bg-black bg-opacity-50 p-2 rounded">
97
+ <span class="text-red-400">LIVES:</span> <span id="lives">3</span>
98
+ </div>
99
+ <div class="bg-black bg-opacity-50 p-2 rounded">
100
+ <span class="text-yellow-400">LEVEL:</span> <span id="level">1</span>
101
+ </div>
102
+ <div class="bg-black bg-opacity-50 p-2 rounded">
103
+ <span class="text-blue-400">POWER:</span> <span id="power">NORMAL</span>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Game Canvas -->
108
+ <div class="relative">
109
+ <canvas id="gameCanvas" width="800" height="500" class="w-full h-auto border-4 border-cyan-500"></canvas>
110
+
111
+ <!-- Game Overlay (stars, particles, etc) -->
112
+ <div id="gameOverlay" class="game-overlay"></div>
113
+
114
+ <!-- Start Screen -->
115
+ <div id="startScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80">
116
+ <h2 class="text-3xl md:text-4xl mb-6 text-cyan-400">COSMIC DEFENDER</h2>
117
+ <p class="mb-8 text-center px-4">Defend Earth from alien invaders!</p>
118
+ <button id="startButton" class="bg-cyan-600 hover:bg-cyan-500 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 pointer-events-auto">
119
+ START MISSION
120
+ </button>
121
+ <div class="mt-8 text-xs text-gray-400">
122
+ <p>CONTROLS: Arrow Keys to Move | Space to Shoot</p>
123
+ <p class="mt-2">Collect power-ups for special abilities</p>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Game Over Screen -->
128
+ <div id="gameOverScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80 hidden">
129
+ <h2 class="text-3xl md:text-4xl mb-6 text-red-400">MISSION FAILED</h2>
130
+ <p class="mb-4">Final Score: <span id="finalScore" class="text-yellow-400">0</span></p>
131
+ <p class="mb-8">Level Reached: <span id="finalLevel" class="text-blue-400">1</span></p>
132
+ <button id="restartButton" class="bg-red-600 hover:bg-red-500 text-white font-bold py-3 px-8 rounded-full transition-all duration-300 transform hover:scale-105 pointer-events-auto">
133
+ TRY AGAIN
134
+ </button>
135
+ </div>
136
+
137
+ <!-- Level Complete Screen -->
138
+ <div id="levelCompleteScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80 hidden">
139
+ <h2 class="text-3xl md:text-4xl mb-6 text-green-400">LEVEL COMPLETE!</h2>
140
+ <p class="mb-8 text-xl">Preparing for level <span id="nextLevel" class="text-yellow-400">2</span></p>
141
+ <div class="w-3/4 h-2 bg-gray-800 rounded-full overflow-hidden">
142
+ <div id="levelProgress" class="h-full bg-green-500 rounded-full" style="width: 0%"></div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Mobile Controls (visible only on mobile) -->
148
+ <div id="mobileControls" class="mt-4 w-full max-w-md hidden">
149
+ <div class="grid grid-cols-3 gap-2">
150
+ <button id="leftBtn" class="bg-gray-800 hover:bg-gray-700 text-white p-4 rounded-lg col-start-1">←</button>
151
+ <button id="shootBtn" class="bg-red-600 hover:bg-red-500 text-white p-4 rounded-lg col-start-2">FIRE</button>
152
+ <button id="rightBtn" class="bg-gray-800 hover:bg-gray-700 text-white p-4 rounded-lg col-start-3">→</button>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Audio Elements -->
158
+ <audio id="shootSound" src="https://assets.mixkit.co/sfx/preview/mixkit-laser-weapon-shot-1681.mp3" preload="auto"></audio>
159
+ <audio id="explosionSound" src="https://assets.mixkit.co/sfx/preview/mixkit-explosion-impact-1684.mp3" preload="auto"></audio>
160
+ <audio id="powerupSound" src="https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3" preload="auto"></audio>
161
+ <audio id="gameOverSound" src="https://assets.mixkit.co/sfx/preview/mixkit-retro-arcade-lose-2027.mp3" preload="auto"></audio>
162
+ <audio id="levelCompleteSound" src="https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3" preload="auto"></audio>
163
+
164
+ <script>
165
+ // Game variables
166
+ const canvas = document.getElementById('gameCanvas');
167
+ const ctx = canvas.getContext('2d');
168
+ const startScreen = document.getElementById('startScreen');
169
+ const gameOverScreen = document.getElementById('gameOverScreen');
170
+ const levelCompleteScreen = document.getElementById('levelCompleteScreen');
171
+ const startButton = document.getElementById('startButton');
172
+ const restartButton = document.getElementById('restartButton');
173
+ const scoreElement = document.getElementById('score');
174
+ const livesElement = document.getElementById('lives');
175
+ const levelElement = document.getElementById('level');
176
+ const powerElement = document.getElementById('power');
177
+ const finalScoreElement = document.getElementById('finalScore');
178
+ const finalLevelElement = document.getElementById('finalLevel');
179
+ const nextLevelElement = document.getElementById('nextLevel');
180
+ const levelProgressElement = document.getElementById('levelProgress');
181
+ const mobileControls = document.getElementById('mobileControls');
182
+ const gameOverlay = document.getElementById('gameOverlay');
183
+
184
+ // Audio elements
185
+ const shootSound = document.getElementById('shootSound');
186
+ const explosionSound = document.getElementById('explosionSound');
187
+ const powerupSound = document.getElementById('powerupSound');
188
+ const gameOverSound = document.getElementById('gameOverSound');
189
+ const levelCompleteSound = document.getElementById('levelCompleteSound');
190
+
191
+ // Game state
192
+ let gameRunning = false;
193
+ let score = 0;
194
+ let lives = 3;
195
+ let level = 1;
196
+ let powerMode = 'NORMAL';
197
+ let powerTimer = 0;
198
+ let enemySpeed = 1;
199
+ let enemySpawnRate = 120;
200
+ let powerupSpawnRate = 500;
201
+ let frameCount = 0;
202
+
203
+ // Player
204
+ const player = {
205
+ x: canvas.width / 2 - 25,
206
+ y: canvas.height - 60,
207
+ width: 50,
208
+ height: 30,
209
+ speed: 5,
210
+ color: '#00FFFF',
211
+ bullets: [],
212
+ lastShot: 0,
213
+ shootDelay: 300,
214
+ isShooting: false
215
+ };
216
+
217
+ // Enemies
218
+ let enemies = [];
219
+
220
+ // Powerups
221
+ let powerups = [];
222
+
223
+ // Explosions
224
+ let explosions = [];
225
+
226
+ // Stars for background
227
+ let stars = [];
228
+
229
+ // Create stars
230
+ function createStars() {
231
+ stars = [];
232
+ for (let i = 0; i < 100; i++) {
233
+ stars.push({
234
+ x: Math.random() * canvas.width,
235
+ y: Math.random() * canvas.height,
236
+ size: Math.random() * 2 + 1,
237
+ opacity: Math.random()
238
+ });
239
+ }
240
+ }
241
+
242
+ // Draw stars
243
+ function drawStars() {
244
+ ctx.save();
245
+ stars.forEach(star => {
246
+ ctx.globalAlpha = star.opacity;
247
+ ctx.fillStyle = 'white';
248
+ ctx.fillRect(star.x, star.y, star.size, star.size);
249
+ });
250
+ ctx.restore();
251
+ }
252
+
253
+ // Create a star DOM element for the overlay
254
+ function createStarElement() {
255
+ const star = document.createElement('div');
256
+ star.className = 'star';
257
+ star.style.left = `${Math.random() * 100}%`;
258
+ star.style.top = `${Math.random() * 100}%`;
259
+ star.style.animationDelay = `${Math.random() * 2}s`;
260
+ star.style.width = `${Math.random() * 3 + 1}px`;
261
+ star.style.height = star.style.width;
262
+ gameOverlay.appendChild(star);
263
+
264
+ // Remove star after animation completes
265
+ setTimeout(() => {
266
+ star.remove();
267
+ }, 2000);
268
+ }
269
+
270
+ // Create star elements for overlay
271
+ function createStarElements() {
272
+ setInterval(createStarElement, 100);
273
+ }
274
+
275
+ // Player bullet
276
+ function createBullet() {
277
+ const now = Date.now();
278
+ if (now - player.lastShot < player.shootDelay) return;
279
+
280
+ player.bullets.push({
281
+ x: player.x + player.width / 2 - 2.5,
282
+ y: player.y,
283
+ width: 5,
284
+ height: 15,
285
+ speed: 7,
286
+ color: '#00FF00'
287
+ });
288
+
289
+ player.lastShot = now;
290
+
291
+ // Play shoot sound
292
+ shootSound.currentTime = 0;
293
+ shootSound.play();
294
+ }
295
+
296
+ // Enemy
297
+ function createEnemy() {
298
+ const size = Math.random() * 30 + 20;
299
+ enemies.push({
300
+ x: Math.random() * (canvas.width - size),
301
+ y: -size,
302
+ width: size,
303
+ height: size,
304
+ speed: Math.random() * enemySpeed + 1,
305
+ color: `hsl(${Math.random() * 60 + 300}, 100%, 50%)`,
306
+ health: Math.floor(size / 10)
307
+ });
308
+ }
309
+
310
+ // Powerup
311
+ function createPowerup() {
312
+ powerups.push({
313
+ x: Math.random() * (canvas.width - 20),
314
+ y: -20,
315
+ width: 20,
316
+ height: 20,
317
+ speed: 2,
318
+ type: Math.random() > 0.5 ? 'rapid' : 'shield'
319
+ });
320
+ }
321
+
322
+ // Explosion
323
+ function createExplosion(x, y) {
324
+ explosions.push({
325
+ x: x,
326
+ y: y,
327
+ radius: 5,
328
+ maxRadius: 30,
329
+ alpha: 1
330
+ });
331
+
332
+ // Play explosion sound
333
+ explosionSound.currentTime = 0;
334
+ explosionSound.play();
335
+ }
336
+
337
+ // Draw player
338
+ function drawPlayer() {
339
+ ctx.fillStyle = player.color;
340
+
341
+ // Ship body
342
+ ctx.beginPath();
343
+ ctx.moveTo(player.x + player.width / 2, player.y);
344
+ ctx.lineTo(player.x + player.width, player.y + player.height);
345
+ ctx.lineTo(player.x, player.y + player.height);
346
+ ctx.closePath();
347
+ ctx.fill();
348
+
349
+ // Ship cockpit
350
+ ctx.fillStyle = '#FFFFFF';
351
+ ctx.beginPath();
352
+ ctx.arc(player.x + player.width / 2, player.y + player.height / 2, 5, 0, Math.PI * 2);
353
+ ctx.fill();
354
+
355
+ // Draw shield if in power mode
356
+ if (powerMode === 'SHIELD') {
357
+ ctx.strokeStyle = 'rgba(0, 255, 255, 0.5)';
358
+ ctx.lineWidth = 2;
359
+ ctx.beginPath();
360
+ ctx.arc(player.x + player.width / 2, player.y + player.height / 2, 35, 0, Math.PI * 2);
361
+ ctx.stroke();
362
+ }
363
+ }
364
+
365
+ // Draw bullets
366
+ function drawBullets() {
367
+ player.bullets.forEach(bullet => {
368
+ ctx.fillStyle = bullet.color;
369
+ ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
370
+ });
371
+ }
372
+
373
+ // Draw enemies
374
+ function drawEnemies() {
375
+ enemies.forEach(enemy => {
376
+ ctx.fillStyle = enemy.color;
377
+ ctx.beginPath();
378
+ ctx.arc(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2, enemy.width / 2, 0, Math.PI * 2);
379
+ ctx.fill();
380
+
381
+ // Draw health indicator
382
+ if (enemy.health > 1) {
383
+ ctx.fillStyle = 'white';
384
+ ctx.font = '10px Arial';
385
+ ctx.textAlign = 'center';
386
+ ctx.fillText(enemy.health, enemy.x + enemy.width / 2, enemy.y + enemy.height / 2 + 3);
387
+ }
388
+ });
389
+ }
390
+
391
+ // Draw powerups
392
+ function drawPowerups() {
393
+ powerups.forEach(powerup => {
394
+ ctx.fillStyle = powerup.type === 'rapid' ? '#FF00FF' : '#00FFFF';
395
+ ctx.beginPath();
396
+ ctx.arc(powerup.x + powerup.width / 2, powerup.y + powerup.height / 2, powerup.width / 2, 0, Math.PI * 2);
397
+ ctx.fill();
398
+
399
+ // Draw icon
400
+ ctx.fillStyle = 'white';
401
+ ctx.font = '12px Arial';
402
+ ctx.textAlign = 'center';
403
+ ctx.fillText(powerup.type === 'rapid' ? 'R' : 'S', powerup.x + powerup.width / 2, powerup.y + powerup.height / 2 + 4);
404
+ });
405
+ }
406
+
407
+ // Draw explosions
408
+ function drawExplosions() {
409
+ explosions.forEach((explosion, index) => {
410
+ if (explosion.radius < explosion.maxRadius) {
411
+ explosion.radius += 2;
412
+ explosion.alpha -= 0.02;
413
+ } else {
414
+ explosions.splice(index, 1);
415
+ return;
416
+ }
417
+
418
+ const gradient = ctx.createRadialGradient(
419
+ explosion.x, explosion.y, 0,
420
+ explosion.x, explosion.y, explosion.radius
421
+ );
422
+ gradient.addColorStop(0, 'rgba(255, 255, 255, ' + explosion.alpha + ')');
423
+ gradient.addColorStop(0.3, 'rgba(255, 215, 0, ' + explosion.alpha + ')');
424
+ gradient.addColorStop(0.6, 'rgba(255, 69, 0, ' + explosion.alpha * 0.7 + ')');
425
+ gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
426
+
427
+ ctx.fillStyle = gradient;
428
+ ctx.beginPath();
429
+ ctx.arc(explosion.x, explosion.y, explosion.radius, 0, Math.PI * 2);
430
+ ctx.fill();
431
+ });
432
+ }
433
+
434
+ // Update bullets
435
+ function updateBullets() {
436
+ player.bullets.forEach((bullet, index) => {
437
+ bullet.y -= bullet.speed;
438
+
439
+ // Remove bullets that are off screen
440
+ if (bullet.y + bullet.height < 0) {
441
+ player.bullets.splice(index, 1);
442
+ }
443
+ });
444
+ }
445
+
446
+ // Update enemies
447
+ function updateEnemies() {
448
+ enemies.forEach((enemy, index) => {
449
+ enemy.y += enemy.speed;
450
+
451
+ // Remove enemies that are off screen
452
+ if (enemy.y > canvas.height) {
453
+ enemies.splice(index, 1);
454
+ loseLife();
455
+ }
456
+ });
457
+ }
458
+
459
+ // Update powerups
460
+ function updatePowerups() {
461
+ powerups.forEach((powerup, index) => {
462
+ powerup.y += powerup.speed;
463
+
464
+ // Remove powerups that are off screen
465
+ if (powerup.y > canvas.height) {
466
+ powerups.splice(index, 1);
467
+ }
468
+ });
469
+ }
470
+
471
+ // Check collisions
472
+ function checkCollisions() {
473
+ // Bullet-enemy collisions
474
+ player.bullets.forEach((bullet, bulletIndex) => {
475
+ enemies.forEach((enemy, enemyIndex) => {
476
+ if (
477
+ bullet.x < enemy.x + enemy.width &&
478
+ bullet.x + bullet.width > enemy.x &&
479
+ bullet.y < enemy.y + enemy.height &&
480
+ bullet.y + bullet.height > enemy.y
481
+ ) {
482
+ // Hit enemy
483
+ enemy.health--;
484
+
485
+ // Remove bullet
486
+ player.bullets.splice(bulletIndex, 1);
487
+
488
+ // Create explosion
489
+ createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2);
490
+
491
+ // If enemy health is 0, remove it and add score
492
+ if (enemy.health <= 0) {
493
+ enemies.splice(enemyIndex, 1);
494
+ addScore(Math.floor(enemy.width));
495
+ }
496
+
497
+ return;
498
+ }
499
+ });
500
+ });
501
+
502
+ // Player-enemy collisions
503
+ enemies.forEach((enemy, index) => {
504
+ if (
505
+ player.x < enemy.x + enemy.width &&
506
+ player.x + player.width > enemy.x &&
507
+ player.y < enemy.y + enemy.height &&
508
+ player.y + player.height > enemy.y
509
+ ) {
510
+ // Only lose life if not in SHIELD mode
511
+ if (powerMode !== 'SHIELD') {
512
+ enemies.splice(index, 1);
513
+ loseLife();
514
+ createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2);
515
+ } else {
516
+ // Just destroy the enemy if in SHIELD mode
517
+ enemies.splice(index, 1);
518
+ addScore(Math.floor(enemy.width));
519
+ createExplosion(enemy.x + enemy.width / 2, enemy.y + enemy.height / 2);
520
+ }
521
+ }
522
+ });
523
+
524
+ // Player-powerup collisions
525
+ powerups.forEach((powerup, index) => {
526
+ if (
527
+ player.x < powerup.x + powerup.width &&
528
+ player.x + player.width > powerup.x &&
529
+ player.y < powerup.y + powerup.height &&
530
+ player.y + player.height > powerup.y
531
+ ) {
532
+ // Apply powerup
533
+ if (powerup.type === 'rapid') {
534
+ activatePowerMode('RAPID');
535
+ } else {
536
+ activatePowerMode('SHIELD');
537
+ }
538
+
539
+ // Remove powerup
540
+ powerups.splice(index, 1);
541
+
542
+ // Play powerup sound
543
+ powerupSound.currentTime = 0;
544
+ powerupSound.play();
545
+ }
546
+ });
547
+ }
548
+
549
+ // Add score
550
+ function addScore(points) {
551
+ score += points;
552
+ scoreElement.textContent = score;
553
+ }
554
+
555
+ // Lose life
556
+ function loseLife() {
557
+ lives--;
558
+ livesElement.textContent = lives;
559
+
560
+ if (lives <= 0) {
561
+ gameOver();
562
+ } else {
563
+ // Reset player position
564
+ player.x = canvas.width / 2 - 25;
565
+ player.y = canvas.height - 60;
566
+ }
567
+ }
568
+
569
+ // Activate power mode
570
+ function activatePowerMode(type) {
571
+ powerMode = type;
572
+ powerTimer = 500; // 5 seconds at 60fps
573
+
574
+ if (type === 'RAPID') {
575
+ player.shootDelay = 100;
576
+ powerElement.textContent = 'RAPID FIRE';
577
+ powerElement.className = 'text-purple-400';
578
+ } else {
579
+ powerElement.textContent = 'SHIELD';
580
+ powerElement.className = 'text-cyan-400';
581
+ }
582
+ }
583
+
584
+ // Update power mode timer
585
+ function updatePowerMode() {
586
+ if (powerTimer > 0) {
587
+ powerTimer--;
588
+
589
+ if (powerTimer === 0) {
590
+ powerMode = 'NORMAL';
591
+ player.shootDelay = 300;
592
+ powerElement.textContent = 'NORMAL';
593
+ powerElement.className = 'text-white';
594
+ }
595
+ }
596
+ }
597
+
598
+ // Level up
599
+ function levelUp() {
600
+ level++;
601
+ levelElement.textContent = level;
602
+
603
+ // Increase difficulty
604
+ enemySpeed += 0.2;
605
+ if (enemySpawnRate > 30) enemySpawnRate -= 10;
606
+
607
+ // Show level complete screen
608
+ showLevelComplete();
609
+ }
610
+
611
+ // Show level complete screen
612
+ function showLevelComplete() {
613
+ gameRunning = false;
614
+ levelCompleteScreen.classList.remove('hidden');
615
+ nextLevelElement.textContent = level;
616
+
617
+ // Play level complete sound
618
+ levelCompleteSound.currentTime = 0;
619
+ levelCompleteSound.play();
620
+
621
+ // Animate progress bar
622
+ let progress = 0;
623
+ const interval = setInterval(() => {
624
+ progress += 2;
625
+ levelProgressElement.style.width = `${progress}%`;
626
+
627
+ if (progress >= 100) {
628
+ clearInterval(interval);
629
+ setTimeout(() => {
630
+ levelCompleteScreen.classList.add('hidden');
631
+ gameRunning = true;
632
+ }, 500);
633
+ }
634
+ }, 50);
635
+ }
636
+
637
+ // Game over
638
+ function gameOver() {
639
+ gameRunning = false;
640
+ gameOverScreen.classList.remove('hidden');
641
+ finalScoreElement.textContent = score;
642
+ finalLevelElement.textContent = level - 1;
643
+
644
+ // Play game over sound
645
+ gameOverSound.currentTime = 0;
646
+ gameOverSound.play();
647
+ }
648
+
649
+ // Reset game
650
+ function resetGame() {
651
+ score = 0;
652
+ lives = 3;
653
+ level = 1;
654
+ powerMode = 'NORMAL';
655
+ powerTimer = 0;
656
+ enemySpeed = 1;
657
+ enemySpawnRate = 120;
658
+
659
+ player.x = canvas.width / 2 - 25;
660
+ player.y = canvas.height - 60;
661
+ player.bullets = [];
662
+ player.lastShot = 0;
663
+ player.shootDelay = 300;
664
+
665
+ enemies = [];
666
+ powerups = [];
667
+ explosions = [];
668
+
669
+ scoreElement.textContent = score;
670
+ livesElement.textContent = lives;
671
+ levelElement.textContent = level;
672
+ powerElement.textContent = powerMode;
673
+ powerElement.className = 'text-white';
674
+
675
+ gameOverScreen.classList.add('hidden');
676
+ startScreen.classList.add('hidden');
677
+
678
+ gameRunning = true;
679
+ }
680
+
681
+ // Game loop
682
+ function gameLoop() {
683
+ if (!gameRunning) return;
684
+
685
+ // Clear canvas
686
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
687
+
688
+ // Draw background
689
+ drawStars();
690
+
691
+ // Spawn enemies
692
+ if (frameCount % enemySpawnRate === 0) {
693
+ createEnemy();
694
+ }
695
+
696
+ // Spawn powerups
697
+ if (frameCount % powerupSpawnRate === 0) {
698
+ createPowerup();
699
+ }
700
+
701
+ // Auto-shoot if in rapid fire mode and player is shooting
702
+ if (powerMode === 'RAPID' && player.isShooting && frameCount % 10 === 0) {
703
+ createBullet();
704
+ }
705
+
706
+ // Update game objects
707
+ updateBullets();
708
+ updateEnemies();
709
+ updatePowerups();
710
+ updatePowerMode();
711
+ checkCollisions();
712
+
713
+ // Draw game objects
714
+ drawBullets();
715
+ drawEnemies();
716
+ drawPowerups();
717
+ drawExplosions();
718
+ drawPlayer();
719
+
720
+ // Check for level up (every 10 enemies destroyed)
721
+ if (score >= level * 1000) {
722
+ levelUp();
723
+ }
724
+
725
+ frameCount++;
726
+ requestAnimationFrame(gameLoop);
727
+ }
728
+
729
+ // Event listeners
730
+ startButton.addEventListener('click', () => {
731
+ startScreen.classList.add('hidden');
732
+ resetGame();
733
+ gameLoop();
734
+ });
735
+
736
+ restartButton.addEventListener('click', resetGame);
737
+
738
+ // Keyboard controls
739
+ document.addEventListener('keydown', (e) => {
740
+ if (!gameRunning) return;
741
+
742
+ switch (e.key) {
743
+ case 'ArrowLeft':
744
+ player.x = Math.max(0, player.x - player.speed);
745
+ break;
746
+ case 'ArrowRight':
747
+ player.x = Math.min(canvas.width - player.width, player.x + player.speed);
748
+ break;
749
+ case ' ':
750
+ player.isShooting = true;
751
+ createBullet();
752
+ break;
753
+ }
754
+ });
755
+
756
+ document.addEventListener('keyup', (e) => {
757
+ if (e.key === ' ') {
758
+ player.isShooting = false;
759
+ }
760
+ });
761
+
762
+ // Touch controls for mobile
763
+ let touchStartX = 0;
764
+ let touchEndX = 0;
765
+
766
+ canvas.addEventListener('touchstart', (e) => {
767
+ e.preventDefault();
768
+ touchStartX = e.touches[0].clientX;
769
+ player.isShooting = true;
770
+ createBullet();
771
+ });
772
+
773
+ canvas.addEventListener('touchmove', (e) => {
774
+ e.preventDefault();
775
+ touchEndX = e.touches[0].clientX;
776
+
777
+ if (touchEndX < touchStartX - 10) {
778
+ // Swipe left
779
+ player.x = Math.max(0, player.x - player.speed * 2);
780
+ touchStartX = touchEndX;
781
+ } else if (touchEndX > touchStartX + 10) {
782
+ // Swipe right
783
+ player.x = Math.min(canvas.width - player.width, player.x + player.speed * 2);
784
+ touchStartX = touchEndX;
785
+ }
786
+ });
787
+
788
+ canvas.addEventListener('touchend', (e) => {
789
+ e.preventDefault();
790
+ player.isShooting = false;
791
+ });
792
+
793
+ // Mobile button controls
794
+ leftBtn.addEventListener('touchstart', () => {
795
+ player.x = Math.max(0, player.x - player.speed);
796
+ });
797
+
798
+ rightBtn.addEventListener('touchstart', () => {
799
+ player.x = Math.min(canvas.width - player.width, player.x + player.speed);
800
+ });
801
+
802
+ shootBtn.addEventListener('touchstart', () => {
803
+ player.isShooting = true;
804
+ createBullet();
805
+ });
806
+
807
+ shootBtn.addEventListener('touchend', () => {
808
+ player.isShooting = false;
809
+ });
810
+
811
+ // Check if mobile device
812
+ function isMobile() {
813
+ return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
814
+ }
815
+
816
+ // Initialize game
817
+ function init() {
818
+ createStars();
819
+ createStarElements();
820
+
821
+ if (isMobile()) {
822
+ mobileControls.classList.remove('hidden');
823
+ }
824
+ }
825
+
826
+ // Start the game
827
+ init();
828
+ </script>
829
+ <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 <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mycosoft/mycosoftgame" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
830
+ </html>