Hugging Face's logo

Spaces:
vatsal-p-wa
/
flappybirdgame
Running

App Files Community
vatsal-p-wa commited on
Commit
af7ece3
·
verified ·
1 Parent(s): 2d309eb

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +470 -34
index.html CHANGED
@@ -3,47 +3,77 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Flappy Bird</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-color: #70c5ce;
15
  touch-action: manipulation;
 
 
16
  }
17
 
18
  #game-container {
19
  position: relative;
20
  width: 100vw;
21
  height: 100vh;
 
22
  }
23
 
24
- #game-canvas {
25
  position: absolute;
26
- top: 0;
27
- left: 0;
28
- width: 100%;
29
- height: 100%;
 
 
 
 
30
  }
31
 
32
  .pipe {
33
  position: absolute;
34
  width: 80px;
35
- background-color: #5f9e5f;
36
- border: 5px solid #3a6b3a;
37
  box-sizing: border-box;
 
 
 
 
 
 
 
 
 
 
 
38
  }
39
 
40
  .bird {
41
  position: absolute;
42
  width: 40px;
43
  height: 30px;
44
- background-color: #ffcc00;
45
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
46
  z-index: 10;
 
47
  }
48
 
49
  .bird:before {
@@ -51,7 +81,7 @@
51
  position: absolute;
52
  width: 12px;
53
  height: 12px;
54
- background-color: #ff6600;
55
  border-radius: 50%;
56
  top: 5px;
57
  right: 5px;
@@ -72,7 +102,7 @@
72
  position: absolute;
73
  width: 30px;
74
  height: 15px;
75
- background-color: #ffcc00;
76
  border-radius: 50% 50% 0 0;
77
  top: 15px;
78
  left: -15px;
@@ -90,15 +120,33 @@
90
  bottom: 0;
91
  width: 100%;
92
  height: 100px;
93
- background-color: #deb887;
94
- border-top: 5px solid #8b4513;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
95
  }
96
 
97
  .cloud {
98
  position: absolute;
99
  background-color: white;
100
  border-radius: 50%;
101
- opacity: 0.8;
 
 
102
  }
103
 
104
  #score-display {
@@ -108,9 +156,15 @@
108
  right: 0;
109
  text-align: center;
110
  color: white;
111
- font-size: 24px;
112
- text-shadow: 2px 2px 0 #000;
113
  z-index: 100;
 
 
 
 
 
 
114
  }
115
 
116
  #game-over {
@@ -119,7 +173,7 @@
119
  left: 0;
120
  width: 100%;
121
  height: 100%;
122
- background-color: rgba(0, 0, 0, 0.7);
123
  display: flex;
124
  flex-direction: column;
125
  justify-content: center;
@@ -127,6 +181,7 @@
127
  color: white;
128
  z-index: 200;
129
  display: none;
 
130
  }
131
 
132
  #start-screen {
@@ -135,57 +190,218 @@
135
  left: 0;
136
  width: 100%;
137
  height: 100%;
138
- background-color: rgba(0, 0, 0, 0.5);
139
  display: flex;
140
  flex-direction: column;
141
  justify-content: center;
142
  align-items: center;
143
  color: white;
144
  z-index: 200;
 
145
  }
146
 
147
  .btn {
148
- background-color: #ffcc00;
149
  color: #333;
150
  border: none;
151
  padding: 15px 30px;
152
  font-size: 16px;
153
  margin-top: 20px;
154
  cursor: pointer;
155
- border-radius: 5px;
156
  font-family: 'Press Start 2P', cursive;
157
- box-shadow: 0 4px 0 #cc9900;
158
  transition: all 0.1s;
 
 
 
 
 
 
 
 
 
159
  }
160
 
