Hugging Face's logo

Spaces:
openfree
/
Tetris-Game
Running

App Files Community
1
openfree commited on
Commit
4ff2cc7
•
1 Parent(s): dc0fe54

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +335 -19
index.html CHANGED
@@ -1,19 +1,335 @@
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>Tetris Game</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ background: #1a1a1a;
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ min-height: 100vh;
20
+ font-family: Arial, sans-serif;
21
+ }
22
+
23
+ .game-container {
24
+ display: flex;
25
+ gap: 20px;
26
+ }
27
+
28
+ #game-board {
29
+ border: 2px solid #333;
30
+ background: #000;
31
+ }
32
+
33
+ .side-panel {
34
+ display: flex;
35
+ flex-direction: column;
36
+ gap: 20px;
37
+ color: white;
38
+ }
39
+
40
+ .next-piece {
41
+ width: 150px;
42
+ height: 150px;
43
+ border: 2px solid #333;
44
+ background: #000;
45
+ }
46
+
47
+ .score-board {
48
+ padding: 10px;
49
+ background: #333;
50
+ border-radius: 5px;
51
+ }
52
+
53
+ .controls {
54
+ background: #333;
55
+ padding: 10px;
56
+ border-radius: 5px;
57
+ }
58
+
59
+ .controls p {
60
+ margin: 5px 0;
61
+ font-size: 14px;
62
+ }
63
+ </style>
64
+ </head>
65
+ <body>
66
+ <div class="game-container">
67
+ <canvas id="game-board" width="300" height="600"></canvas>
68
+ <div class="side-panel">
69
+ <div class="next-piece">
70
+ <canvas id="next-piece-canvas" width="150" height="150"></canvas>
71
+ </div>
72
+ <div class="score-board">
73
+ <h3>Score: <span id="score">0</span></h3>
74
+ <h3>Lines: <span id="lines">0</span></h3>
75
+ <h3>Level: <span id="level">1</span></h3>
76
+ </div>
77
+ <div class="controls">
78
+ <h3>Controls:</h3>
79
+ <p>← → : Move Left/Right</p>
80
+ <p>↓ : Soft Drop</p>
81
+ <p>Space : Hard Drop</p>
82
+ <p>↑ : Rotate</p>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <script>
88
+ const canvas = document.getElementById('game-board');
89
+ const ctx = canvas.getContext('2d');
90
+ const nextPieceCanvas = document.getElementById('next-piece-canvas');
91
+ const nextPieceCtx = nextPieceCanvas.getContext('2d');
92
+
93
+ const BLOCK_SIZE = 30;
94
+ const BOARD_WIDTH = 10;
95
+ const BOARD_HEIGHT = 20;
96
+
97
+ let board = Array(BOARD_HEIGHT).fill().map(() => Array(BOARD_WIDTH).fill(0));
98
+ let score = 0;
99
+ let lines = 0;
100
+ let level = 1;
101
+ let gameLoop;
102
+ let currentPiece;
103
+ let nextPiece;
104
+
105
+ const SHAPES = [
106
+ [[1, 1, 1, 1]], // I
107
+ [[1, 1], [1, 1]], // O
108
+ [[0, 1, 1], [1, 1, 0]], // S
109
+ [[1, 1, 0], [0, 1, 1]], // Z
110
+ [[1, 0, 0], [1, 1, 1]], // L
111
+ [[0, 0, 1], [1, 1, 1]], // J
112
+ [[0, 1, 0], [1, 1, 1]] // T
113
+ ];
114
+
115
+ const COLORS = [
116
+ '#00f0f0', // cyan
117
+ '#f0f000', // yellow
118
+ '#00f000', // green
119
+ '#f00000', // red
120
+ '#f0a000', // orange
121
+ '#0000f0', // blue
122
+ '#a000f0' // purple
123
+ ];
124
+
125
+ class Piece {
126
+ constructor(shape = null) {
127
+ this.shape = shape || SHAPES[Math.floor(Math.random() * SHAPES.length)];
128
+ this.color = COLORS[SHAPES.findIndex(s => s === this.shape)];
129
+ this.x = Math.floor((BOARD_WIDTH - this.shape[0].length) / 2);
130
+ this.y = 0;
131
+ }
132
+ }
133
+
134
+ function drawBlock(ctx, x, y, color) {
135
+ ctx.fillStyle = color;
136
+ ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE - 1, BLOCK_SIZE - 1);
137
+ }
138
+
139
+ function drawBoard() {
140
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
141
+
142
+ // Draw board
143
+ for(let y = 0; y < BOARD_HEIGHT; y++) {
144
+ for(let x = 0; x < BOARD_WIDTH; x++) {
145
+ if(board[y][x]) {
146
+ drawBlock(ctx, x, y, board[y][x]);
147
+ }
148
+ }
149
+ }
150
+
151
+ // Draw current piece
152
+ if(currentPiece) {
153
+ for(let y = 0; y < currentPiece.shape.length; y++) {
154
+ for(let x = 0; x < currentPiece.shape[y].length; x++) {
155
+ if(currentPiece.shape[y][x]) {
156
+ drawBlock(ctx, currentPiece.x + x, currentPiece.y + y, currentPiece.color);
157
+ }
158
+ }
159
+ }
160
+ }
161
+ }
162
+
163
+ function drawNextPiece() {
164
+ nextPieceCtx.clearRect(0, 0, nextPieceCanvas.width, nextPieceCanvas.height);
165
+
166
+ const offsetX = (nextPieceCanvas.width - nextPiece.shape[0].length * BLOCK_SIZE) / 2;
167
+ const offsetY = (nextPieceCanvas.height - nextPiece.shape.length * BLOCK_SIZE) / 2;
168
+
169
+ for(let y = 0; y < nextPiece.shape.length; y++) {
170
+ for(let x = 0; x < nextPiece.shape[y].length; x++) {
171
+ if(nextPiece.shape[y][x]) {
172
+ nextPieceCtx.fillStyle = nextPiece.color;
173
+ nextPieceCtx.fillRect(
174
+ offsetX + x * BLOCK_SIZE,
175
+ offsetY + y * BLOCK_SIZE,
176
+ BLOCK_SIZE - 1,
177
+ BLOCK_SIZE - 1
178
+ );
179
+ }
180
+ }
181
+ }
182
+ }
183
+
184
+ function isValidMove(piece, offsetX, offsetY, newShape = null) {
185
+ const shape = newShape || piece.shape;
186
+
187
+ for(let y = 0; y < shape.length; y++) {
188
+ for(let x = 0; x < shape[y].length; x++) {
189
+ if(shape[y][x]) {
190
+ const newX = piece.x + x + offsetX;
191
+ const newY = piece.y + y + offsetY;
192
+
193
+ if(newX < 0 || newX >= BOARD_WIDTH || newY >= BOARD_HEIGHT) {
194
+ return false;
195
+ }
196
+
197
+ if(newY >= 0 && board[newY][newX]) {
198
+ return false;
199
+ }
200
+ }
201
+ }
202
+ }
203
+ return true;
204
+ }
205
+
206
+ function rotatePiece() {
207
+ const newShape = currentPiece.shape[0].map((_, i) =>
208
+ currentPiece.shape.map(row => row[i]).reverse()
209
+ );
210
+
211
+ if(isValidMove(currentPiece, 0, 0, newShape)) {
212
+ currentPiece.shape = newShape;
213
+ }
214
+ }
215
+
216
+ function mergePiece() {
217
+ for(let y = 0; y < currentPiece.shape.length; y++) {
218
+ for(let x = 0; x < currentPiece.shape[y].length; x++) {
219
+ if(currentPiece.shape[y][x]) {
220
+ board[currentPiece.y + y][currentPiece.x + x] = currentPiece.color;
221
+ }
222
+ }
223
+ }
224
+ }
225
+
226
+ function checkLines() {
227
+ let linesCleared = 0;
228
+
229
+ for(let y = BOARD_HEIGHT - 1; y >= 0; y--) {
230
+ if(board[y].every(cell => cell !== 0)) {
231
+ board.splice(y, 1);
232
+ board.unshift(Array(BOARD_WIDTH).fill(0));
233
+ linesCleared++;
234
+ y++;
235
+ }
236
+ }
237
+
238
+ if(linesCleared > 0) {
239
+ lines += linesCleared;
240
+ score += linesCleared * 100 * level;
241
+ level = Math.floor(lines / 10) + 1;
242
+
243
+ document.getElementById('score').textContent = score;
244
+ document.getElementById('lines').textContent = lines;
245
+ document.getElementById('level').textContent = level;
246
+ }
247
+ }
248
+
249
+ function gameOver() {
250
+ clearInterval(gameLoop);
251
+ alert(`Game Over! Score: ${score}`);
252
+ resetGame();
253
+ }
254
+
255
+ function resetGame() {
256
+ board = Array(BOARD_HEIGHT).fill().map(() => Array(BOARD_WIDTH).fill(0));
257
+ score = 0;
258
+ lines = 0;
259
+ level = 1;
260
+ document.getElementById('score').textContent = score;
261
+ document.getElementById('lines').textContent = lines;
262
+ document.getElementById('level').textContent = level;
263
+ startGame();
264
+ }
265
+
266
+ function update() {
267
+ if(isValidMove(currentPiece, 0, 1)) {
268
+ currentPiece.y++;
269
+ } else {
270
+ mergePiece();
271
+ checkLines();
272
+
273
+ currentPiece = nextPiece;
274
+ nextPiece = new Piece();
275
+ drawNextPiece();
276
+
277
+ if(!isValidMove(currentPiece, 0, 0)) {
278
+ gameOver();
279
+ }
280
+ }
281
+ drawBoard();
282
+ }
283
+
284
+ function startGame() {
285
+ currentPiece = new Piece();
286
+ nextPiece = new Piece();
287
+ drawNextPiece();
288
+
289
+ if(gameLoop) clearInterval(gameLoop);
290
+ gameLoop = setInterval(() => {
291
+ update();
292
+ }, 1000 / level);
293
+ }
294
+
295
+ document.addEventListener('keydown', (e) => {
296
+ switch(e.keyCode) {
297
+ case 37: // Left
298
+ if(isValidMove(currentPiece, -1, 0)) {
299
+ currentPiece.x--;
300
+ drawBoard();
301
+ }
302
+ break;
303
+
304
+ case 39: // Right
305
+ if(isValidMove(currentPiece, 1, 0)) {
306
+ currentPiece.x++;
307
+ drawBoard();
308
+ }
309
+ break;
310
+
311
+ case 40: // Down
312
+ if(isValidMove(currentPiece, 0, 1)) {
313
+ currentPiece.y++;
314
+ drawBoard();
315
+ }
316
+ break;
317
+
318
+ case 38: // Up (Rotate)
319
+ rotatePiece();
320
+ drawBoard();
321
+ break;
322
+
323
+ case 32: // Space (Hard Drop)
324
+ while(isValidMove(currentPiece, 0, 1)) {
325
+ currentPiece.y++;
326
+ }
327
+ update();
328
+ break;
329
+ }
330
+ });
331
+
332
+ startGame();
333
+ </script>
334
+ </body>
335
+ </html>