Hugging Face's logo

Spaces:
Aaummaone
/
deepsite
Running

App Files Community
1
Aaummaone commited on
Commit
fac9d9f
·
verified ·
1 Parent(s): 17c4f05

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +817 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite
3
- emoji: 👁
4
- colorFrom: purple
5
- colorTo: red
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: deepsite
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
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,817 @@
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>NEON-TRIS | Cyberpunk Tetris</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
9
+
10
+ :root {
11
+ --neon-pink: #ff2a6d;
12
+ --neon-blue: #05d9e8;
13
+ --neon-purple: #d300c5;
14
+ --neon-green: #00ff9d;
15
+ --dark-bg: #0d0221;
16
+ --grid-bg: rgba(13, 2, 33, 0.7);
17
+ }
18
+
19
+ * {
20
+ box-sizing: border-box;
21
+ margin: 0;
22
+ padding: 0;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Press Start 2P', cursive;
27
+ background-color: var(--dark-bg);
28
+ color: var(--neon-blue);
29
+ overflow: hidden;
30
+ height: 100vh;
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ position: relative;
35
+ }
36
+
37
+ .cyber-grid {
38
+ position: fixed;
39
+ top: 0;
40
+ left: 0;
41
+ width: 100%;
42
+ height: 100%;
43
+ background:
44
+ linear-gradient(rgba(5, 217, 232, 0.1) 1px, transparent 1px),
45
+ linear-gradient(90deg, rgba(5, 217, 232, 0.1) 1px, transparent 1px);
46
+ background-size: 30px 30px;
47
+ z-index: -1;
48
+ opacity: 0.3;
49
+ }
50
+
51
+ .cyber-lines {
52
+ position: fixed;
53
+ top: 0;
54
+ left: 0;
55
+ width: 100%;
56
+ height: 100%;
57
+ background:
58
+ linear-gradient(135deg, var(--neon-purple) 0%, transparent 50%),
59
+ linear-gradient(-135deg, var(--neon-green) 0%, transparent 50%);
60
+ z-index: -2;
61
+ opacity: 0.2;
62
+ }
63
+
64
+ .game-container {
65
+ display: flex;
66
+ gap: 30px;
67
+ align-items: flex-start;
68
+ position: relative;
69
+ }
70
+
71
+ #game-board {
72
+ border: 5px solid var(--neon-purple);
73
+ border-radius: 3px;
74
+ box-shadow: 0 0 20px var(--neon-purple),
75
+ 0 0 40px rgba(211, 0, 197, 0.3);
76
+ background-color: var(--grid-bg);
77
+ }
78
+
79
+ .side-panel {
80
+ display: flex;
81
+ flex-direction: column;
82
+ gap: 30px;
83
+ min-width: 200px;
84
+ }
85
+
86
+ .panel {
87
+ border: 3px solid var(--neon-blue);
88
+ border-radius: 3px;
89
+ padding: 15px;
90
+ box-shadow: 0 0 15px var(--neon-blue),
91
+ 0 0 30px rgba(5, 217, 232, 0.3);
92
+ background-color: var(--grid-bg);
93
+ text-align: center;
94
+ }
95
+
96
+ h1 {
97
+ font-size: 24px;
98
+ margin-bottom: 15px;
99
+ color: var(--neon-pink);
100
+ text-shadow: 0 0 10px var(--neon-pink);
101
+ letter-spacing: 2px;
102
+ }
103
+
104
+ .score-display {
105
+ font-size: 22px;
106
+ margin: 15px 0;
107
+ color: var(--neon-green);
108
+ text-shadow: 0 0 8px var(--neon-green);
109
+ }
110
+
111
+ .level-display {
112
+ font-size: 18px;
113
+ margin: 10px 0;
114
+ color: var(--neon-blue);
115
+ text-shadow: 0 0 8px var(--neon-blue);
116
+ }
117
+
118
+ #next-piece {
119
+ width: 120px;
120
+ height: 120px;
121
+ margin: 0 auto;
122
+ position: relative;
123
+ }
124
+
125
+ button {
126
+ background-color: transparent;
127
+ border: 2px solid var(--neon-green);
128
+ color: var(--neon-green);
129
+ font-family: 'Press Start 2P', cursive;
130
+ padding: 10px;
131
+ margin: 5px 0;
132
+ cursor: pointer;
133
+ transition: all 0.3s;
134
+ text-shadow: 0 0 5px var(--neon-green);
135
+ }
136
+
137
+ button:hover {
138
+ background-color: var(--neon-green);
139
+ color: var(--dark-bg);
140
+ box-shadow: 0 0 15px var(--neon-green);
141
+ }
142
+
143
+ .controls {
144
+ margin-top: 20px;
145
+ }
146
+
147
+ .controls p {
148
+ font-size: 12px;
149
+ margin: 10px 0;
150
+ color: var(--neon-blue);
151
+ line-height: 1.6;
152
+ }
153
+
154
+ .neon-text {
155
+ animation: flicker 1.5s infinite alternate;
156
+ }
157
+
158
+ .game-over {
159
+ position: absolute;
160
+ top: 0;
161
+ left: 0;
162
+ width: 100%;
163
+ height: 100%;
164
+ background-color: rgba(13, 2, 33, 0.9);
165
+ display: none;
166
+ flex-direction: column;
167
+ justify-content: center;
168
+ align-items: center;
169
+ z-index: 10;
170
+ }
171
+
172
+ .game-over h1 {
173
+ font-size: 36px;
174
+ margin-bottom: 30px;
175
+ color: var(--neon-pink);
176
+ text-shadow: 0 0 15px var(--neon-pink);
177
+ }
178
+
179
+ .scanline {
180
+ position: fixed;
181
+ top: 0;
182
+ left: 0;
183
+ width: 100%;
184
+ height: 100%;
185
+ background: linear-gradient(
186
+ to bottom,
187
+ transparent 0%,
188
+ rgba(0, 255, 157, 0.1) 50%,
189
+ transparent 100%
190
+ );
191
+ background-size: 100% 8px;
192
+ pointer-events: none;
193
+ z-index: 0;
194
+ animation: scanline 8s linear infinite;
195
+ }
196
+
197
+ @keyframes flicker {
198
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
199
+ text-shadow: 0 0 10px var(--neon-pink),
200
+ 0 0 20px var(--neon-pink),
201
+ 0 0 30px var(--neon-purple),
202
+ 0 0 40px rgba(255, 42, 109, 0.5);
203
+ }
204
+ 20%, 24%, 55% {
205
+ text-shadow: none;
206
+ }
207
+ }
208
+
209
+ @keyframes scanline {
210
+ from {
211
+ transform: translateY(-100%);
212
+ }
213
+ to {
214
+ transform: translateY(100%);
215
+ }
216
+ }
217
+
218
+ .glitch {
219
+ position: fixed;
220
+ top: 0;
221
+ left: 0;
222
+ width: 100%;
223
+ height: 100%;
224
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><rect width="1" height="1" fill="%2305d9e8" opacity="0.05"/></svg>') repeat;
225
+ z-index: -1;
226
+ opacity: 0.2;
227
+ animation: glitch 10s infinite;
228
+ pointer-events: none;
229
+ mix-blend-mode: overlay;
230
+ }
231
+
232
+ @keyframes glitch {
233
+ 0% { transform: translate(0); }
234
+ 20% { transform: translate(-1px, 1px); }
235
+ 40% { transform: translate(-1px, -1px); }
236
+ 60% { transform: translate(1px, 1px); }
237
+ 80% { transform: translate(1px, -1px); }
238
+ 100% { transform: translate(0); }
239
+ }
240
+
241
+ /* Responsive adjustments */
242
+ @media (max-width: 768px) {
243
+ .game-container {
244
+ flex-direction: column;
245
+ align-items: center;
246
+ }
247
+
248
+ .side-panel {
249
+ min-width: 300px;
250
+ }
251
+ }
252
+ </style>
253
+ </head>
254
+ <body>
255
+ <div class="cyber-grid"></div>
256
+ <div class="cyber-lines"></div>
257
+ <div class="scanline"></div>
258
+ <div class="glitch"></div>
259
+
260
+ <div class="game-container">
261
+ <canvas id="game-board" width="300" height="600"></canvas>
262
+
263
+ <div class="side-panel">
264
+ <div class="panel">
265
+ <h1 class="neon-text">NEON-TRIS</h1>
266
+ <div class="score-display" id="score">00000</div>
267
+ <div class="level-display">LEVEL: <span id="level">1</span></div>
268
+ <div class="level-display">LINES: <span id="lines">0</span></div>
269
+ </div>
270
+
271
+ <div class="panel">
272
+ <h1>NEXT</h1>
273
+ <canvas id="next-piece" width="120" height="120"></canvas>
274
+ </div>
275
+
276
+ <div class="panel">
277
+ <button id="start-btn">NEW GAME</button>
278
+ <button id="pause-btn">PAUSE</button>
279
+
280
+ <div class="controls">
281
+ <p>← → : MOVE</p>
282
+ <p>↑ : ROTATE</p>
283
+ <p>↓ : SOFT DROP</p>
284
+ <p>SPACE : HARD DROP</p>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="game-over" id="game-over">
291
+ <h1 class="neon-text">GAME OVER</h1>
292
+ <button id="restart-btn">RETRY</button>
293
+ </div>
294
+
295
+ <audio id="move-sound" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU..."></audio>
296
+ <audio id="rotate-sound" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0Y..."></audio>
297
+ <audio id="drop-sound" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0Y..."></audio>
298
+ <audio id="clear-sound" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0Y..."></audio>
299
+ <audio id="gameover-sound" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0Y..."></audio>
300
+
301
+ <script>
302
+ // 8-bit sound effects as base64 encoded strings
303
+ function createSound(src) {
304
+ const audio = new Audio();
305
+ audio.src = src;
306
+ return audio;
307
+ }
308
+
309
+ document.addEventListener('DOMContentLoaded', () => {
310
+ // Game variables
311
+ const canvas = document.getElementById('game-board');
312
+ const ctx = canvas.getContext('2d');
313
+ const nextCanvas = document.getElementById('next-piece');
314
+ const nextCtx = nextCanvas.getContext('2d');
315
+
316
+ // Sound effects (simplified base64 strings - in a real app these would be full sound files)
317
+ const sounds = {
318
+ move: document.getElementById('move-sound'),
319
+ rotate: document.getElementById('rotate-sound'),
320
+ drop: document.getElementById('drop-sound'),
321
+ clear: document.getElementById('clear-sound'),
322
+ gameover: document.getElementById('gameover-sound'),
323
+ };
324
+
325
+ // For demonstration, we'll just play short beeps
326
+ function playSound(type) {
327
+ try {
328
+ sounds[type].currentTime = 0;
329
+ sounds[type].play();
330
+ } catch(e) {
331
+ console.log("Sound error:", e);
332
+ // Fallback to simple beep
333
+ const oscillator = new (window.AudioContext || window.webkitAudioContext)().createOscillator();
334
+ const gainNode = new (window.AudioContext || window.webkitAudioContext)().createGain();
335
+
336
+ oscillator.connect(gainNode);
337
+ gainNode.connect((window.AudioContext || window.webkitAudioContext)().destination);
338
+
339
+ if (type === 'move') {
340
+ oscillator.frequency.value = 200;
341
+ gainNode.gain.value = 0.1;
342
+ } else if (type === 'rotate') {
343
+ oscillator.frequency.value = 300;
344
+ gainNode.gain.value = 0.1;
345
+ } else if (type === 'drop') {
346
+ oscillator.frequency.value = 100;
347
+ gainNode.gain.value = 0.2;
348
+ } else if (type === 'clear') {
349
+ oscillator.frequency.value = 500;
350
+ gainNode.gain.value = 0.3;
351
+ } else if (type === 'gameover') {
352
+ oscillator.frequency.value = 150;
353
+ gainNode.gain.value = 0.3;
354
+ }
355
+
356
+ oscillator.start();
357
+ oscillator.stop((window.AudioContext || window.webkitAudioContext)().currentTime + 0.1);
358
+ }
359
+ }
360
+
361
+ // Game constants
362
+ const COLS = 10;
363
+ const ROWS = 20;
364
+ const BLOCK_SIZE = 30;
365
+ const COLORS = [
366
+ 'rgba(255, 42, 109, 0)',
367
+ 'rgba(255, 42, 109, 1)', // I
368
+ 'rgba(5, 217, 232, 1)', // J
369
+ 'rgba(211, 0, 197, 1)', // L
370
+ 'rgba(0, 255, 157, 1)', // O
371
+ 'rgba(255, 204, 0, 1)', // S
372
+ 'rgba(255, 128, 0, 1)', // T
373
+ 'rgba(180, 0, 255, 1)' // Z
374
+ ];
375
+
376
+ const SHAPES = [
377
+ [],
378
+ [[0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]], // I
379
+ [[2, 0, 0], [2, 2, 2], [0, 0, 0]], // J
380
+ [[0, 0, 3], [3, 3, 3], [0, 0, 0]], // L
381
+ [[0, 4, 4], [0, 4, 4], [0, 0, 0]], // O
382
+ [[0, 5, 5], [5, 5, 0], [0, 0, 0]], // S
383
+ [[0, 6, 0], [6, 6, 6], [0, 0, 0]], // T
384
+ [[7, 7, 0], [0, 7, 7], [0, 0, 0]] // Z
385
+ ];
386
+
387
+ // Game state
388
+ let board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
389
+ let piece = null;
390
+ let nextPiece = null;
391
+ let score = 0;
392
+ let lines = 0;
393
+ let level = 1;
394
+ let gameOver = false;
395
+ let isPaused = false;
396
+ let dropCounter = 0;
397
+ let dropInterval = 1000;
398
+ let lastTime = 0;
399
+
400
+ // UI elements
401
+ const scoreElement = document.getElementById('score');
402
+ const levelElement = document.getElementById('level');
403
+ const linesElement = document.getElementById('lines');
404
+ const startButton = document.getElementById('start-btn');
405
+ const pauseButton = document.getElementById('pause-btn');
406
+ const restartButton = document.getElementById('restart-btn');
407
+ const gameOverScreen = document.getElementById('game-over');
408
+
409
+ // Initialize the game
410
+ function init() {
411
+ board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
412
+ score = 0;
413
+ lines = 0;
414
+ level = 1;
415
+ gameOver = false;
416
+ isPaused = false;
417
+ dropInterval = 1000;
418
+ updateScore();
419
+
420
+ createNextPiece();
421
+ spawnPiece();
422
+ draw();
423
+ }
424
+
425
+ // Create a new random piece
426
+ function createNextPiece() {
427
+ const shapeId = Math.floor(Math.random() * 7) + 1;
428
+ const shape = SHAPES[shapeId];
429
+
430
+ nextPiece = {
431
+ shapeId,
432
+ shape,
433
+ pos: {x: 0, y: 0},
434
+ width: shape[0].length,
435
+ height: shape.length
436
+ };
437
+
438
+ drawNextPiece();
439
+ }
440
+
441
+ // Draw the next piece preview
442
+ function drawNextPiece() {
443
+ nextCtx.clearRect(0, 0, nextCanvas.width, nextCanvas.height);
444
+
445
+ if (!nextPiece) return;
446
+
447
+ nextCtx.fillStyle = COLORS[nextPiece.shapeId];
448
+ nextCtx.strokeStyle = '#fff';
449
+ nextCtx.lineWidth = 1;
450
+
451
+ // Center the piece in the preview
452
+ const offsetX = (nextCanvas.width - nextPiece.width * (BLOCK_SIZE / 2)) / 2;
453
+ const offsetY = (nextCanvas.height - nextPiece.height * (BLOCK_SIZE / 2)) / 2;
454
+
455
+ for (let y = 0; y < nextPiece.height; y++) {
456
+ for (let x = 0; x < nextPiece.width; x++) {
457
+ if (nextPiece.shape[y][x]) {
458
+ drawBlock(
459
+ nextCtx,
460
+ x * (BLOCK_SIZE / 2) + offsetX,
461
+ y * (BLOCK_SIZE / 2) + offsetY,
462
+ BLOCK_SIZE / 2,
463
+ COLORS[nextPiece.shapeId],
464
+ true
465
+ );
466
+ }
467
+ }
468
+ }
469
+ }
470
+
471
+ // Spawn the next piece
472
+ function spawnPiece() {
473
+ piece = {
474
+ shapeId: nextPiece.shapeId,
475
+ shape: nextPiece.shape,
476
+ pos: {
477
+ x: Math.floor(COLS / 2) - Math.floor(nextPiece.width / 2),
478
+ y: 0
479
+ },
480
+ width: nextPiece.width,
481
+ height: nextPiece.height
482
+ };
483
+
484
+ createNextPiece();
485
+
486
+ // Check if game over
487
+ if (collision()) {
488
+ gameOver = true;
489
+ playSound('gameover');
490
+ gameOverScreen.style.display = 'flex';
491
+ }
492
+ }
493
+
494
+ // Rotate the current piece
495
+ function rotatePiece() {
496
+ if (isPaused || gameOver) return;
497
+
498
+ const rotated = Array(piece.width).fill().map(() => Array(piece.height).fill(0));
499
+
500
+ for (let y = 0; y < piece.height; y++) {
501
+ for (let x = 0; x < piece.width; x++) {
502
+ rotated[x][piece.height - 1 - y] = piece.shape[y][x];
503
+ }
504
+ }
505
+
506
+ const originalShape = piece.shape;
507
+ const originalWidth = piece.width;
508
+ const originalHeight = piece.height;
509
+
510
+ piece.shape = rotated;
511
+ piece.width = rotated[0].length;
512
+ piece.height = rotated.length;
513
+
514
+ // Wall kick - adjust position if rotation causes collision
515
+ if (collision()) {
516
+ // Try moving left
517
+ piece.pos.x -= 1;
518
+ if (collision()) {
519
+ // Try moving right
520
+ piece.pos.x += 2;
521
+ if (collision()) {
522
+ // Revert rotation
523
+ piece.shape = originalShape;
524
+ piece.width = originalWidth;
525
+ piece.height = originalHeight;
526
+ return;
527
+ }
528
+ }
529
+ }
530
+
531
+ playSound('rotate');
532
+ }
533
+
534
+ // Move the current piece
535
+ function movePiece(dir) {
536
+ if (isPaused || gameOver) return;
537
+
538
+ piece.pos.x += dir;
539
+
540
+ if (collision()) {
541
+ piece.pos.x -= dir;
542
+ return false;
543
+ }
544
+
545
+ playSound('move');
546
+ return true;
547
+ }
548
+
549
+ // Hard drop the current piece
550
+ function hardDrop() {
551
+ if (isPaused || gameOver) return;
552
+
553
+ while (!collision()) {
554
+ piece.pos.y++;
555
+ }
556
+
557
+ piece.pos.y--;
558
+ dropCounter = dropInterval;
559
+ merge();
560
+ spawnPiece();
561
+ playSound('drop');
562
+ }
563
+
564
+ // Merge the current piece with the board
565
+ function merge() {
566
+ for (let y = 0; y < piece.height; y++) {
567
+ for (let x = 0; x < piece.width; x++) {
568
+ if (piece.shape[y][x]) {
569
+ board[y + piece.pos.y][x + piece.pos.x] = piece.shapeId;
570
+ }
571
+ }
572
+ }
573
+
574
+ // Check for cleared lines
575
+ clearLines();
576
+ updateScore();
577
+ }
578
+
579
+ // Clear completed lines
580
+ function clearLines() {
581
+ let linesCleared = 0;
582
+
583
+ for (let y = ROWS - 1; y >= 0; y--) {
584
+ if (board[y].every(cell => cell > 0)) {
585
+ // Remove the line
586
+ board.splice(y, 1);
587
+ // Add a new empty line at the top
588
+ board.unshift(Array(COLS).fill(0));
589
+ linesCleared++;
590
+ y++; // Check this row again since rows shift down
591
+ }
592
+ }
593
+
594
+ if (linesCleared > 0) {
595
+ lines += linesCleared;
596
+ playSound('clear');
597
+
598
+ // Level up every 10 lines
599
+ level = Math.floor(lines / 10) + 1;
600
+ dropInterval = Math.max(100, 1000 - (level - 1) * 100);
601
+ }
602
+ }
603
+
604
+ // Check if the current piece collides with the board boundaries or other pieces
605
+ function collision() {
606
+ for (let y = 0; y < piece.height; y++) {
607
+ for (let x = 0; x < piece.width; x++) {
608
+ if (piece.shape[y][x]) {
609
+ const boardX = piece.pos.x + x;
610
+ const boardY = piece.pos.y + y;
611
+
612
+ if (
613
+ boardX < 0 ||
614
+ boardX >= COLS ||
615
+ boardY >= ROWS ||
616
+ (boardY >= 0 && board[boardY][boardX])
617
+ ) {
618
+ return true;
619
+ }
620
+ }
621
+ }
622
+ }
623
+ return false;
624
+ }
625
+
626
+ // Update game score and level display
627
+ function updateScore() {
628
+ // Simple scoring system
629
+ const newScore = lines * 100 * level;
630
+
631
+ scoreElement.textContent = String(newScore).padStart(5, '0');
632
+ levelElement.textContent = level;
633
+ linesElement.textContent = lines;
634
+ }
635
+
636
+ // Draw a single block with neon glow effect
637
+ function drawBlock(ctx, x, y, size, color, isGhost = false) {
638
+ const realX = x * size;
639
+ const realY = y * size;
640
+
641
+ // Inner block
642
+ if (isGhost) {
643
+ ctx.fillStyle = color.replace('1)', '0.3)');
644
+ } else {
645
+ ctx.fillStyle = color;
646
+ }
647
+
648
+ ctx.fillRect(realX, realY, size, size);
649
+
650
+ // Neon border effect
651
+ ctx.strokeStyle = isGhost ? color.replace('1)', '0.5)') : color;
652
+ ctx.lineWidth = isGhost ? 1 : 2;
653
+ ctx.strokeRect(realX, realY, size, size);
654
+
655
+ // Glow effect
656
+ if (!isGhost) {
657
+ ctx.shadowColor = color;
658
+ ctx.shadowBlur = 15;
659
+ ctx.fillRect(realX, realY, size, size);
660
+ ctx.shadowBlur = 0;
661
+
662
+ // Inner highlight
663
+ ctx.fillStyle = color.replace('1)', '0.7)');
664
+ ctx.fillRect(realX + size * 0.2, realY + size * 0.2, size * 0.6, size * 0.6);
665
+ }
666
+ }
667
+
668
+ // Draw the game board and current piece
669
+ function draw() {
670
+ // Clear the canvas
671
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
672
+
673
+ // Draw the board
674
+ for (let y = 0; y < ROWS; y++) {
675
+ for (let x = 0; x < COLS; x++) {
676
+ if (board[y][x]) {
677
+ drawBlock(ctx, x, y, BLOCK_SIZE, COLORS[board[y][x]]);
678
+ }
679
+ }
680
+ }
681
+
682
+ // Draw the current piece
683
+ if (piece) {
684
+ // Draw ghost piece
685
+ const ghostY = piece.pos.y;
686
+ while (!collision()) {
687
+ piece.pos.y++;
688
+ }
689
+ piece.pos.y--;
690
+
691
+ const currentY = piece.pos.y;
692
+ piece.pos.y = ghostY;
693
+
694
+ for (let y = 0; y < piece.height; y++) {
695
+ for (let x = 0; x < piece.width; x++) {
696
+ if (piece.shape[y][x]) {
697
+ drawBlock(ctx,
698
+ x + piece.pos.x,
699
+ y + currentY,
700
+ BLOCK_SIZE,
701
+ COLORS[piece.shapeId],
702
+ true
703
+ );
704
+ }
705
+ }
706
+ }
707
+
708
+ // Draw actual piece
709
+ for (let y = 0; y < piece.height; y++) {
710
+ for (let x = 0; x < piece.width; x++) {
711
+ if (piece.shape[y][x]) {
712
+ drawBlock(ctx,
713
+ x + piece.pos.x,
714
+ y + piece.pos.y,
715
+ BLOCK_SIZE,
716
+ COLORS[piece.shapeId]
717
+ );
718
+ }
719
+ }
720
+ }
721
+ }
722
+ }
723
+
724
+ // Game loop
725
+ function update(time = 0) {
726
+ if (gameOver) return;
727
+ if (isPaused) {
728
+ window.requestAnimationFrame(update);
729
+ return;
730
+ }
731
+
732
+ const deltaTime = time - lastTime;
733
+ lastTime = time;
734
+
735
+ dropCounter += deltaTime;
736
+ if (dropCounter > dropInterval) {
737
+ piece.pos.y++;
738
+ if (collision()) {
739
+ piece.pos.y--;
740
+ merge();
741
+ spawnPiece();
742
+ }
743
+ dropCounter = 0;
744
+ }
745
+
746
+ draw();
747
+ window.requestAnimationFrame(update);
748
+ }
749
+
750
+ // Event listeners
751
+ document.addEventListener('keydown', event => {
752
+ if (gameOver) return;
753
+
754
+ switch (event.key) {
755
+ case 'ArrowLeft':
756
+ movePiece(-1);
757
+ break;
758
+ case 'ArrowRight':
759
+ movePiece(1);
760
+ break;
761
+ case 'ArrowDown':
762
+ piece.pos.y++;
763
+ if (collision()) {
764
+ piece.pos.y--;
765
+ merge();
766
+ spawnPiece();
767
+ }
768
+ playSound('move');
769
+ dropCounter = 0;
770
+ break;
771
+ case 'ArrowUp':
772
+ rotatePiece();
773
+ break;
774
+ case ' ':
775
+ hardDrop();
776
+ break;
777
+ case 'p':
778
+ togglePause();
779
+ break;
780
+ }
781
+ });
782
+
783
+ function togglePause() {
784
+ if (gameOver) return;
785
+
786
+ isPaused = !isPaused;
787
+ pauseButton.textContent = isPaused ? 'RESUME' : 'PAUSE';
788
+
789
+ if (!isPaused) {
790
+ lastTime = performance.now();
791
+ update();
792
+ }
793
+ }
794
+
795
+ // Button event listeners
796
+ startButton.addEventListener('click', () => {
797
+ init();
798
+ lastTime = performance.now();
799
+ update();
800
+ });
801
+
802
+ pauseButton.addEventListener('click', togglePause);
803
+
804
+ restartButton.addEventListener('click', () => {
805
+ init();
806
+ gameOverScreen.style.display = 'none';
807
+ lastTime = performance.now();
808
+ update();
809
+ });
810
+
811
+ // Start the game
812
+ init();
813
+ draw();
814
+ });
815
+ </script>
816
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
817
+ </html>