Hugging Face's logo

Spaces:
ALLEN20250302
/
coding-generation
Running

App Files Community
ALLEN20250302 commited on
Commit
91da9c5
·
verified ·
1 Parent(s): 2870001

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +193 -443
index.html CHANGED
@@ -2,490 +2,240 @@
2
  <html lang="zh-CN">
3
  <head>
4
  <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>2048 数字合并游戏</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
- /* 自定义数字块颜色 */
11
- .tile-2 { background-color: #eee4da; color: #776e65; }
12
- .tile-4 { background-color: #ede0c8; color: #776e65; }
13
- .tile-8 { background-color: #f2b179; color: #f9f6f2; }
14
- .tile-16 { background-color: #f59563; color: #f9f6f2; }
15
- .tile-32 { background-color: #f67c5f; color: #f9f6f2; }
16
- .tile-64 { background-color: #f65e3b; color: #f9f6f2; }
17
- .tile-128 { background-color: #edcf72; color: #f9f6f2; font-size: 45px; }
18
- .tile-256 { background-color: #edcc61; color: #f9f6f2; font-size: 45px; }
19
- .tile-512 { background-color: #edc850; color: #f9f6f2; font-size: 45px; }
20
- .tile-1024 { background-color: #edc53f; color: #f9f6f2; font-size: 35px; }
21
- .tile-2048 { background-color: #edc22e; color: #f9f6f2; font-size: 35px; }
22
- .tile-super { background-color: #3c3a32; color: #f9f6f2; font-size: 30px; }
23
-
24
- /* 动画效果 */
25
- @keyframes appear {
26
- 0% { transform: scale(0); }
27
- 100% { transform: scale(1); }
28
- }
29
-
30
- @keyframes pop {
31
- 0% { transform: scale(0); }
32
- 50% { transform: scale(1.2); }
33
- 100% { transform: scale(1); }
34
  }
35
 
36
- .tile-new {
37
- animation: appear 0.2s ease-in-out;
 
 
 
 
 
38
  }
39
 
40
- .tile-merged {
41
- animation: pop 0.2s ease-in-out;
42
- z-index: 10;
 
 
 
 
 
 
43
  }
44
 
45
- /* 游戏板样式 */
46
- .game-board {
47
- touch-action: none;
48
- position: relative;
49
- background: #bbada0;
50
- border-radius: 6px;
51
- padding: 15px;
52
- margin: 0 auto;
53
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
54
  }
55
 
56
- .grid-cell {
57
- background: rgba(238, 228, 218, 0.35);
58
- border-radius: 3px;
 
59
  }
60
 
61
- .tile {
62
  position: absolute;
63
- border-radius: 3px;
64
- font-weight: bold;
 
 
65
  display: flex;
 
66
  justify-content: center;
67
  align-items: center;
68
- transition: all 0.1s ease-in-out;
69
- }
70
-
71
- /* 响应式调整 */
72
- @media (max-width: 520px) {
73
- .tile-128, .tile-256, .tile-512 { font-size: 35px; }
74
- .tile-1024, .tile-2048, .tile-super { font-size: 25px; }
75
  }
76
  </style>
77
  </head>
78
- <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
79
- <div class="w-full max-w-md mx-auto">
80
- <div class="flex justify-between items-center mb-4">
81
- <h1 class="text-4xl font-bold text-gray-800">2048</h1>
82
- <div class="flex space-x-2">
83
- <div class="bg-gray-800 text-white px-4 py-2 rounded text-center">
84
- <div class="text-sm">分数</div>
85
- <div id="score" class="font-bold">0</div>
86
- </div>
87
- <div class="bg-gray-800 text-white px-4 py-2 rounded text-center">
88
- <div class="text-sm">最高分</div>
89
- <div id="best-score" class="font-bold">0</div>
90
- </div>
91
- </div>
92
- </div>
93
-
94
- <div class="flex justify-between items-center mb-4">
95
- <p class="text-gray-600">合并相同的数字，得到2048!</p>
96
- <button id="new-game-btn" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded transition">
97
- <i class="fas fa-redo mr-1"></i> 新游戏
98
- </button>
99
- </div>
100
 
101
- <div id="game-container" class="game-board">
102
- <div id="grid-container" class="grid grid-cols-4 gap-4 relative">
103
- <!-- 4x4网格 -->
104
- <div class="grid-cell w-full aspect-square"></div>
105
- <div class="grid-cell w-full aspect-square"></div>
106
- <div class="grid-cell w-full aspect-square"></div>
107
- <div class="grid-cell w-full aspect-square"></div>
108
- <div class="grid-cell w-full aspect-square"></div>
109
- <div class="grid-cell w-full aspect-square"></div>
110
- <div class="grid-cell w-full aspect-square"></div>
111
- <div class="grid-cell w-full aspect-square"></div>
112
- <div class="grid-cell w-full aspect-square"></div>
113
- <div class="grid-cell w-full aspect-square"></div>
114
- <div class="grid-cell w-full aspect-square"></div>
115
- <div class="grid-cell w-full aspect-square"></div>
116
- <div class="grid-cell w-full aspect-square"></div>
117
- <div class="grid-cell w-full aspect-square"></div>
118
- <div class="grid-cell w-full aspect-square"></div>
119
- <div class="grid-cell w-full aspect-square"></div>
120
  </div>
121
  </div>
122
 
123
- <div class="mt-4 text-gray-600 text-sm">
124
- <p><i class="fas fa-arrow-up mr-1"></i> <i class="fas fa-arrow-down mr-1"></i> <i class="fas fa-arrow-left mr-1"></i> <i class="fas fa-arrow-right mr-1"></i> 使用方向键或滑动屏幕移动方块</p>
125
- </div>
126
- </div>
127
-
128
- <!-- 游戏结束弹窗 -->
129
- <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
130
- <div class="bg-white p-6 rounded-lg max-w-sm w-full mx-4">
131
- <h2 class="text-2xl font-bold mb-4 text-center" id="game-over-title">游戏结束!</h2>
132
- <p class="text-center mb-4">你的最终得分: <span id="final-score" class="font-bold">0</span></p>
133
- <div class="flex justify-center space-x-4">
134
- <button id="try-again-btn" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded transition">
135
- 再试一次
136
- </button>
137
- <button id="share-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition">
138
- <i class="fas fa-share-alt mr-1"></i> 分享
139
  </button>
140
  </div>
141
- </div>
142
- </div>
143
-
144
- <!-- 胜利弹窗 -->
145
- <div id="win-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
146
- <div class="bg-white p-6 rounded-lg max-w-sm w-full mx-4">
147
- <h2 class="text-2xl font-bold mb-4 text-center text-yellow-500">恭喜你赢了!</h2>
148
- <p class="text-center mb-4">你成功达到了2048!</p>
149
- <p class="text-center mb-4">当前得分: <span id="win-score" class="font-bold">0</span></p>
150
- <div class="flex justify-center space-x-4">
151
- <button id="continue-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition">
152
- 继续游戏
153
- </button>
154
- <button id="new-game-win-btn" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded transition">
155
- 新游戏
156
  </button>
157
  </div>
158
  </div>
 
 
 
 
 
159
  </div>
160
 
161
  <script>
162
- document.addEventListener('DOMContentLoaded', () => {
163
- // 游戏状态
164
- const gameState = {
165
- grid: Array(4).fill().map(() => Array(4).fill(0)),
166
- score: 0,
167
- bestScore: localStorage.getItem('bestScore') || 0,
168
- gameOver: false,
169
- won: false,
170
- keepPlaying: false
171
- };
172
-
173
- // DOM元素
174
- const gridContainer = document.getElementById('grid-container');
175
- const scoreElement = document.getElementById('score');
176
- const bestScoreElement = document.getElementById('best-score');
177
- const newGameBtn = document.getElementById('new-game-btn');
178
- const gameOverModal = document.getElementById('game-over-modal');
179
- const winModal = document.getElementById('win-modal');
180
- const tryAgainBtn = document.getElementById('try-again-btn');
181
- const continueBtn = document.getElementById('continue-btn');
182
- const newGameWinBtn = document.getElementById('new-game-win-btn');
183
- const finalScoreElement = document.getElementById('final-score');
184
- const winScoreElement = document.getElementById('win-score');
185
- const shareBtn = document.getElementById('share-btn');
186
-
187
- // 初始化游戏
188
- function initGame() {
189
- // 重置游戏状态
190
- gameState.grid = Array(4).fill().map(() => Array(4).fill(0));
191
- gameState.score = 0;
192
- gameState.gameOver = false;
193
- gameState.won = false;
194
- gameState.keepPlaying = false;
195
-
196
- // 更新UI
197
- updateScore();
198
- clearTiles();
199
-
200
- // 添加初始方块
201
- addRandomTile();
202
- addRandomTile();
203
-
204
- // 隐藏模态框
205
- gameOverModal.classList.add('hidden');
206
- winModal.classList.add('hidden');
207
- }
208
-
209
- // 清除所有方块
210
- function clearTiles() {
211
- const tiles = document.querySelectorAll('.tile');
212
- tiles.forEach(tile => tile.remove());
213
- }
214
-
215
- // 添加随机方块
216
- function addRandomTile() {
217
- if (isGridFull()) return;
218
-
219
- let value = Math.random() < 0.9 ? 2 : 4;
220
- let emptyCells = [];
221
-
222
- // 找到所有空单元格
223
- for (let i = 0; i < 4; i++) {
224
- for (let j = 0; j < 4; j++) {
225
- if (gameState.grid[i][j] === 0) {
226
- emptyCells.push({x: i, y: j});
227
- }
228
- }
229
- }
230
-
231
- // 随机选择一个空单元格
232
- const cell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
233
- gameState.grid[cell.x][cell.y] = value;
234
-
235
- // 创建并显示新方块
236
- createTile(cell.x, cell.y, value, true);
237
- }
238
-
239
- // 创建方块元素
240
- function createTile(x, y, value, isNew = false, isMerged = false) {
241
- const tile = document.createElement('div');
242
- tile.className = `tile tile-${value}`;
243
- if (value > 2048) tile.classList.add('tile-super');
244
- if (isNew) tile.classList.add('tile-new');
245
- if (isMerged) tile.classList.add('tile-merged');
246
-
247
- tile.textContent = value;
248
- tile.style.width = `calc(25% - 15px)`;
249
- tile.style.height = `calc(25% - 15px)`;
250
- tile.style.left = `${y * 25 + y * 15}%`;
251
- tile.style.top = `${x * 25 + x * 15}%`;
252
-
253
- gridContainer.appendChild(tile);
254
- return tile;
255
- }
256
-
257
- // 移动方块
258
- function moveTiles(direction) {
259
- if (gameState.gameOver) return;
260
-
261
- let moved = false;
262
- const newGrid = JSON.parse(JSON.stringify(gameState.grid));
263
-
264
- // 根据方向处理移动
265
- switch (direction) {
266
- case 'up':
267
- for (let j = 0; j < 4; j++) {
268
- const column = [newGrid[0][j], newGrid[1][j], newGrid[2][j], newGrid[3][j]];
269
- const result = moveAndMerge(column);
270
- for (let i = 0; i < 4; i++) {
271
- if (newGrid[i][j] !== result[i]) moved = true;
272
- newGrid[i][j] = result[i];
273
- }
274
- }
275
- break;
276
- case 'down':
277
- for (let j = 0; j < 4; j++) {
278
- const column = [newGrid[3][j], newGrid[2][j], newGrid[1][j], newGrid[0][j]];
279
- const result = moveAndMerge(column);
280
- for (let i = 0; i < 4; i++) {
281
- if (newGrid[3-i][j] !== result[i]) moved = true;
282
- newGrid[3-i][j] = result[i];
283
- }
284
- }
285
- break;
286
- case 'left':
287
- for (let i = 0; i < 4; i++) {
288
- const row = [...newGrid[i]];
289
- const result = moveAndMerge(row);
290
- for (let j = 0; j < 4; j++) {
291
- if (newGrid[i][j] !== result[j]) moved = true;
292
- newGrid[i][j] = result[j];
293
- }
294
- }
295
- break;
296
- case 'right':
297
- for (let i = 0; i < 4; i++) {
298
- const row = [...newGrid[i]].reverse();
299
- const result = moveAndMerge(row);
300
- for (let j = 0; j < 4; j++) {
301
- if (newGrid[i][3-j] !== result[j]) moved = true;
302
- newGrid[i][3-j] = result[j];
303
- }
304
- }
305
- break;
306
- }
307
-
308
- // 如果有移动，更新游戏状态
309
- if (moved) {
310
- gameState.grid = newGrid;
311
- clearTiles();
312
- renderTiles();
313
- addRandomTile();
314
-
315
- // 检查游戏是否结束
316
- if (isGameOver()) {
317
- gameState.gameOver = true;
318
- finalScoreElement.textContent = gameState.score;
319
- gameOverModal.classList.remove('hidden');
320
- }
321
-
322
- // 检查是否获胜
323
- if (!gameState.won && !gameState.keepPlaying && hasWon()) {
324
- gameState.won = true;
325
- winScoreElement.textContent = gameState.score;
326
- winModal.classList.remove('hidden');
327
- }
328
- }
329
- }
330
-
331
- // 移动和合并方块
332
- function moveAndMerge(line) {
333
- // 移除零值
334
- let filtered = line.filter(val => val !== 0);
335
- let result = [];
336
-
337
- // 合并相同的数字
338
- for (let i = 0; i < filtered.length; i++) {
339
- if (i < filtered.length - 1 && filtered[i] === filtered[i+1]) {
340
- result.push(filtered[i] * 2);
341
- gameState.score += filtered[i] * 2;
342
- updateScore();
343
- i++; // 跳过下一个元素
344
- } else {
345
- result.push(filtered[i]);
346
- }
347
- }
348
-
349
- // 填充剩余位置为零
350
- while (result.length < 4) {
351
- result.push(0);
352
- }
353
-
354
- return result;
355
- }
356
-
357
- // 渲染所有方块
358
- function renderTiles() {
359
- for (let i = 0; i < 4; i++) {
360
- for (let j = 0; j < 4; j++) {
361
- if (gameState.grid[i][j] !== 0) {
362
- createTile(i, j, gameState.grid[i][j]);
363
- }
364
- }
365
- }
366
- }
367
-
368
- // 更新分数显示
369
- function updateScore() {
370
- scoreElement.textContent = gameState.score;
371
- if (gameState.score > gameState.bestScore) {
372
- gameState.bestScore = gameState.score;
373
- localStorage.setItem('bestScore', gameState.bestScore);
374
- }
375
- bestScoreElement.textContent = gameState.bestScore;
376
- }
377
-
378
- // 检查网格是否已满
379
- function isGridFull() {
380
- for (let i = 0; i < 4; i++) {
381
- for (let j = 0; j < 4; j++) {
382
- if (gameState.grid[i][j] === 0) {
383
- return false;
384
- }
385
- }
386
- }
387
- return true;
388
- }
389
-
390
- // 检查游戏是否结束
391
- function isGameOver() {
392
- if (!isGridFull()) return false;
393
-
394
- // 检查是否有可合并的相邻方块
395
- for (let i = 0; i < 4; i++) {
396
- for (let j = 0; j < 4; j++) {
397
- const value = gameState.grid[i][j];
398
- // 检查右侧
399
- if (j < 3 && gameState.grid[i][j+1] === value) return false;
400
- // 检查下方
401
- if (i < 3 && gameState.grid[i+1][j] === value) return false;
402
- }
403
- }
404
-
405
- return true;
406
- }
407
-
408
- // 检查是否获胜
409
- function hasWon() {
410
- for (let i = 0; i < 4; i++) {
411
- for (let j = 0; j < 4; j++) {
412
- if (gameState.grid[i][j] === 2048) {
413
- return true;
414
- }
415
- }
416
- }
417
- return false;
418
- }
419
 
420
- // 触摸事件处理
421
- let touchStartX = 0;
422
- let touchStartY = 0;
423
- let touchEndX = 0;
424
- let touchEndY = 0;
425
 
426
- function handleTouchStart(e) {
427
- touchStartX = e.touches[0].clientX;
428
- touchStartY = e.touches[0].clientY;
429
- }
430
 
431
- function handleTouchEnd(e) {
432
- touchEndX = e.changedTouches[0].clientX;
433
- touchEndY = e.changedTouches[0].clientY;
434
- handleSwipe();
435
- }
436
 
437
- function handleSwipe() {
438
- const dx = touchEndX - touchStartX;
439
- const dy = touchEndY - touchStartY;
 
440
 
441
- // 确定主要移动方向
442
- if (Math.abs(dx) > Math.abs(dy)) {
443
- // 水平滑动
444
- if (dx > 50) {
445
- moveTiles('right');
446
- } else if (dx < -50) {
447
- moveTiles('left');
448
- }
449
- } else {
450
- // 垂直滑动
451
- if (dy > 50) {
452
- moveTiles('down');
453
- } else if (dy < -50) {
454
- moveTiles('up');
455
- }
456
  }
457
- }
458
-
459
- // 事件监听器
460
- document.addEventListener('keydown', (e) => {
461
- if (e.key === 'ArrowUp') {
462
- moveTiles('up');
463
- } else if (e.key === 'ArrowDown') {
464
- moveTiles('down');
465
- } else if (e.key === 'ArrowLeft') {
466
- moveTiles('left');
467
- } else if (e.key === 'ArrowRight') {
468
- moveTiles('right');
 
469
  }
470
  });
471
-
472
- gridContainer.addEventListener('touchstart', handleTouchStart, false);
473
- gridContainer.addEventListener('touchend', handleTouchEnd, false);
474
-
475
- newGameBtn.addEventListener('click', initGame);
476
- tryAgainBtn.addEventListener('click', initGame);
477
- continueBtn.addEventListener('click', () => {
478
- gameState.keepPlaying = true;
479
- winModal.classList.add('hidden');
480
- });
481
- newGameWinBtn.addEventListener('click', initGame);
482
- shareBtn.addEventListener('click', () => {
483
- alert('分享功能: 我在2048游戏中获得了' + gameState.score + '分!');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
484
  });
485
 
486
- // 初始化游戏
487
- initGame();
488
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
489
  </script>
490
  <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=ALLEN20250302/coding-generation" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
491
  </html>
 
2
  <html lang="zh-CN">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>气球爆破小游戏</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
 
8
  <style>
9
+ #game-container {
10
+ position: relative;
11
+ width: 100%;
12
+ height: 80vh;
13
+ background: linear-gradient(to bottom, #87CEEB 0%, #E0F7FA 100%);
14
+ overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  }
16
 
17
+ .balloon {
18
+ position: absolute;
19
+ width: 60px;
20
+ height: 80px;
21
+ border-radius: 50%;
22
+ cursor: pointer;
23
+ transition: transform 0.1s;
24
  }
25
 
26
+ .balloon:before {
27
+ content: "";
28
+ position: absolute;
29
+ width: 4px;
30
+ height: 40px;
31
+ background: #333;
32
+ bottom: -40px;
33
+ left: 50%;
34
+ transform: translateX(-50%);
35
  }
36
 
37
+ .pop {
38
+ transform: scale(1.5);
39
+ opacity: 0;
40
+ transition: all 0.2s;
 
 
 
 
 
41
  }
42
 
43
+ .score-panel {
44
+ background: rgba(255, 255, 255, 0.8);
45
+ border-radius: 10px;
46
+ padding: 10px;
47
  }
48
 
49
+ #start-screen, #game-over {
50
  position: absolute;
51
+ top: 0;
52
+ left: 0;
53
+ width: 100%;
54
+ height: 100%;
55
  display: flex;
56
+ flex-direction: column;
57
  justify-content: center;
58
  align-items: center;
59
+ background: rgba(0, 0, 0, 0.6);
60
+ z-index: 100;
 
 
 
 
 
61
  }
62
  </style>
63
  </head>
64
+ <body class="bg-blue-50 font-sans">
65
+ <div class="max-w-md mx-auto px-4 py-6">
66
+ <h1 class="text-3xl font-bold text-center text-blue-600 mb-4">气球爆破</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
 
68
+ <div class="flex justify-between items-center score-panel mb-4">
69
+ <div class="text-lg">
70
+ <span class="font-bold">分数:</span>
71
+ <span id="score">0</span>
72
+ </div>
73
+ <div class="text-lg">
74
+ <span class="font-bold">时间:</span>
75
+ <span id="time">60</span>秒
 
 
 
 
 
 
 
 
 
 
 
76
  </div>
77
  </div>
78
 
79
+ <div id="game-container">
80
+ <!-- 游戏界面 -->
81
+ <div id="start-screen">
82
+ <h2 class="text-3xl font-bold text-white mb-6">气球爆破</h2>
83
+ <p class="text-xl text-white mb-8">点击气球得分，60秒内得分最多!</p>
84
+ <button id="start-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg">
85
+ 开始游戏
 
 
 
 
 
 
 
 
 
86
  </button>
87
  </div>
88
+
89
+ <div id="game-over" style="display: none;">
90
+ <h2 class="text-3xl font-bold text-white mb-4">游戏结束!</h2>
91
+ <p class="text-2xl text-yellow-300 mb-4">最终得分: <span id="final-score">0</span></p>
92
+ <button id="restart-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-full text-xl shadow-lg">
93
+ 再来一次
 
 
 
 
 
 
 
 
 
94
  </button>
95
  </div>
96
  </div>
97
+
98
+ <div class="mt-6 text-center text-gray-600">
99
+ <p>点击上升的气球获得分数</p>
100
+ <p class="mt-2 text-sm">不同颜色气球分值不同</p>
101
+ </div>
102
  </div>
103
 
104
  <script>
105
+ // 游戏变量
106
+ let score = 0;
107
+ let timeLeft = 60;
108
+ let gameInterval;
109
+ let timer;
110
+ let balloonInterval;
111
+ let balloonCount = 0;
112
+ const maxBalloons = 15;
113
+
114
+ // DOM元素
115
+ const gameContainer = document.getElementById('game-container');
116
+ const startScreen = document.getElementById('start-screen');
117
+ const gameOverScreen = document.getElementById('game-over');
118
+ const startBtn = document.getElementById('start-btn');
119
+ const restartBtn = document.getElementById('restart-btn');
120
+ const scoreDisplay = document.getElementById('score');
121
+ const timeDisplay = document.getElementById('time');
122
+ const finalScoreDisplay = document.getElementById('final-score');
123
+
124
+ // 气球颜色及对应分数
125
+ const balloonTypes = [
126
+ { color: '#FF5252', score: 1 }, // 红色
127
+ { color: '#4CAF50', score: 2 }, // 绿色
128
+ { color: '#2196F3', score: 3 }, // 蓝色
129
+ { color: '#FFC107', score: 5 }, // 黄色
130
+ { color: '#9C27B0', score: 8 } // 紫色
131
+ ];
132
+
133
+ // 开始游戏
134
+ startBtn.addEventListener('click', startGame);
135
+ restartBtn.addEventListener('click', startGame);
136
+
137
+ function startGame() {
138
+ // 重置游戏状态
139
+ score = 0;
140
+ timeLeft = 60;
141
+ scoreDisplay.textContent = score;
142
+ timeDisplay.textContent = timeLeft;
143
+
144
+ // 清除现有气球
145
+ document.querySelectorAll('.balloon').forEach(balloon => {
146
+ balloon.remove();
147
+ });
148
+ balloonCount = 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
 
150
+ // 隐藏开始和结束画面
151
+ startScreen.style.display = 'none';
152
+ gameOverScreen.style.display = 'none';
 
 
153
 
154
+ // 启动游戏循环
155
+ gameInterval = setInterval(updateGame, 16);
 
 
156
 
157
+ // 启动气球创建
158
+ balloonInterval = setInterval(createBalloon, 800);
 
 
 
159
 
160
+ // 启动计时器
161
+ timer = setInterval(() => {
162
+ timeLeft--;
163
+ timeDisplay.textContent = timeLeft;
164
 
165
+ if (timeLeft <= 0) {
166
+ endGame();
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  }
168
+ }, 1000);
169
+ }
170
+
171
+ function updateGame() {
172
+ // 移动所有气球
173
+ document.querySelectorAll('.balloon').forEach(balloon => {
174
+ const top = parseInt(balloon.style.top);
175
+ balloon.style.top = (top - 1) + 'px';
176
+
177
+ // 移除超出屏幕的气球
178
+ if (top < -100) {
179
+ balloon.remove();
180
+ balloonCount--;
181
  }
182
  });
183
+ }
184
+
185
+ function createBalloon() {
186
+ if (balloonCount >= maxBalloons) return;
187
+
188
+ balloonCount++;
189
+
190
+ // 随机选择气球类型
191
+ const balloonType = balloonTypes[Math.floor(Math.random() * balloonTypes.length)];
192
+
193
+ // 创建气球元素
194
+ const balloon = document.createElement('div');
195
+ balloon.className = 'balloon';
196
+ balloon.dataset.score = balloonType.score;
197
+
198
+ // 设置气球样式
199
+ balloon.style.backgroundColor = balloonType.color;
200
+ balloon.style.boxShadow = `inset -5px -5px 10px rgba(0,0,0,0.2)`;
201
+ balloon.style.left = Math.random() * (gameContainer.offsetWidth - 60) + 'px';
202
+ balloon.style.top = gameContainer.offsetHeight + 'px';
203
+
204
+ // 气球点击事件
205
+ balloon.addEventListener('click', function() {
206
+ score += parseInt(this.dataset.score);
207
+ scoreDisplay.textContent = score;
208
+ this.classList.add('pop');
209
+
210
+ // 播放爆破音效
211
+ playPopSound();
212
+
213
+ // 移除气球
214
+ setTimeout(() => {
215
+ this.remove();
216
+ balloonCount--;
217
+ }, 200);
218
  });
219
 
220
+ gameContainer.appendChild(balloon);
221
+ }
222
+
223
+ function playPopSound() {
224
+ // 微信中需要使用wx.createInnerAudioContext()
225
+ const audio = new Audio();
226
+ audio.src = "data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU...";
227
+ audio.play().catch(e => console.log("无法播放音效:", e));
228
+ }
229
+
230
+ function endGame() {
231
+ clearInterval(gameInterval);
232
+ clearInterval(timer);
233
+ clearInterval(balloonInterval);
234
+
235
+ // 显示最终得分
236
+ finalScoreDisplay.textContent = score;
237
+ gameOverScreen.style.display = 'flex';
238
+ }
239
  </script>
240
  <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=ALLEN20250302/coding-generation" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
241
  </html>