Hugging Face's logo

Spaces:
openfree
/
Tetris-Game
Running

App Files Community
2
openfree commited on
Commit
c18bab4
Β·
verified Β·
1 Parent(s): 587fddb

Delete index-backup.html

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