161
  .btn:active {
162
  transform: translateY(4px);
163
- box-shadow: 0 0 0 #cc9900;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  }
165
  </style>
166
  </head>
167
  <body class="flex items-center justify-center min-h-screen">
168
  <div id="game-container" class="relative overflow-hidden">
 
169
  <div id="score-display">0</div>
170
 
171
  <div id="start-screen">
172
- <h1 class="text-4xl mb-8 text-center">FLAPPY BIRD</h1>
173
- <p class="mb-4 text-center">Press SPACE or tap screen to jump</p>
174
- <button id="start-btn" class="btn">START GAME</button>
 
 
 
 
 
 
 
 
 
 
 
175
  </div>
176
 
177
  <div id="game-over">
178
- <h1 class="text-4xl mb-8">GAME OVER</h1>
179
- <p id="final-score" class="text-2xl mb-4">Score: 0</p>
180
- <p id="high-score" class="text-xl mb-8">High Score: 0</p>
181
- <button id="restart-btn" class="btn">PLAY AGAIN</button>
 
 
 
 
 
 
 
 
 
182
  </div>
183
 
184
  <div id="bird" class="bird">
185
  <div class="wing"></div>
186
  </div>
187
 
188
- <div id="ground" class="ground"></div>
 
 
 
 
 
 
 
189
  </div>
190
 
191
  <script>
@@ -193,14 +409,17 @@
193
  // Game elements
194
  const gameContainer = document.getElementById('game-container');
195
  const bird = document.getElementById('bird');
196
- const ground = document.getElementById('ground');
197
  const scoreDisplay = document.getElementById('score-display');
198
  const gameOverScreen = document.getElementById('game-over');
199
  const finalScoreDisplay = document.getElementById('final-score');
200
  const highScoreDisplay = document.getElementById('high-score');
 
201
  const startScreen = document.getElementById('start-screen');
202
  const startBtn = document.getElementById('start-btn');
203
  const restartBtn = document.getElementById('restart-btn');
 
 
204
 
205
  // Game variables
206
  let gameRunning = false;
@@ -248,6 +467,7 @@
248
  scoreDisplay.textContent = '0';
249
  gameOverScreen.style.display = 'none';
250
  highScoreDisplay.textContent = `High Score: ${highScore}`;
 
251
 
252
  // Start game loop
253
  gameRunning = true;
@@ -290,6 +510,9 @@
290
  // Move clouds
291
  moveClouds(deltaTime);
292
 
 
 
 
293
  // Check collisions
294
  if (checkCollisions()) {
295
  gameOver();
@@ -309,7 +532,7 @@
309
 
310
  // Create top pipe
311
  const topPipe = document.createElement('div');
312
- topPipe.className = 'pipe';
313
  topPipe.style.height = `${topHeight}px`;
314
  topPipe.style.top = '0';
315
  topPipe.style.left = `${gameContainer.clientWidth}px`;
@@ -317,12 +540,15 @@
317
 
318
  // Create bottom pipe
319
  const bottomPipe = document.createElement('div');
320
- bottomPipe.className = 'pipe';
321
  bottomPipe.style.height = `${containerHeight - ground.clientHeight - topHeight - pipeGap}px`;
322
  bottomPipe.style.bottom = `${ground.clientHeight}px`;
323
  bottomPipe.style.left = `${gameContainer.clientWidth}px`;
324
  gameContainer.appendChild(bottomPipe);
325
 
 
 
 
326
  pipes.push({
327
  element: topPipe,
328
  x: gameContainer.clientWidth,
@@ -338,6 +564,31 @@
338
  });
339
  }
340
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
341
  // Create a cloud
342
  function createCloud() {
343
  const size = Math.floor(Math.random() * 50) + 30;
@@ -347,6 +598,20 @@
347
  cloud.style.height = `${size}px`;
348
  cloud.style.top = `${Math.floor(Math.random() * (gameContainer.clientHeight / 2))}px`;
349
  cloud.style.left = `${gameContainer.clientWidth}px`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
350
  gameContainer.appendChild(cloud);
351
 
352
  clouds.push({
@@ -357,6 +622,12 @@
357
  });
358
  }
359
 
 
 
 
 
 
 
360
  // Move all pipes
361
  function movePipes(deltaTime) {
362
  for (let i = 0; i < pipes.length; i++) {
@@ -370,6 +641,7 @@
370
  if (i % 2 === 0) { // Only count for top pipe to avoid double counting
371
  score++;
372
  scoreDisplay.textContent = score;
 
373
 
374
  // Increase difficulty
375
  if (score % 5 === 0) {
@@ -404,6 +676,54 @@
404
  }
405
  }
406
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
407
  // Check for collisions
408
  function checkCollisions() {
409
  const birdRect = bird.getBoundingClientRect();
@@ -450,12 +770,116 @@
450
  finalScoreDisplay.textContent = `Score: ${score}`;
451
  highScoreDisplay.textContent = `High Score: ${highScore}`;
452
  gameOverScreen.style.display = 'flex';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
453
  }
454
 
455
  // Jump function
456
  function jump() {
457
  if (!gameRunning) return;
458
  velocity = -10;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
459
  }
460
 
461
  // Event listeners
@@ -475,6 +899,10 @@
475
  jump();
476
  });
477
 
 
 
 
 
478
  startBtn.addEventListener('click', () => {
479
  startScreen.style.display = 'none';
480
  initGame();
@@ -487,6 +915,14 @@
487
 
488
  // Initial setup
489
  highScoreDisplay.textContent = `High Score: ${highScore}`;
 
 
 
 
 
 
 
 
490
  });
491
  </script>
492
  <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=vatsal-p-wa/flappybirdgame" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Flappy Bird Deluxe</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
11
 
12
+ :root {
13
+ --sky-blue: #70c5ce;
14
+ --grass-green: #5f9e5f;
15
+ --dirt-brown: #8b4513;
16
+ --ground-tan: #deb887;
17
+ --bird-yellow: #ffcc00;
18
+ --bird-orange: #ff6600;
19
+ --pipe-green: #3a6b3a;
20
+ }
21
+
22
  body {
23
  font-family: 'Press Start 2P', cursive;
24
  overflow: hidden;
25
+ background-color: var(--sky-blue);
26
  touch-action: manipulation;
27
+ margin: 0;
28
+ padding: 0;
29
  }
30
 
31
  #game-container {
32
  position: relative;
33
  width: 100vw;
34
  height: 100vh;
35
+ overflow: hidden;
36
  }
