Hugging Face's logo

Spaces:
stroumphs
/
paddlebound
Running

App Files Community
stroumphs commited on
Commit
00414f2
·
verified ·
1 Parent(s): f600923

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +193 -18
index.html CHANGED
@@ -93,6 +93,47 @@
93
  color: #00ffff;
94
  font-weight: bold;
95
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  </style>
97
  </head>
98
  <body>
@@ -102,6 +143,10 @@
102
  <div>Score: <span id="score">0</span></div>
103
  <div>Lives: <span id="lives">3</span></div>
104
  <div>Level: <span id="level">1</span></div>
 
 
 
 
105
  </div>
106
 
107
  <div id="startScreen">
@@ -109,7 +154,9 @@
109
  <p class="instructions">
110
  Defend your sector from the alien invasion!<br>
111
  Use <span class="highlight">mouse</span> to move your ship and <span class="highlight">click</span> to shoot.<br>
112
- Destroy aliens before they reach the bottom of the screen!
 
 
113
  </p>
114
  <button id="startButton">START MISSION</button>
115
  </div>
@@ -117,9 +164,13 @@
117
  <div id="gameOverScreen">
118
  <h1>MISSION FAILED</h1>
119
  <p>Your final score: <span id="finalScore">0</span></p>
 
120
  <button id="restartButton">TRY AGAIN</button>
121
  </div>
122
 
 
 
 
123
  <script>
124
  // Game canvas setup
125
  const canvas = document.getElementById('gameCanvas');
@@ -139,6 +190,11 @@
139
  let alienSpawnInterval = 2000;
140
  let alienSpeed = 1;
141
  let alienHealth = 1;
 
 
 
 
 
142
 
143
  // Player spaceship
144
  const player = {
@@ -156,17 +212,29 @@
156
  const scoreElement = document.getElementById('score');
157
  const livesElement = document.getElementById('lives');
158
  const levelElement = document.getElementById('level');
 
 
159
  const finalScoreElement = document.getElementById('finalScore');
 
160
  const startScreen = document.getElementById('startScreen');
161
  const gameOverScreen = document.getElementById('gameOverScreen');
162
  const startButton = document.getElementById('startButton');
163
  const restartButton = document.getElementById('restartButton');
 
 
164
 
165
  // Event listeners
166
  startButton.addEventListener('click', startGame);
167
  restartButton.addEventListener('click', startGame);
168
  canvas.addEventListener('mousemove', movePlayer);
169
  canvas.addEventListener('click', shoot);
 
 
 
 
 
 
 
170
 
171
  // Resize handler
172
  window.addEventListener('resize', () => {
@@ -187,10 +255,18 @@
187
  alienSpawnInterval = 2000;
188
  alienSpeed = 1;
189
  alienHealth = 1;
 
 
 
 
190
 
191
  scoreElement.textContent = score;
192
  livesElement.textContent = lives;
193
  levelElement.textContent = level;
 
 
 
 
194
 
195
  startScreen.style.display = 'none';
196
  gameOverScreen.style.display = 'none';
@@ -199,6 +275,37 @@
199
  requestAnimationFrame(gameLoop);
200
  }
201
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
202
  // Game loop
203
  function gameLoop(timestamp) {
204
  if (!gameRunning) return;
@@ -293,23 +400,50 @@
293
 
294
  player.lastShot = now;
295
 
296
- bullets.push({
297
- x: player.x,
298
- y: player.y - player.height / 2,
299
- width: 3,
300
- height: 15,
301
- speed: 10,
302
- color: '#00ffff'
303
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
304
 
305
  // Muzzle flash effect
306
- for (let i = 0; i < 5; i++) {
307
  particles.push({
308
  x: player.x,
309
  y: player.y - player.height / 2,
310
- radius: Math.random() * 3 + 1,
311
- color: `hsl(${Math.random() * 60 + 180}, 100%, 50%)`,
312
- speed: Math.random() * 3 - 1.5,
 
313
  life: 20,
314
  decay: Math.random() * 0.2 + 0.8
315
  });
@@ -320,7 +454,10 @@
320
  function updateBullets() {
321
  for (let i = bullets.length - 1; i >= 0; i--) {
322
  const bullet = bullets[i];
323
- bullet.y -= bullet.speed;
 
 
 
324
 
325
  // Draw bullet
326
  ctx.fillStyle = bullet.color;
@@ -332,13 +469,16 @@
332
  y: bullet.y + bullet.height,
333
  radius: Math.random() * 2 + 1,
334
  color: bullet.color,
335
- speed: 0,
 
336
  life: 10,
337
  decay: 0.9
338
  });
339
 
340
  // Remove bullets that are off screen
341
- if (bullet.y + bullet.height < 0) {
 
 
342
  bullets.splice(i, 1);
343
  }
344
  }
@@ -418,8 +558,12 @@
418
  );
419
 
420
  score += alien.points;
 
421
  scoreElement.textContent = score;
422
  aliens.splice(i, 1);
 
 
 
423
  break;
424
  }
425
  }
@@ -438,6 +582,36 @@
438
  }
439
  }
