Hugging Face's logo

Spaces:
Mi6paulino
/
Tetris_Game
Running

App Files Community
arad1367 commited on
Commit
2b44e06
·
verified ·
1 Parent(s): 18d6eb0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +339 -18
index.html CHANGED
@@ -1,19 +1,340 @@
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
+ body {
9
+ margin: 0;
10
+ font-family: 'Arial', sans-serif;
11
+ background-color: #222;
12
+ color: white;
13
+ text-align: center;
14
+ }
15
+ canvas {
16
+ background-color: black;
17
+ display: block;
18
+ margin: 0 auto;
19
+ }
20
+ #gameCanvas {
21
+ border: 1px solid #444;
22
+ }
23
+ #welcomeScreen, #gameOverScreen {
24
+ display: none;
25
+ position: absolute;
26
+ top: 50%;
27
+ left: 50%;
28
+ transform: translate(-50%, -50%);
29
+ background-color: rgba(0, 0, 0, 0.8);
30
+ padding: 20px;
31
+ border-radius: 10px;
32
+ width: 300px;
33
+ text-align: center;
34
+ }
35
+ #welcomeScreen {
36
+ background-image: url('tetris7.png');
37
+ background-size: cover;
38
+ background-position: center;
39
+ }
40
+ #welcomeScreen input, #welcomeScreen button {
41
+ margin-top: 10px;
42
+ width: 100%;
43
+ padding: 10px;
44
+ border: none;
45
+ border-radius: 5px;
46
+ }
47
+ #gameOverScreen button {
48
+ margin-top: 10px;
49
+ width: 100%;
50
+ padding: 10px;
51
+ border: none;
52
+ border-radius: 5px;
53
+ background-color: #ff5555;
54
+ color: white;
55
+ font-size: 16px;
56
+ }
57
+ #homeButton {
58
+ margin-top: 10px;
59
+ width: 100%;
60
+ padding: 10px;
61
+ border: none;
62
+ border-radius: 5px;
63
+ background-color: #007BFF;
64
+ color: white;
65
+ font-size: 16px;
66
+ }
67
+ </style>
68
+ </head>
69
+ <body>
70
+ <h1>Tetris Game</h1>
71
+ <canvas id="gameCanvas" width="200" height="400"></canvas>
72
+
73
+ <div id="welcomeScreen">
74
+ <h2>Welcome to Tetris!</h2>
75
+ <label for="usernameInput">Enter your name:</label>
76
+ <input type="text" id="usernameInput" placeholder="Your Name">
77
+ <button onclick="startGame()">Start Game</button>
78
+ </div>
79
+
80
+ <div id="gameOverScreen">
81
+ <h2 id="gameOverMessage">Game Over!</h2>
82
+ <p id="finalScore">Score: 0</p>
83
+ <button onclick="restartGame()">Restart</button>
84
+ <button id="homeButton" onclick="goHome()">Home</button>
85
+ </div>
86
+
87
+ <script>
88
+ const canvas = document.getElementById('gameCanvas');
89
+ const ctx = canvas.getContext('2d');
90
+
91
+ const gridSize = { width: 10, height: 20 };
92
+ const zoom = 20;
93
+ const fps = 5; // Slower falling speed
94
+
95
+ const colors = [
96
+ 'none', // Placeholder for index 0 (empty cell)
97
+ '#7800FF', // Purple
98
+ '#00FFFF', // Cyan
99
+ '#FFA500', // Orange
100
+ '#FFFF00', // Yellow
101
+ '#00FF00', // Green
102
+ '#FF0000', // Red
103
+ '#0000FF' // Blue
104
+ ];
105
+
106
+ let game = null;
107
+ let username = '';
108
+ let music = new Audio('music.mp3'); // Create a global audio object
109
+
110
+ class Figure {
111
+ constructor() {
112
+ const figures = [
113
+ [[1, 5, 9, 13], [4, 5, 6, 7]], // I
114
+ [[1, 2, 5, 6]], // O
115
+ [[1, 4, 5, 6], [0, 4, 5, 8], [4, 5, 6, 9], [2, 5, 6, 10]], // T
116
+ [[0, 1, 5, 6], [2, 4, 5, 7]], // S
117
+ [[1, 2, 4, 5], [1, 5, 6, 10]], // Z
118
+ [[0, 4, 5, 9], [2, 4, 5, 6], [4, 5, 6, 8], [0, 1, 5, 9]], // J
119
+ [[1, 5, 6, 9], [2, 4, 5, 6], [1, 5, 6, 10], [0, 4, 5, 7]] // L
120
+ ];
121
+ this.type = Math.floor(Math.random() * figures.length);
122
+ this.color = colors[this.type + 1]; // Assign different colors to each figure
123
+ this.rotation = 0;
124
+ this.x = 3;
125
+ this.y = 0;
126
+ this.figures = figures;
127
+ }
128
+
129
+ getCurrentFigure() {
130
+ return this.figures[this.type][this.rotation];
131
+ }
132
+
133
+ rotate() {
134
+ this.rotation = (this.rotation + 1) % this.figures[this.type].length;
135
+ }
136
+ }
137
+
138
+ class Tetris {
139
+ constructor() {
140
+ this.height = gridSize.height;
141
+ this.width = gridSize.width;
142
+ this.field = Array.from({ length: this.height }, () => Array(this.width).fill(0));
143
+ this.score = 0;
144
+ this.state = 'welcome';
145
+ this.figure = null;
146
+ this.level = 2;
147
+ this.username = '';
148
+ }
149
+
150
+ newFigure() {
151
+ this.figure = new Figure();
152
+ }
153
+
154
+ intersects() {
155
+ for (let i = 0; i < 4; i++) {
156
+ for (let j = 0; j < 4; j++) {
157
+ if (this.figure.getCurrentFigure().includes(i * 4 + j)) {
158
+ const x = j + this.figure.x;
159
+ const y = i + this.figure.y;
160
+ if (x < 0 || x >= this.width || y >= this.height || this.field[y][x]) {
161
+ return true;
162
+ }
163
+ }
164
+ }
165
+ }
166
+ return false;
167
+ }
168
+
169
+ breakLines() {
170
+ let lines = 0;
171
+ for (let i = 0; i < this.height; i++) {
172
+ if (this.field[i].every(cell => cell !== 0)) {
173
+ lines++;
174
+ for (let k = i; k > 0; k--) {
175
+ this.field[k] = [...this.field[k - 1]];
176
+ }
177
+ this.field[0] = Array(this.width).fill(0);
178
+ }
179
+ }
180
+ this.score += lines * lines;
181
+ }
182
+
183
+ goDown() {
184
+ this.figure.y += 1;
185
+ if (this.intersects()) {
186
+ this.figure.y -= 1;
187
+ this.freeze();
188
+ }
189
+ }
190
+
191
+ goSide(dx) {
192
+ this.figure.x += dx;
193
+ if (this.intersects()) {
194
+ this.figure.x -= dx;
195
+ }
196
+ }
197
+
198
+ rotateFigure() {
199
+ const oldRotation = this.figure.rotation;
200
+ this.figure.rotate();
201
+ if (this.intersects()) {
202
+ this.figure.rotation = oldRotation;
203
+ }
204
+ }
205
+
206
+ freeze() {
207
+ for (let i = 0; i < 4; i++) {
208
+ for (let j = 0; j < 4; j++) {
209
+ if (this.figure.getCurrentFigure().includes(i * 4 + j)) {
210
+ this.field[i + this.figure.y][j + this.figure.x] = this.figure.color;
211
+ }
212
+ }
213
+ }
214
+ this.breakLines();
215
+ this.newFigure();
216
+ if (this.intersects()) {
217
+ this.state = 'gameover';
218
+ document.getElementById('gameOverMessage').textContent = `Game Over, ${this.username}!`;
219
+ document.getElementById('finalScore').textContent = `Score: ${this.score}`;
220
+ document.getElementById('gameOverScreen').style.display = 'block';
221
+ stopMusic(); // Stop music on game over
222
+ }
223
+ }
224
+ }
225
+
226
+ function drawGrid() {
227
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
228
+ for (let i = 0; i < game.height; i++) {
229
+ for (let j = 0; j < game.width; j++) {
230
+ ctx.strokeStyle = 'gray';
231
+ ctx.strokeRect(j * zoom, i * zoom, zoom, zoom);
232
+ if (game.field[i][j] !== 0) {
233
+ ctx.fillStyle = game.field[i][j];
234
+ ctx.fillRect(j * zoom + 1, i * zoom + 1, zoom - 2, zoom - 2);
235
+ }
236
+ }
237
+ }
238
+ }
239
+
240
+ function drawFigure() {
241
+ if (game.figure !== null) {
242
+ const figure = game.figure.getCurrentFigure();
243
+ for (let i = 0; i < 4; i++) {
244
+ for (let j = 0; j < 4; j++) {
245
+ if (figure.includes(i * 4 + j)) {
246
+ ctx.fillStyle = game.figure.color;
247
+ ctx.fillRect((j + game.figure.x) * zoom + 1, (i + game.figure.y) * zoom + 1, zoom - 2, zoom - 2);
248
+ }
249
+ }
250
+ }
251
+ }
252
+ }
253
+
254
+ function drawText() {
255
+ ctx.fillStyle = 'white';
256
+ ctx.font = '14px Arial';
257
+ ctx.fillText(`Score: ${game.score}`, 5, 15);
258
+ }
259
+
260
+ function updateGame() {
261
+ if (game.state === 'start') {
262
+ game.goDown();
263
+ drawGrid();
264
+ drawFigure();
265
+ drawText();
266
+ }
267
+ }
268
+
269
+ function startGame() {
270
+ username = document.getElementById('usernameInput').value;
271
+ if (!username) {
272
+ alert('Please enter your name.');
273
+ return;
274
+ }
275
+ game = new Tetris();
276
+ game.newFigure();
277
+ game.username = username;
278
+ game.state = 'start';
279
+ document.getElementById('welcomeScreen').style.display = 'none';
280
+ startMusic(); // Start music when the game starts
281
+ gameLoop();
282
+ }
283
+
284
+ function gameLoop() {
285
+ if (game.state !== 'gameover') {
286
+ updateGame();
287
+ setTimeout(gameLoop, 1000 / fps);
288
+ }
289
+ }
290
+
291
+ function restartGame() {
292
+ document.getElementById('gameOverScreen').style.display = 'none';
293
+ startGame();
294
+ }
295
+
296
+ function goHome() {
297
+ document.getElementById('gameOverScreen').style.display = 'none';
298
+ document.getElementById('welcomeScreen').style.display = 'block';
299
+ }
300
+
301
+ function startMusic() {
302
+ music.loop = true;
303
+ music.volume = 0.5;
304
+ music.play();
305
+ }
306
+
307
+ function stopMusic() {
308
+ music.pause();
309
+ music.currentTime = 0; // Reset to start
310
+ }
311
+
312
+ document.addEventListener('keydown', (event) => {
313
+ if (game && game.state === 'start') {
314
+ switch (event.key) {
315
+ case 'ArrowUp':
316
+ game.rotateFigure();
317
+ break;
318
+ case 'ArrowDown':
319
+ game.goDown();
320
+ break;
321
+ case 'ArrowLeft':
322
+ game.goSide(-1);
323
+ break;
324
+ case 'ArrowRight':
325
+ game.goSide(1);
326
+ break;
327
+ }
328
+ drawGrid();
329
+ drawFigure();
330
+ drawText();
331
+ }
332
+ });
333
+
334
+ window.onload = () => {
335
+ document.getElementById('welcomeScreen').style.display = 'block';
336
+ // No need to play music on window load
337
+ };
338
+ </script>
339
+ </body>
340
  </html>