37
 
38
+ .sun {
39
  position: absolute;
40
+ width: 80px;
41
+ height: 80px;
42
+ background: radial-gradient(circle, #ffde00 0%, #ff8c00 100%);
43
+ border-radius: 50%;
44
+ top: 50px;
45
+ right: 100px;
46
+ box-shadow: 0 0 40px 15px rgba(255, 215, 0, 0.4);
47
+ z-index: 1;
48
  }
49
 
50
  .pipe {
51
  position: absolute;
52
  width: 80px;
53
+ background-color: var(--grass-green);
54
+ border: 5px solid var(--pipe-green);
55
  box-sizing: border-box;
56
+ z-index: 5;
57
+ }
58
+
59
+ .pipe-top {
60
+ border-bottom: none;
61
+ border-radius: 10px 10px 0 0;
62
+ }
63
+
64
+ .pipe-bottom {
65
+ border-top: none;
66
+ border-radius: 0 0 10px 10px;
67
  }
68
 
69
  .bird {
70
  position: absolute;
71
  width: 40px;
72
  height: 30px;
73
+ background-color: var(--bird-yellow);
74
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
75
  z-index: 10;
76
+ transition: transform 0.1s ease-out;
77
  }
78
 
79
  .bird:before {
 
81
  position: absolute;
82
  width: 12px;
83
  height: 12px;
84
+ background-color: var(--bird-orange);
85
  border-radius: 50%;
86
  top: 5px;
87
  right: 5px;
 
102
  position: absolute;
103
  width: 30px;
104
  height: 15px;
105
+ background-color: var(--bird-yellow);
106
  border-radius: 50% 50% 0 0;
107
  top: 15px;
108
  left: -15px;
 
120
  bottom: 0;
121
  width: 100%;
122
  height: 100px;
123
+ background-color: var(--ground-tan);
124
+ border-top: 5px solid var(--dirt-brown);
125
+ z-index: 10;
126
+ }
127
+
128
+ .ground-pattern {
129
+ position: absolute;
130
+ bottom: 0;
131
+ width: 100%;
132
+ height: 20px;
133
+ background: repeating-linear-gradient(
134
+ 90deg,
135
+ var(--dirt-brown),
136
+ var(--dirt-brown) 10px,
137
+ var(--ground-tan) 10px,
138
+ var(--ground-tan) 20px
139
+ );
140
+ z-index: 11;
141
  }
142
 
143
  .cloud {
144
  position: absolute;
145
  background-color: white;
146
  border-radius: 50%;
147
+ opacity: 0.9;
148
+ filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
149
+ z-index: 2;
150
  }
151
 
152
  #score-display {
 
156
  right: 0;
157
  text-align: center;
158
  color: white;
159
+ font-size: 28px;
160
+ text-shadow: 3px 3px 0 #000;
161
  z-index: 100;
162
+ background-color: rgba(0, 0, 0, 0.4);
163
+ padding: 10px 20px;
164
+ border-radius: 10px;
165
+ width: fit-content;
166
+ margin: 0 auto;
167
+ border: 3px solid white;
168
  }