440
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
441
  // Create explosion effect
442
  function createExplosion(x, y, color, particleCount) {
443
  for (let i = 0; i < particleCount; i++) {
@@ -459,8 +633,8 @@
459
  for (let i = particles.length - 1; i >= 0; i--) {
460
  const p = particles[i];
461
 
462
- p.x += p.speedX || p.speed;
463
- p.y += p.speedY || p.speed;
464
  p.life *= p.decay;
465
 
466
  ctx.globalAlpha = p.life / 100;
@@ -502,6 +676,7 @@
502
  function gameOver() {
503
  gameRunning = false;
504
  finalScoreElement.textContent = score;
 
505
  gameOverScreen.style.display = 'flex';
506
  }
507
  </script>
 
93
  color: #00ffff;
94
  font-weight: bold;
95
  }
96
+
97
+ .powerBar {
98
+ margin-top: 10px;
99
+ height: 10px;
100
+ background: #333;
101
+ border-radius: 5px;
102
+ overflow: hidden;
103
+ }
104
+
105
+ .powerFill {
106
+ height: 100%;
107
+ background: linear-gradient(to right, #00aaff, #00ffff);
108
+ width: 0%;
109
+ transition: width 0.3s;
110
+ }
111
+
112
+ #bulletModeBtn {
113
+ position: absolute;
114
+ bottom: 20px;
115
+ left: 50%;
116
+ transform: translateX(-50%);
117
+ padding: 10px 20px;
118
+ font-size: 16px;
119
+ background: linear-gradient(to bottom, #aa00aa, #880088);
120
+ z-index: 5;
121
+ }
122
+
123
+ #bulletModeBtn:hover {
124
+ background: linear-gradient(to bottom, #cc00cc, #aa00aa);
125
+ }
126
+
127
+ .bullet-mode-indicator {
128
+ position: absolute;
129
+ bottom: 60px;
130
+ left: 50%;
131
+ transform: translateX(-50%);
132
+ color: white;
133
+ font-size: 14px;
134
+ text-shadow: 0 0 5px #ff00ff;
135
+ z-index: 5;
136
+ }
137
  </style>
138
  </head>
139
  <body>
 
143
  <div>Score: <span id="score">0</span></div>
144
  <div>Lives: <span id="lives">3</span></div>
145
  <div>Level: <span id="level">1</span></div>
146
+ <div>Bullet Power: <span id="bulletPower">1</span>/5</div>
147
+ <div class="powerBar">
148
+ <div class="powerFill" id="powerFill"></div>
149
+ </div>
150
  </div>
151
 
152
  <div id="startScreen">
 
154
  <p class="instructions">
155
  Defend your sector from the alien invasion!<br>
156
  Use <span class="highlight">mouse</span> to move your ship and <span class="highlight">click</span> to shoot.<br>
157
+ Press <span class="highlight">SPACE</span> to switch between spread and parallel bullet modes.<br>
158
+ Destroy aliens to increase your bullet power!<br>
159
+ <span class="highlight">Every 5 kills</span> gives you an additional bullet (max 5)!
160
  </p>
161
  <button id="startButton">START MISSION</button>
162
  </div>
 
164
  <div id="gameOverScreen">
165
  <h1>MISSION FAILED</h1>
166
  <p>Your final score: <span id="finalScore">0</span></p>
167
+ <p>Max bullet power: <span id="finalPower">1</span>/5</p>
168
  <button id="restartButton">TRY AGAIN</button>
169
  </div>
170
 
171
+ <button id="bulletModeBtn">SWITCH TO PARALLEL MODE (SPACE)</button>
172
+ <div class="bullet-mode-indicator">Current Mode: SPREAD</div>
173
+
174
  <script>
175
  // Game canvas setup
176
  const canvas = document.getElementById('gameCanvas');
 
190
  let alienSpawnInterval = 2000;
191
  let alienSpeed = 1;
192
  let alienHealth = 1;
193
+ let kills = 0;
194
+ let bulletPower = 1;
195
+ let maxBulletPower = 1;
196
+ let bulletMode = 'spread'; // 'spread' or 'parallel'
197
+ const MAX_BULLETS = 5;
198
 
199
  // Player spaceship
200
  const player = {
 
212
  const scoreElement = document.getElementById('score');
213
  const livesElement = document.getElementById('lives');
214
  const levelElement = document.getElementById('level');
215
+ const bulletPowerElement = document.getElementById('bulletPower');
216
+ const powerFillElement = document.getElementById('powerFill');
217
  const finalScoreElement = document.getElementById('finalScore');
218
+ const finalPowerElement = document.getElementById('finalPower');
219
  const startScreen = document.getElementById('startScreen');
220
  const gameOverScreen = document.getElementById('gameOverScreen');
221
  const startButton = document.getElementById('startButton');
222
  const restartButton = document.getElementById('restartButton');
223
+ const bulletModeBtn = document.getElementById('bulletModeBtn');
224
+ const bulletModeIndicator = document.querySelector('.bullet-mode-indicator');
225
 
226
  // Event listeners
227
  startButton.addEventListener('click', startGame);
228
  restartButton.addEventListener('click', startGame);
229
  canvas.addEventListener('mousemove', movePlayer);
230
  canvas.addEventListener('click', shoot);
231
+ bulletModeBtn.addEventListener('click', toggleBulletMode);
232
+ document.addEventListener('keydown', (e) => {
233
+ if (e.code === 'Space') {
234
+ e.preventDefault();
235
+ toggleBulletMode();
236
+ }
237
+ });
238
 
239
  // Resize handler
240
  window.addEventListener('resize', () => {
 
255
  alienSpawnInterval = 2000;
256
  alienSpeed = 1;
257
  alienHealth = 1;
258
+ kills = 0;
259
+ bulletPower = 1;
260
+ maxBulletPower = 1;
261
+ bulletMode = 'spread';
262
 
263
  scoreElement.textContent = score;
264
  livesElement.textContent = lives;
265
  levelElement.textContent = level;
266
+ bulletPowerElement.textContent = `${bulletPower}/${MAX_BULLETS}`;
267
+ powerFillElement.style.width = '0%';
268
+ bulletModeBtn.textContent = 'SWITCH TO PARALLEL MODE (SPACE)';
269
+ bulletModeIndicator.textContent = 'Current Mode: SPREAD';
270
 
271
  startScreen.style.display = 'none';
272
  gameOverScreen.style.display = 'none';
 
275
  requestAnimationFrame(gameLoop);
276
  }
277
 
278
+ // Toggle bullet mode
279
+ function toggleBulletMode() {
280
+ if (!gameRunning) return;
281
+
282
+ bulletMode = bulletMode === 'spread' ? 'parallel' : 'spread';
283
+
284
+ if (bulletMode === 'spread') {
285
+ bulletModeBtn.textContent = 'SWITCH TO PARALLEL MODE (SPACE)';
286
+ bulletModeBtn.style.background = 'linear-gradient(to bottom, #aa00aa, #880088)';
287
+ bulletModeIndicator.textContent = 'Current Mode: SPREAD';
288
+ } else {
289
+ bulletModeBtn.textContent = 'SWITCH TO SPREAD MODE (SPACE)';
290
+ bulletModeBtn.style.background = 'linear-gradient(to bottom, #00aa00, #008800)';
291
+ bulletModeIndicator.textContent = 'Current Mode: PARALLEL';
292
+ }
293
+
294
+ // Visual feedback
295
+ for (let i = 0; i < 20; i++) {
296
+ particles.push({
297
+ x: player.x,
298
+ y: player.y,
299
+ radius: Math.random() * 8 + 2,
300
+ color: bulletMode === 'spread' ? '#ff00ff' : '#00ff00',
301
+ speedX: Math.random() * 6 - 3,
302
+ speedY: Math.random() * 6 - 3,
303
+ life: Math.random() * 30 + 20,
304
+ decay: Math.random() * 0.1 + 0.9
305
+ });
306
+ }
307
+ }
308
+
309
  // Game loop
310
  function gameLoop(timestamp) {
311
  if (!gameRunning) return;
 
400
 
401
  player.lastShot = now;
402
 
403
+ // Create bullets based on current bullet power and mode
404
+ if (bulletMode === 'spread') {
405
+ // Spread mode - bullets fan out in an arc
406
+ for (let i = 0; i < bulletPower; i++) {
407
+ // Calculate angle offset for each bullet
408
+ const angleOffset = (i - (bulletPower - 1) / 2) * 0.3; // Spread angle
409
+
410
+ bullets.push({
411
+ x: player.x,
412
+ y: player.y - player.height / 2,
413
+ width: 3,
414
+ height: 15,
415
+ speedX: Math.sin(angleOffset) * 3, // Horizontal speed for spread
416
+ speedY: -10, // Base upward speed
417
+ color: '#00ffff'
418
+ });
419
+ }
420
+ } else {
421
+ // Parallel mode - bullets move straight up in parallel lines
422
+ for (let i = 0; i < bulletPower; i++) {
423
+ // Calculate horizontal offset for each bullet
424
+ const xOffset = (i - (bulletPower - 1) / 2) * 15;
425
+
426
+ bullets.push({
427
+ x: player.x + xOffset,
428
+ y: player.y - player.height / 2,
429
+ width: 3,
430
+ height: 15,
431
+ speedX: 0, // No horizontal movement
432
+ speedY: -10, // Upward speed
433
+ color: '#00ff00' // Different color for parallel mode
434
+ });
435
+ }
436
+ }
437
 
438
  // Muzzle flash effect
439
+ for (let j = 0; j < 10; j++) {
440
  particles.push({
441
  x: player.x,
442
  y: player.y - player.height / 2,
443
+ radius: Math.random() * 5 + 2,
444
+ color: bulletMode === 'spread' ? '#00ffff' : '#00ff00',
445
+ speedX: (Math.random() - 0.5) * 4,
446
+ speedY: Math.random() * -5,
447
  life: 20,
448
  decay: Math.random() * 0.2 + 0.8
449
  });
 
454
  function updateBullets() {
455
  for (let i = bullets.length - 1; i >= 0; i--) {
456
  const bullet = bullets[i];
457
+
458
+ // Update position based on speed
459
+ bullet.x += bullet.speedX || 0;
460
+ bullet.y += bullet.speedY;
461
 
462
  // Draw bullet
463
  ctx.fillStyle = bullet.color;
 
469
  y: bullet.y + bullet.height,
470
  radius: Math.random() * 2 + 1,
471
  color: bullet.color,
472
+ speedX: 0,
473
+ speedY: 0,
474
  life: 10,
475
  decay: 0.9
476
  });
477
 
478
  // Remove bullets that are off screen
479
+ if (bullet.y + bullet.height < 0 ||
480
+ bullet.x < 0 ||
481
+ bullet.x > canvas.width) {
482
  bullets.splice(i, 1);
483
  }
484
  }
 
558
  );
559
 
560
  score += alien.points;
561
+ kills++;
562
  scoreElement.textContent = score;
563
  aliens.splice(i, 1);
564
+
565
+ // Check for bullet power increase
566
+ updateBulletPower();
567
  break;
568
  }
569
  }
 
582
  }
583
  }
584
 
585
+ // Update bullet power based on kills
586
+ function updateBulletPower() {
587
+ // Every 5 kills increases bullet power (max 5)
588
+ const newPower = Math.min(Math.floor(kills / 5) + 1, MAX_BULLETS);
589
+
590
+ if (newPower > bulletPower) {
591
+ bulletPower = newPower;
592
+ maxBulletPower = Math.max(maxBulletPower, bulletPower);
593
+ bulletPowerElement.textContent = `${bulletPower}/${MAX_BULLETS}`;
594
+
595
+ // Power up effect
596
+ for (let i = 0; i < 30; i++) {
597
+ particles.push({
598
+ x: player.x,
599
+ y: player.y,
600
+ radius: Math.random() * 10 + 5,
601
+ color: bulletMode === 'spread' ? '#00ffff' : '#00ff00',
602
+ speedX: Math.random() * 6 - 3,
603
+ speedY: Math.random() * 6 - 3,
604
+ life: Math.random() * 30 + 20,
605
+ decay: Math.random() * 0.1 + 0.9
606
+ });
607
+ }
608
+ }
609
+
610
+ // Update power bar
611
+ const powerProgress = (kills % 5) / 5 * 100;
612
+ powerFillElement.style.width = powerProgress + '%';
613
+ }
614
+
615
  // Create explosion effect
616
  function createExplosion(x, y, color, particleCount) {
617
  for (let i = 0; i < particleCount; i++) {
 
633
  for (let i = particles.length - 1; i >= 0; i--) {
634
  const p = particles[i];
635
 
636
+ p.x += p.speedX || 0;
637
+ p.y += p.speedY || 0;
638
  p.life *= p.decay;
639
 
640
  ctx.globalAlpha = p.life / 100;
 
676
  function gameOver() {
677
  gameRunning = false;
678
  finalScoreElement.textContent = score;
679
+ finalPowerElement.textContent = `${maxBulletPower}/${MAX_BULLETS}`;
680
  gameOverScreen.style.display = 'flex';
681
  }
682
  </script>