Hugging Face's logo

Spaces:
busyhe
/
ModernTetris
Running

App Files Community
busyhe commited on
Commit
5f6f24a
·
verified ·
1 Parent(s): 8716cb4

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +685 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Busyhe
3
- emoji: 🐢
4
- colorFrom: purple
5
- colorTo: pink
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: busyhe
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: red
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,685 @@
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>Modern Tetris</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
+ @keyframes flash {
11
+ 0%, 100% { opacity: 1; }
12
+ 50% { opacity: 0.5; }
13
+ }
14
+
15
+ .flash-animation {
16
+ animation: flash 0.3s ease-in-out 2;
17
+ }
18
+
19
+ .game-container {
20
+ perspective: 1000px;
21
+ }
22
+
23
+ .tetris-block {
24
+ box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
25
+ transition: all 0.1s ease;
26
+ }
27
+
28
+ .tetris-block:hover {
29
+ transform: scale(1.05);
30
+ }
31
+
32
+ .next-piece-container {
33
+ background: rgba(255, 255, 255, 0.1);
34
+ backdrop-filter: blur(5px);
35
+ }
36
+
37
+ /* New class for locked pieces */
38
+ .locked-block {
39
+ position: relative;
40
+ overflow: hidden;
41
+ }
42
+
43
+ .locked-block::after {
44
+ content: '';
45
+ position: absolute;
46
+ top: 0;
47
+ left: 0;
48
+ right: 0;
49
+ bottom: 0;
50
+ background: rgba(255, 255, 255, 0.1);
51
+ z-index: 1;
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
56
+ <div class="max-w-4xl w-full">
57
+ <h1 class="text-4xl font-bold text-center mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
58
+ <i class="fas fa-gamepad mr-2"></i> Modern Tetris
59
+ </h1>
60
+
61
+ <div class="flex flex-col lg:flex-row items-center justify-center gap-8">
62
+ <!-- Game board -->
63
+ <div class="game-container relative">
64
+ <div id="game-board" class="grid grid-cols-10 grid-rows-20 gap-0.5 bg-gray-800 p-1 rounded-lg shadow-2xl border-2 border-gray-700"></div>
65
+ <div id="game-over" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-70 rounded-lg hidden">
66
+ <h2 class="text-3xl font-bold mb-4 text-red-500">Game Over!</h2>
67
+ <button id="restart-btn" class="px-6 py-2 bg-purple-600 hover:bg-purple-700 rounded-full font-semibold transition-all">
68
+ <i class="fas fa-redo mr-2"></i> Play Again
69
+ </button>
70
+ </div>
71
+ <div id="pause-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-70 rounded-lg hidden">
72
+ <h2 class="text-3xl font-bold mb-4 text-yellow-400">Paused</h2>
73
+ <button id="resume-btn" class="px-6 py-2 bg-green-600 hover:bg-green-700 rounded-full font-semibold transition-all">
74
+ <i class="fas fa-play mr-2"></i> Resume
75
+ </button>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Game info -->
80
+ <div class="flex flex-col gap-6 w-full lg:w-auto">
81
+ <!-- Next piece -->
82
+ <div class="next-piece-container p-4 rounded-lg border-2 border-gray-700">
83
+ <h3 class="text-xl font-semibold mb-3 text-center"><i class="fas fa-arrow-down mr-2"></i>Next Piece</h3>
84
+ <div id="next-piece" class="grid grid-cols-4 grid-rows-4 gap-1 w-32 h-32 mx-auto"></div>
85
+ </div>
86
+
87
+ <!-- Score and level -->
88
+ <div class="bg-gray-800 p-4 rounded-lg border-2 border-gray-700">
89
+ <div class="flex justify-between items-center mb-3">
90
+ <span class="font-medium"><i class="fas fa-star mr-2 text-yellow-400"></i>Score:</span>
91
+ <span id="score" class="font-bold text-xl">0</span>
92
+ </div>
93
+ <div class="flex justify-between items-center mb-3">
94
+ <span class="font-medium"><i class="fas fa-level-up-alt mr-2 text-blue-400"></i>Level:</span>
95
+ <span id="level" class="font-bold text-xl">1</span>
96
+ </div>
97
+ <div class="flex justify-between items-center">
98
+ <span class="font-medium"><i class="fas fa-layer-group mr-2 text-green-400"></i>Lines:</span>
99
+ <span id="lines" class="font-bold text-xl">0</span>
100
+ </div>
101
+ </div>
102
+
103
+ <!-- Controls -->
104
+ <div class="bg-gray-800 p-4 rounded-lg border-2 border-gray-700">
105
+ <h3 class="text-xl font-semibold mb-3 text-center"><i class="fas fa-keyboard mr-2"></i>Controls</h3>
106
+ <div class="grid grid-cols-2 gap-2 text-sm">
107
+ <div class="flex items-center">
108
+ <span class="bg-gray-700 px-2 py-1 rounded mr-2">← →</span>
109
+ <span>Move</span>
110
+ </div>
111
+ <div class="flex items-center">
112
+ <span class="bg-gray-700 px-2 py-1 rounded mr-2">↑</span>
113
+ <span>Rotate</span>
114
+ </div>
115
+ <div class="flex items-center">
116
+ <span class="bg-gray-700 px-2 py-1 rounded mr-2">↓</span>
117
+ <span>Soft Drop</span>
118
+ </div>
119
+ <div class="flex items-center">
120
+ <span class="bg-gray-700 px-2 py-1 rounded mr-2">Space</span>
121
+ <span>Hard Drop</span>
122
+ </div>
123
+ <div class="flex items-center">
124
+ <span class="bg-gray-700 px-2 py-1 rounded mr-2">P</span>
125
+ <span>Pause</span>
126
+ </div>
127
+ <div class="flex items-center">
128
+ <span class="bg-gray-700 px-2 py-1 rounded mr-2">R</span>
129
+ <span>Restart</span>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Buttons -->
135
+ <div class="flex gap-3">
136
+ <button id="start-btn" class="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg font-semibold transition-all">
137
+ <i class="fas fa-play mr-2"></i> Start
138
+ </button>
139
+ <button id="pause-btn" class="flex-1 px-4 py-2 bg-yellow-500 hover:bg-yellow-600 rounded-lg font-semibold transition-all">
140
+ <i class="fas fa-pause mr-2"></i> Pause
141
+ </button>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <script>
148
+ document.addEventListener('DOMContentLoaded', () => {
149
+ // Game constants
150
+ const COLS = 10;
151
+ const ROWS = 20;
152
+ const BLOCK_SIZE = 30;
153
+ const NEXT_PIECE_SIZE = 4;
154
+
155
+ // Game variables
156
+ let board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
157
+ let currentPiece = null;
158
+ let nextPiece = null;
159
+ let score = 0;
160
+ let level = 1;
161
+ let lines = 0;
162
+ let gameInterval = null;
163
+ let gameSpeed = 1000;
164
+ let isGameRunning = false;
165
+ let isPaused = false;
166
+
167
+ // Tetromino shapes and colors
168
+ const SHAPES = [
169
+ { shape: [[1, 1, 1, 1]], color: 'bg-cyan-500', name: 'I' },
170
+ { shape: [[1, 1], [1, 1]], color: 'bg-yellow-400', name: 'O' },
171
+ { shape: [[0, 1, 0], [1, 1, 1]], color: 'bg-purple-600', name: 'T' },
172
+ { shape: [[1, 1, 0], [0, 1, 1]], color: 'bg-red-500', name: 'Z' },
173
+ { shape: [[0, 1, 1], [1, 1, 0]], color: 'bg-green-500', name: 'S' },
174
+ { shape: [[1, 0, 0], [1, 1, 1]], color: 'bg-blue-500', name: 'L' },
175
+ { shape: [[0, 0, 1], [1, 1, 1]], color: 'bg-orange-500', name: 'J' }
176
+ ];
177
+
178
+ // DOM elements
179
+ const gameBoard = document.getElementById('game-board');
180
+ const nextPieceDisplay = document.getElementById('next-piece');
181
+ const scoreDisplay = document.getElementById('score');
182
+ const levelDisplay = document.getElementById('level');
183
+ const linesDisplay = document.getElementById('lines');
184
+ const gameOverScreen = document.getElementById('game-over');
185
+ const pauseScreen = document.getElementById('pause-screen');
186
+ const startBtn = document.getElementById('start-btn');
187
+ const pauseBtn = document.getElementById('pause-btn');
188
+ const restartBtn = document.getElementById('restart-btn');
189
+ const resumeBtn = document.getElementById('resume-btn');
190
+
191
+ // Initialize the game board
192
+ function initBoard() {
193
+ gameBoard.innerHTML = '';
194
+ gameBoard.style.width = `${COLS * BLOCK_SIZE + (COLS - 1)}px`;
195
+ gameBoard.style.height = `${ROWS * BLOCK_SIZE + (ROWS - 1)}px`;
196
+
197
+ for (let row = 0; row < ROWS; row++) {
198
+ for (let col = 0; col < COLS; col++) {
199
+ const cell = document.createElement('div');
200
+ cell.className = 'w-7 h-7 bg-gray-700 rounded-sm tetris-block';
201
+ cell.id = `cell-${row}-${col}`;
202
+ gameBoard.appendChild(cell);
203
+ }
204
+ }
205
+ }
206
+
207
+ // Initialize the next piece display
208
+ function initNextPieceDisplay() {
209
+ nextPieceDisplay.innerHTML = '';
210
+ nextPieceDisplay.style.width = `${NEXT_PIECE_SIZE * BLOCK_SIZE + (NEXT_PIECE_SIZE - 1)}px`;
211
+ nextPieceDisplay.style.height = `${NEXT_PIECE_SIZE * BLOCK_SIZE + (NEXT_PIECE_SIZE - 1)}px`;
212
+
213
+ for (let row = 0; row < NEXT_PIECE_SIZE; row++) {
214
+ for (let col = 0; col < NEXT_PIECE_SIZE; col++) {
215
+ const cell = document.createElement('div');
216
+ cell.className = 'w-7 h-7 bg-transparent rounded-sm';
217
+ cell.id = `next-cell-${row}-${col}`;
218
+ nextPieceDisplay.appendChild(cell);
219
+ }
220
+ }
221
+ }
222
+
223
+ // Generate a random tetromino
224
+ function randomPiece() {
225
+ const randomIndex = Math.floor(Math.random() * SHAPES.length);
226
+ return {
227
+ shape: SHAPES[randomIndex].shape,
228
+ color: SHAPES[randomIndex].color,
229
+ name: SHAPES[randomIndex].name,
230
+ pos: { x: Math.floor(COLS / 2) - 1, y: 0 }
231
+ };
232
+ }
233
+
234
+ // Draw the current piece on the board
235
+ function drawPiece() {
236
+ if (!currentPiece) return;
237
+
238
+ // First clear any non-locked blocks from the previous frame
239
+ const cells = gameBoard.querySelectorAll('div');
240
+ cells.forEach(cell => {
241
+ if (!cell.classList.contains('locked-block') &&
242
+ cell.className.includes('bg-') &&
243
+ !cell.className.includes('gray-700')) {
244
+ cell.className = 'w-7 h-7 bg-gray-700 rounded-sm tetris-block';
245
+ }
246
+ });
247
+
248
+ // Draw the current piece
249
+ for (let row = 0; row < currentPiece.shape.length; row++) {
250
+ for (let col = 0; col < currentPiece.shape[row].length; col++) {
251
+ if (currentPiece.shape[row][col]) {
252
+ const boardRow = currentPiece.pos.y + row;
253
+ const boardCol = currentPiece.pos.x + col;
254
+
255
+ if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
256
+ const cell = document.getElementById(`cell-${boardRow}-${boardCol}`);
257
+ if (cell && board[boardRow][boardCol] === 0) {
258
+ cell.className = `w-7 h-7 ${currentPiece.color} rounded-sm tetris-block`;
259
+ }
260
+ }
261
+ }
262
+ }
263
+ }
264
+ }
265
+
266
+ // Draw the next piece in the preview
267
+ function drawNextPiece() {
268
+ if (!nextPiece) return;
269
+
270
+ // Clear next piece display
271
+ const cells = nextPieceDisplay.querySelectorAll('div');
272
+ cells.forEach(cell => {
273
+ cell.className = 'w-7 h-7 bg-transparent rounded-sm';
274
+ });
275
+
276
+ // Center the piece in the 4x4 grid
277
+ const offsetX = Math.floor((NEXT_PIECE_SIZE - nextPiece.shape[0].length) / 2);
278
+ const offsetY = Math.floor((NEXT_PIECE_SIZE - nextPiece.shape.length) / 2);
279
+
280
+ for (let row = 0; row < nextPiece.shape.length; row++) {
281
+ for (let col = 0; col < nextPiece.shape[row].length; col++) {
282
+ if (nextPiece.shape[row][col]) {
283
+ const displayRow = offsetY + row;
284
+ const displayCol = offsetX + col;
285
+ const cell = document.getElementById(`next-cell-${displayRow}-${displayCol}`);
286
+ if (cell) {
287
+ cell.className = `w-7 h-7 ${nextPiece.color} rounded-sm tetris-block`;
288
+ }
289
+ }
290
+ }
291
+ }
292
+ }
293
+
294
+ // Clear the current piece from the board (without affecting locked blocks)
295
+ function clearPiece() {
296
+ if (!currentPiece) return;
297
+
298
+ for (let row = 0; row < currentPiece.shape.length; row++) {
299
+ for (let col = 0; col < currentPiece.shape[row].length; col++) {
300
+ if (currentPiece.shape[row][col]) {
301
+ const boardRow = currentPiece.pos.y + row;
302
+ const boardCol = currentPiece.pos.x + col;
303
+
304
+ if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
305
+ const cell = document.getElementById(`cell-${boardRow}-${boardCol}`);
306
+ if (cell && !cell.classList.contains('locked-block')) {
307
+ cell.className = 'w-7 h-7 bg-gray-700 rounded-sm tetris-block';
308
+ }
309
+ }
310
+ }
311
+ }
312
+ }
313
+ }
314
+
315
+ // Check for collisions
316
+ function collision() {
317
+ if (!currentPiece) return true;
318
+
319
+ for (let row = 0; row < currentPiece.shape.length; row++) {
320
+ for (let col = 0; col < currentPiece.shape[row].length; col++) {
321
+ if (currentPiece.shape[row][col]) {
322
+ const boardRow = currentPiece.pos.y + row;
323
+ const boardCol = currentPiece.pos.x + col;
324
+
325
+ if (boardRow >= ROWS || boardCol < 0 || boardCol >= COLS ||
326
+ (boardRow >= 0 && board[boardRow][boardCol])) {
327
+ return true;
328
+ }
329
+ }
330
+ }
331
+ }
332
+ return false;
333
+ }
334
+
335
+ // Rotate the current piece with wall kicks
336
+ function rotatePiece() {
337
+ if (!currentPiece) return;
338
+
339
+ // Clone the current piece to test rotation
340
+ const originalShape = currentPiece.shape;
341
+ const originalPos = {...currentPiece.pos};
342
+
343
+ // Transpose and reverse rows to rotate 90 degrees clockwise
344
+ const newShape = currentPiece.shape[0].map((_, i) =>
345
+ currentPiece.shape.map(row => row[i]).reverse()
346
+ );
347
+
348
+ currentPiece.shape = newShape;
349
+
350
+ // Wall kick tests (tries to shift piece if rotation causes collision)
351
+ if (collision()) {
352
+ // Try shifting left
353
+ currentPiece.pos.x--;
354
+ if (collision()) {
355
+ // Try shifting right
356
+ currentPiece.pos.x += 2;
357
+ if (collision()) {
358
+ // Try shifting left again (bigger shift)
359
+ currentPiece.pos.x -= 3;
360
+ if (collision()) {
361
+ // Try shifting down for I-piece
362
+ if (currentPiece.name === 'I') {
363
+ currentPiece.pos.x = originalPos.x;
364
+ currentPiece.pos.y++;
365
+ if (collision()) {
366
+ // Revert if all shifts fail
367
+ currentPiece.shape = originalShape;
368
+ currentPiece.pos = originalPos;
369
+ return;
370
+ }
371
+ } else {
372
+ // Revert if all shifts fail
373
+ currentPiece.shape = originalShape;
374
+ currentPiece.pos = originalPos;
375
+ return;
376
+ }
377
+ }
378
+ }
379
+ }
380
+ }
381
+
382
+ playSound('rotate');
383
+ }
384
+
385
+ // Move the piece left
386
+ function moveLeft() {
387
+ if (!currentPiece) return;
388
+
389
+ clearPiece();
390
+ currentPiece.pos.x--;
391
+
392
+ if (collision()) {
393
+ currentPiece.pos.x++;
394
+ } else {
395
+ playSound('move');
396
+ }
397
+
398
+ drawPiece();
399
+ }
400
+
401
+ // Move the piece right
402
+ function moveRight() {
403
+ if (!currentPiece) return;
404
+
405
+ clearPiece();
406
+ currentPiece.pos.x++;
407
+
408
+ if (collision()) {
409
+ currentPiece.pos.x--;
410
+ } else {
411
+ playSound('move');
412
+ }
413
+
414
+ drawPiece();
415
+ }
416
+
417
+ // Move the piece down (soft drop)
418
+ function moveDown() {
419
+ if (!currentPiece) return;
420
+
421
+ clearPiece();
422
+ currentPiece.pos.y++;
423
+
424
+ if (collision()) {
425
+ currentPiece.pos.y--;
426
+ lockPiece();
427
+ return false;
428
+ }
429
+
430
+ drawPiece();
431
+ return true;
432
+ }
433
+
434
+ // Hard drop the piece
435
+ function hardDrop() {
436
+ if (!currentPiece) return;
437
+
438
+ clearPiece();
439
+
440
+ while (!collision()) {
441
+ currentPiece.pos.y++;
442
+ }
443
+
444
+ currentPiece.pos.y--;
445
+ lockPiece();
446
+ }
447
+
448
+ // Lock the piece in place
449
+ function lockPiece() {
450
+ if (!currentPiece) return;
451
+
452
+ for (let row = 0; row < currentPiece.shape.length; row++) {
453
+ for (let col = 0; col < currentPiece.shape[row].length; col++) {
454
+ if (currentPiece.shape[row][col]) {
455
+ const boardRow = currentPiece.pos.y + row;
456
+ const boardCol = currentPiece.pos.x + col;
457
+
458
+ if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
459
+ board[boardRow][boardCol] = currentPiece.color;
460
+ const cell = document.getElementById(`cell-${boardRow}-${boardCol}`);
461
+ if (cell) {
462
+ cell.className = `w-7 h-7 ${currentPiece.color} rounded-sm locked-block`;
463
+ }
464
+ }
465
+ }
466
+ }
467
+ }
468
+
469
+ playSound('lock');
470
+
471
+ // Check for completed lines
472
+ checkLines();
473
+
474
+ // Get next piece
475
+ currentPiece = nextPiece;
476
+ nextPiece = randomPiece();
477
+ drawNextPiece();
478
+
479
+ // If new piece immediately collides, game over
480
+ if (collision()) {
481
+ gameOver();
482
+ }
483
+ }
484
+
485
+ // Check for completed lines
486
+ function checkLines() {
487
+ let linesCleared = 0;
488
+ let rowsToClear = [];
489
+
490
+ // First, find which rows are complete
491
+ for (let row = ROWS - 1; row >= 0; row--) {
492
+ if (board[row].every(cell => cell !== 0)) {
493
+ rowsToClear.push(row);
494
+ linesCleared++;
495
+ }
496
+ }
497
+
498
+ if (linesCleared > 0) {
499
+ // Update score based on lines cleared
500
+ const points = [0, 100, 300, 500, 800][linesCleared] * level;
501
+ score += points;
502
+ lines += linesCleared;
503
+
504
+ // Update level every 10 lines
505
+ level = Math.floor(lines / 10) + 1;
506
+
507
+ // Increase game speed (cap at 100ms)
508
+ gameSpeed = Math.max(100, 1000 - (level - 1) * 100);
509
+
510
+ // Update displays
511
+ updateDisplays();
512
+
513
+ // Play line clear sound
514
+ playSound('clear');
515
+
516
+ // Flash animation for cleared lines
517
+ flashBoard();
518
+
519
+ // Remove the completed rows
520
+ for (const row of rowsToClear) {
521
+ board.splice(row, 1);
522
+ board.unshift(Array(COLS).fill(0));
523
+ }
524
+
525
+ // Redraw the entire board
526
+ redrawBoard();
527
+ }
528
+ }
529
+
530
+ // Redraw the entire board (used after line clears)
531
+ function redrawBoard() {
532
+ for (let row = 0; row < ROWS; row++) {
533
+ for (let col = 0; col < COLS; col++) {
534
+ const cell = document.getElementById(`cell-${row}-${col}`);
535
+ if (cell) {
536
+ if (board[row][col]) {
537
+ cell.className = `w-7 h-7 ${board[row][col]} rounded-sm locked-block`;
538
+ } else {
539
+ cell.className = 'w-7 h-7 bg-gray-700 rounded-sm tetris-block';
540
+ }
541
+ }
542
+ }
543
+ }
544
+ }
545
+
546
+ // Update score, level, and lines displays
547
+ function updateDisplays() {
548
+ scoreDisplay.textContent = score;
549
+ levelDisplay.textContent = level;
550
+ linesDisplay.textContent = lines;
551
+ }
552
+
553
+ // Flash animation when lines are cleared
554
+ function flashBoard() {
555
+ const cells = gameBoard.querySelectorAll('div');
556
+ cells.forEach(cell => {
557
+ cell.classList.add('flash-animation');
558
+ setTimeout(() => {
559
+ cell.classList.remove('flash-animation');
560
+ }, 600);
561
+ });
562
+ }
563
+
564
+ // Game over
565
+ function gameOver() {
566
+ clearInterval(gameInterval);
567
+ isGameRunning = false;
568
+ gameOverScreen.classList.remove('hidden');
569
+ playSound('gameover');
570
+ }
571
+
572
+ // Start the game
573
+ function startGame() {
574
+ if (isGameRunning) return;
575
+
576
+ // Reset game state
577
+ board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
578
+ score = 0;
579
+ level = 1;
580
+ lines = 0;
581
+ updateDisplays();
582
+
583
+ // Generate pieces
584
+ currentPiece = randomPiece();
585
+ nextPiece = randomPiece();
586
+ drawNextPiece();
587
+
588
+ // Clear the board
589
+ redrawBoard();
590
+
591
+ // Hide game over screen
592
+ gameOverScreen.classList.add('hidden');
593
+
594
+ // Start game loop
595
+ isGameRunning = true;
596
+ isPaused = false;
597
+ gameInterval = setInterval(gameLoop, gameSpeed);
598
+ playSound('start');
599
+ }
600
+
601
+ // Pause the game
602
+ function pauseGame() {
603
+ if (!isGameRunning) return;
604
+
605
+ if (isPaused) {
606
+ // Resume game
607
+ isPaused = false;
608
+ pauseScreen.classList.add('hidden');
609
+ gameInterval = setInterval(gameLoop, gameSpeed);
610
+ } else {
611
+ // Pause game
612
+ isPaused = true;
613
+ clearInterval(gameInterval);
614
+ pauseScreen.classList.remove('hidden');
615
+ }
616
+ }
617
+
618
+ // Main game loop
619
+ function gameLoop() {
620
+ if (!moveDown()) {
621
+ // If piece couldn't move down, it's locked
622
+ }
623
+ }
624
+
625
+ // Play sound effects
626
+ function playSound(type) {
627
+ // In a real implementation, you would play actual sound files here
628
+ console.log(`Playing ${type} sound`);
629
+ }
630
+
631
+ // Initialize the game
632
+ function init() {
633
+ initBoard();
634
+ initNextPieceDisplay();
635
+
636
+ // Event listeners
637
+ document.addEventListener('keydown', (e) => {
638
+ if (!isGameRunning) {
639
+ if (e.key === ' ' || e.key === 'r' || e.key === 'R') {
640
+ startGame();
641
+ }
642
+ return;
643
+ }
644
+
645
+ if (isPaused && e.key.toLowerCase() !== 'p') return;
646
+
647
+ switch (e.key) {
648
+ case 'ArrowLeft':
649
+ moveLeft();
650
+ break;
651
+ case 'ArrowRight':
652
+ moveRight();
653
+ break;
654
+ case 'ArrowDown':
655
+ moveDown();
656
+ break;
657
+ case 'ArrowUp':
658
+ rotatePiece();
659
+ break;
660
+ case ' ':
661
+ hardDrop();
662
+ break;
663
+ case 'p':
664
+ case 'P':
665
+ pauseGame();
666
+ break;
667
+ case 'r':
668
+ case 'R':
669
+ startGame();
670
+ break;
671
+ }
672
+ });
673
+
674
+ startBtn.addEventListener('click', startGame);
675
+ pauseBtn.addEventListener('click', pauseGame);
676
+ restartBtn.addEventListener('click', startGame);
677
+ resumeBtn.addEventListener('click', pauseGame);
678
+ }
679
+
680
+ // Start the game
681
+ init();
682
+ });
683
+ </script>
684
+ <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=busyhe/busyhe" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
685
+ </html>