169
 
170
  #game-over {
 
173
  left: 0;
174
  width: 100%;
175
  height: 100%;
176
+ background-color: rgba(0, 0, 0, 0.8);
177
  display: flex;
178
  flex-direction: column;
179
  justify-content: center;
 
181
  color: white;
182
  z-index: 200;
183
  display: none;
184
+ backdrop-filter: blur(5px);
185
  }
186
 
187
  #start-screen {
 
190
  left: 0;
191
  width: 100%;
192
  height: 100%;
193
+ background-color: rgba(0, 0, 0, 0.6);
194
  display: flex;
195
  flex-direction: column;
196
  justify-content: center;
197
  align-items: center;
198
  color: white;
199
  z-index: 200;
200
+ backdrop-filter: blur(5px);
201
  }
202
 
203
  .btn {
204
+ background: linear-gradient(to bottom, #ffcc00, #ff9900);
205
  color: #333;
206
  border: none;
207
  padding: 15px 30px;
208
  font-size: 16px;
209
  margin-top: 20px;
210
  cursor: pointer;
211
+ border-radius: 10px;
212
  font-family: 'Press Start 2P', cursive;
213
+ box-shadow: 0 6px 0 #cc9900, 0 10px 20px rgba(0, 0, 0, 0.3);
214
  transition: all 0.1s;
215
+ position: relative;
216
+ overflow: hidden;
217
+ text-transform: uppercase;
218
+ letter-spacing: 1px;
219
+ }
220
+
221
+ .btn:hover {
222
+ transform: translateY(-2px);
223
+ box-shadow: 0 8px 0 #cc9900, 0 12px 20px rgba(0, 0, 0, 0.4);
224
  }
225
 
226
  .btn:active {
227
  transform: translateY(4px);
228
+ box-shadow: 0 2px 0 #cc9900;
229
+ }
230
+
231
+ .btn:after {
232
+ content: "";
233
+ position: absolute;
234
+ top: -50%;
235
+ right: -50%;
236
+ bottom: -50%;
237
+ left: -50%;
238
+ background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
239
+ transform: rotateZ(60deg) translate(-5em, 7.5em);
240
+ }
241
+
242
+ .btn:hover:after {
243
+ animation: shine 1.5s forwards;
244
+ }
245
+
246
+ @keyframes shine {
247
+ 100% {
248
+ transform: rotateZ(60deg) translate(1em, -9em);
249
+ }
250
+ }
251
+
252
+ .title {
253
+ font-size: 3.5rem;
254
+ margin-bottom: 1.5rem;
255
+ text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
256
+ color: #ffcc00;
257
+ position: relative;
258
+ animation: bounce 1s infinite alternate;
259
+ }
260
+
261
+ @keyframes bounce {
262
+ 0% { transform: translateY(0); }
263
+ 100% { transform: translateY(-10px); }
264
+ }
265
+
266
+ .instructions {
267
+ font-size: 1rem;
268
+ margin-bottom: 2rem;
269
+ text-align: center;
270
+ line-height: 1.6;
271
+ max-width: 80%;
272
+ }
273
+
274
+ .medal {
275
+ font-size: 3rem;
276
+ margin-bottom: 1rem;
277
+ animation: spin 2s linear infinite;
278
+ }
279
+
280
+ @keyframes spin {
281
+ 0% { transform: rotate(0deg); }
282
+ 100% { transform: rotate(360deg); }
283
+ }
284
+
285
+ .score-badge {
286
+ background: linear-gradient(135deg, #ff8a00, #ff0058);
287
+ padding: 10px 20px;
288
+ border-radius: 20px;
289
+ margin: 10px 0;
290
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
291
+ border: 2px solid white;
292
+ }
293
+
294
+ .floating {
295
+ animation: floating 3s ease-in-out infinite;
296
+ }
297
+
298
+ @keyframes floating {
299
+ 0% { transform: translateY(0px); }
300
+ 50% { transform: translateY(-10px); }
301
+ 100% { transform: translateY(0px); }
302
+ }
303
+
304
+ .particle {
305
+ position: absolute;
306
+ background-color: gold;
307
+ border-radius: 50%;
308
+ pointer-events: none;
309
+ z-index: 1000;
310
+ }
311
+
312
+ .controls {
313
+ position: absolute;
314
+ bottom: 120px;
315
+ left: 0;
316
+ right: 0;
317
+ display: flex;
318
+ justify-content: center;
319
+ gap: 20px;
320
+ z-index: 150;
321
+ display: none;
322
+ }
323
+
324
+ .control-btn {
325
+ width: 80px;
326
+ height: 80px;
327
+ border-radius: 50%;
328
+ background-color: rgba(255, 255, 255, 0.3);
329
+ backdrop-filter: blur(5px);
330
+ display: flex;
331
+ justify-content: center;
332
+ align-items: center;
333
+ font-size: 24px;
334
+ color: white;
335
+ border: 2px solid white;
336
+ cursor: pointer;
337
+ user-select: none;
338
+ }
339
+
340
+ @media (max-width: 768px) {
341
+ .controls {
342
+ display: flex;
343
+ }
344
+
345
+ .title {
346
+ font-size: 2.5rem;
347
+ }
348
+
349
+ .instructions {
350
+ font-size: 0.8rem;
351
+ }
352
  }
353
  </style>
354
  </head>
355
  <body class="flex items-center justify-center min-h-screen">
356
  <div id="game-container" class="relative overflow-hidden">
357
+ <div class="sun"></div>
358
  <div id="score-display">0</div>
359
 
360
  <div id="start-screen">
361
+ <div class="medal">
362
+ <i class="fas fa-medal"></i>
363
+ </div>
364
+ <h1 class="title floating">FLAPPY BIRD DELUXE</h1>
365
+ <div class="instructions">
366
+ <p>Press SPACE or tap screen to jump</p>
367
+ <p>Avoid the pipes and try to fly as far as you can!</p>
368
+ </div>
369
+ <button id="start-btn" class="btn">
370
+ <i class="fas fa-play" style="margin-right: 10px;"></i>START GAME
371
+ </button>
372
+ <div class="mt-8 text-sm opacity-70">
373
+ <p>High Score: <span id="menu-high-score">0</span></p>
374
+ </div>
375
  </div>
376
 
377
  <div id="game-over">
378
+ <div class="medal">
379
+ <i class="fas fa-trophy"></i>
380
+ </div>
381
+ <h1 class="title">GAME OVER</h1>
382
+ <div class="score-badge">
383
+ <p id="final-score">Score: 0</p>
384
+ </div>
385
+ <div class="score-badge">
386
+ <p id="high-score">High Score: 0</p>
387
+ </div>
388
+ <button id="restart-btn" class="btn">
389
+ <i class="fas fa-redo" style="margin-right: 10px;"></i>PLAY AGAIN
390
+ </button>
391
  </div>
392
 
393
  <div id="bird" class="bird">
394
  <div class="wing"></div>
395
  </div>
396
 
397
+ <div class="ground"></div>
398
+ <div class="ground-pattern"></div>
399
+
400
+ <div class="controls">
401
+ <div class="control-btn" id="jump-btn">
402
+ <i class="fas fa-arrow-up"></i>
403
+ </div>
404
+ </div>
405
  </div>
406
 
407
  <script>
 
409
  // Game elements
410
  const gameContainer = document.getElementById('game-container');
411
  const bird = document.getElementById('bird');
412
+ const ground = document.querySelector('.ground');
413
  const scoreDisplay = document.getElementById('score-display');
414
  const gameOverScreen = document.getElementById('game-over');
415
  const finalScoreDisplay = document.getElementById('final-score');
416
  const highScoreDisplay = document.getElementById('high-score');
417
+ const menuHighScore = document.getElementById('menu-high-score');
418
  const startScreen = document.getElementById('start-screen');
419
  const startBtn = document.getElementById('start-btn');
420
  const restartBtn = document.getElementById('restart-btn');
421
+ const jumpBtn = document.getElementById('jump-btn');
422
+ const sun = document.querySelector('.sun');
423
 
424
  // Game variables
425
  let gameRunning = false;
 
467
  scoreDisplay.textContent = '0';
468
  gameOverScreen.style.display = 'none';
469
  highScoreDisplay.textContent = `High Score: ${highScore}`;
470
+ menuHighScore.textContent = highScore;
471
 
472
  // Start game loop
473
  gameRunning = true;
 
510
  // Move clouds
511
  moveClouds(deltaTime);
512
 
513
+ // Animate sun
514
+ animateSun();
515
+
516
  // Check collisions
517
  if (checkCollisions()) {
518
  gameOver();
 
532
 
533
  // Create top pipe
534
  const topPipe = document.createElement('div');
535
+ topPipe.className = 'pipe pipe-top';
536
  topPipe.style.height = `${topHeight}px`;
537
  topPipe.style.top = '0';
538
  topPipe.style.left = `${gameContainer.clientWidth}px`;
 
540
 
541
  // Create bottom pipe
542
  const bottomPipe = document.createElement('div');
543
+ bottomPipe.className = 'pipe pipe-bottom';
544
  bottomPipe.style.height = `${containerHeight - ground.clientHeight - topHeight - pipeGap}px`;
545
  bottomPipe.style.bottom = `${ground.clientHeight}px`;
546
  bottomPipe.style.left = `${gameContainer.clientWidth}px`;
547
  gameContainer.appendChild(bottomPipe);
548
 
549
+ // Add pipe decorations
550
+ addPipeDecorations(topPipe, bottomPipe);
551
+
552
  pipes.push({
553
  element: topPipe,
554
  x: gameContainer.clientWidth,
 
564
  });
565
  }
566
 
567
+ // Add decorations to pipes
568
+ function addPipeDecorations(topPipe, bottomPipe) {
569
+ // Top pipe decoration
570
+ const topDecor = document.createElement('div');
571
+ topDecor.style.position = 'absolute';
572
+ topDecor.style.bottom = '0';
573
+ topDecor.style.left = '0';
574
+ topDecor.style.width = '100%';
575
+ topDecor.style.height = '20px';
576
+ topDecor.style.backgroundColor = '#3a6b3a';
577
+ topDecor.style.borderRadius = '5px 5px 0 0';
578
+ topPipe.appendChild(topDecor);
579
+
580
+ // Bottom pipe decoration
581
+ const bottomDecor = document.createElement('div');
582
+ bottomDecor.style.position = 'absolute';
583
+ bottomDecor.style.top = '0';
584
+ bottomDecor.style.left = '0';
585
+ bottomDecor.style.width = '100%';
586
+ bottomDecor.style.height = '20px';
587
+ bottomDecor.style.backgroundColor = '#3a6b3a';
588
+ bottomDecor.style.borderRadius = '0 0 5px 5px';
589
+ bottomPipe.appendChild(bottomDecor);
590
+ }
591
+
592
  // Create a cloud
593
  function createCloud() {
594
  const size = Math.floor(Math.random() * 50) + 30;
 
598
  cloud.style.height = `${size}px`;
599
  cloud.style.top = `${Math.floor(Math.random() * (gameContainer.clientHeight / 2))}px`;
600
  cloud.style.left = `${gameContainer.clientWidth}px`;
601
+
602
+ // Create cloud fluff
603
+ for (let i = 0; i < 3; i++) {
604
+ const fluff = document.createElement('div');
605
+ fluff.style.position = 'absolute';
606
+ fluff.style.backgroundColor = 'white';
607
+ fluff.style.borderRadius = '50%';
608
+ fluff.style.width = `${size * 0.7}px`;
609
+ fluff.style.height = `${size * 0.7}px`;
610
+ fluff.style.top = `${Math.random() * 20 - 10}px`;
611
+ fluff.style.left = `${Math.random() * 20 - 10}px`;
612
+ cloud.appendChild(fluff);
613
+ }
614
+
615
  gameContainer.appendChild(cloud);
616
 
617
  clouds.push({
 
622
  });
623
  }
624
 
625
+ // Animate sun
626
+ function animateSun() {
627
+ const time = Date.now() * 0.001;
628
+ sun.style.transform = `rotate(${time * 5}deg)`;
629
+ }
630
+
631
  // Move all pipes
632
  function movePipes(deltaTime) {
633
  for (let i = 0; i < pipes.length; i++) {
 
641
  if (i % 2 === 0) { // Only count for top pipe to avoid double counting
642
  score++;
643
  scoreDisplay.textContent = score;
644
+ createParticles(pipe.element);
645
 
646
  // Increase difficulty
647
  if (score % 5 === 0) {
 
676
  }
677
  }
678
 
679
+ // Create score particles
680
+ function createParticles(element) {
681
+ const rect = element.getBoundingClientRect();
682
+ const colors = ['#ffcc00', '#ff9900', '#ff6600', '#ffffff'];
683
+
684
+ for (let i = 0; i < 10; i++) {
685
+ const particle = document.createElement('div');
686
+ particle.className = 'particle';
687
+ particle.style.width = `${Math.random() * 10 + 5}px`;
688
+ particle.style.height = particle.style.width;
689
+ particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
690
+ particle.style.left = `${rect.left + rect.width / 2}px`;
691
+ particle.style.top = `${rect.top + rect.height / 2}px`;
692
+ document.body.appendChild(particle);
693
+
694
+ const angle = Math.random() * Math.PI * 2;
695
+ const velocity = Math.random() * 5 + 2;
696
+ const x = Math.cos(angle) * velocity;
697
+ const y = Math.sin(angle) * velocity;
698
+
699
+ let opacity = 1;
700
+ let posX = rect.left + rect.width / 2;
701
+ let posY = rect.top + rect.height / 2;
702
+ let size = parseFloat(particle.style.width);
703
+
704
+ const animate = () => {
705
+ opacity -= 0.02;
706
+ posX += x;
707
+ posY += y;
708
+ size *= 0.95;
709
+
710
+ particle.style.opacity = opacity;
711
+ particle.style.left = `${posX}px`;
712
+ particle.style.top = `${posY}px`;
713
+ particle.style.width = `${size}px`;
714
+ particle.style.height = `${size}px`;
715
+
716
+ if (opacity > 0) {
717
+ requestAnimationFrame(animate);
718
+ } else {
719
+ particle.parentNode.removeChild(particle);
720
+ }
721
+ };
722
+
723
+ animate();
724
+ }
725
+ }
726
+
727
  // Check for collisions
728
  function checkCollisions() {
729
  const birdRect = bird.getBoundingClientRect();
 
770
  finalScoreDisplay.textContent = `Score: ${score}`;
771
  highScoreDisplay.textContent = `High Score: ${highScore}`;
772
  gameOverScreen.style.display = 'flex';
773
+
774
+ // Create celebration particles
775
+ createCelebrationParticles();
776
+ }
777
+
778
+ // Create celebration particles
779
+ function createCelebrationParticles() {
780
+ const colors = ['#ffcc00', '#ff9900', '#ff6600', '#ffffff', '#00ff00', '#00ffff'];
781
+
782
+ for (let i = 0; i < 50; i++) {
783
+ const particle = document.createElement('div');
784
+ particle.className = 'particle';
785
+ particle.style.width = `${Math.random() * 15 + 5}px`;
786
+ particle.style.height = particle.style.width;
787
+ particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
788
+ particle.style.left = `${Math.random() * window.innerWidth}px`;
789
+ particle.style.top = `${Math.random() * window.innerHeight}px`;
790
+ document.body.appendChild(particle);
791
+
792
+ const angle = Math.random() * Math.PI * 2;
793
+ const velocity = Math.random() * 3 + 1;
794
+ const x = Math.cos(angle) * velocity;
795
+ const y = Math.sin(angle) * velocity;
796
+
797
+ let opacity = 1;
798
+ let posX = parseFloat(particle.style.left);
799
+ let posY = parseFloat(particle.style.top);
800
+ let size = parseFloat(particle.style.width);
801
+
802
+ const animate = () => {
803
+ opacity -= 0.01;
804
+ posX += x;
805
+ posY += y;
806
+ size *= 0.98;
807
+
808
+ particle.style.opacity = opacity;
809
+ particle.style.left = `${posX}px`;
810
+ particle.style.top = `${posY}px`;
811
+ particle.style.width = `${size}px`;
812
+ particle.style.height = `${size}px`;
813
+
814
+ if (opacity > 0) {
815
+ requestAnimationFrame(animate);
816
+ } else {
817
+ particle.parentNode.removeChild(particle);
818
+ }
819
+ };
820
+
821
+ animate();
822
+ }
823
  }
824
 
825
  // Jump function
826
  function jump() {
827
  if (!gameRunning) return;
828
  velocity = -10;
829
+
830
+ // Add jump animation
831
+ bird.style.transform = 'rotate(-30deg)';
832
+
833
+ // Create small particles
834
+ createJumpParticles();
835
+ }
836
+
837
+ // Create jump particles
838
+ function createJumpParticles() {
839
+ const birdRect = bird.getBoundingClientRect();
840
+ const colors = ['#ffcc00', '#ff9900'];
841
+
842
+ for (let i = 0; i < 5; i++) {
843
+ const particle = document.createElement('div');
844
+ particle.className = 'particle';
845
+ particle.style.width = `${Math.random() * 5 + 2}px`;
846
+ particle.style.height = particle.style.width;
847
+ particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
848
+ particle.style.left = `${birdRect.left + birdRect.width / 2}px`;
849
+ particle.style.top = `${birdRect.bottom}px`;
850
+ document.body.appendChild(particle);
851
+
852
+ const angle = Math.random() * Math.PI - Math.PI/2; // -90 to 90 degrees
853
+ const velocity = Math.random() * 3 + 1;
854
+ const x = Math.cos(angle) * velocity;
855
+ const y = Math.sin(angle) * velocity;
856
+
857
+ let opacity = 1;
858
+ let posX = birdRect.left + birdRect.width / 2;
859
+ let posY = birdRect.bottom;
860
+ let size = parseFloat(particle.style.width);
861
+
862
+ const animate = () => {
863
+ opacity -= 0.05;
864
+ posX += x;
865
+ posY += y;
866
+ size *= 0.9;
867
+
868
+ particle.style.opacity = opacity;
869
+ particle.style.left = `${posX}px`;
870
+ particle.style.top = `${posY}px`;
871
+ particle.style.width = `${size}px`;
872
+ particle.style.height = `${size}px`;
873
+
874
+ if (opacity > 0) {
875
+ requestAnimationFrame(animate);
876
+ } else {
877
+ particle.parentNode.removeChild(particle);
878
+ }
879
+ };
880
+
881
+ animate();
882
+ }
883
  }
884
 
885
  // Event listeners
 
899
  jump();
900
  });
901
 
902
+ jumpBtn.addEventListener('click', () => {
903
+ jump();
904
+ });
905
+
906
  startBtn.addEventListener('click', () => {
907
  startScreen.style.display = 'none';
908
  initGame();
 
915
 
916
  // Initial setup
917
  highScoreDisplay.textContent = `High Score: ${highScore}`;
918
+ menuHighScore.textContent = highScore;
919
+
920
+ // Create initial clouds
921
+ for (let i = 0; i < 5; i++) {
922
+ setTimeout(() => {
923
+ createCloud();
924
+ }, i * 600);
925
+ }
926
  });
927
  </script>
928
  <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=vatsal-p-wa/flappybirdgame" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>