Spaces:

C50BARZ
/

podsquad-tetris

Running

App Files Files Community

C50BARZ commited on Apr 5

Commit

aba6fe4

verified ·

1 Parent(s): 6bf40f6

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +526 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Podsquad Tetris
-emoji: 👁
 colorFrom: pink
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: podsquad-tetris
+emoji: 🐳
 colorFrom: pink
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,526 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        @keyframes colorChange {
+            0% { background-color: #ff6b6b; }
+            25% { background-color: #48dbfb; }
+            50% { background-color: #1dd1a1; }
+            75% { background-color: #feca57; }
+            100% { background-color: #ff6b6b; }
+        }
+        body {
+            animation: colorChange 15s infinite;
+            transition: background-color 1s ease;
+            font-family: 'Courier New', monospace;
+        }
+        #game-board {
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+        }
+        .block {
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-sizing: border-box;
+        }
+        .block.I { background-color: #00d2d3; }
+        .block.J { background-color: #5f27cd; }
+        .block.L { background-color: #ff9f43; }
+        .block.O { background-color: #feca57; }
+        .block.S { background-color: #1dd1a1; }
+        .block.T { background-color: #ff6b6b; }
+        .block.Z { background-color: #48dbfb; }
+        .glow {
+            animation: glow 0.5s ease-in-out infinite alternate;
+        }
+        @keyframes glow {
+            from { box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
+            to { box-shadow: 0 0 20px rgba(255, 255, 255, 0.9); }
+        }
+        #start-btn {
+            transition: all 0.3s ease;
+        }
+        #start-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col items-center justify-center text-white overflow-hidden">
+    <div class="text-center mb-6">
+        <img src="https://s3-us-west-2.amazonaws.com/anchor-generated-image-bank/staging/podcast_uploaded_nologo400/41101904/41101904-1733754532018-f9830aaa53f19.jpg"
+             alt="Tetris Logo"
+             class="mx-auto w-64 h-auto rounded-lg shadow-lg mb-4">
+        <h1 class="text-4xl font-bold mb-2 text-shadow">COLORFUL TETRIS</h1>
+        <div class="flex justify-center gap-8 mb-4">
+            <div>
+                <p class="text-xl">Score: <span id="score" class="font-bold">0</span></p>
+            </div>
+            <div>
+                <p class="text-xl">Level: <span id="level" class="font-bold">1</span></p>
+            </div>
+        </div>
+    </div>
+    <div class="relative">
+        <canvas id="game-board" width="300" height="600" class="bg-black bg-opacity-30"></canvas>
+        <div id="game-over" class="hidden absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center">
+            <h2 class="text-3xl font-bold mb-4">GAME OVER</h2>
+            <p class="text-xl mb-6">Final Score: <span id="final-score" class="font-bold">0</span></p>
+            <button id="restart-btn" class="px-6 py-3 bg-white text-black font-bold rounded-lg hover:bg-gray-200 transition">
+                Play Again
+            </button>
+        </div>
+        <div id="start-screen" class="absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center">
+            <button id="start-btn" class="px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold text-xl rounded-lg glow">
+                START GAME
+            </button>
+            <div class="mt-8 text-center">
+                <p class="mb-2">Controls:</p>
+                <p>← → : Move</p>
+                <p>↑ : Rotate</p>
+                <p>↓ : Soft Drop</p>
+                <p>Space : Hard Drop</p>
+            </div>
+        </div>
+    </div>
+    <div class="mt-6 flex gap-4">
+        <button id="sound-toggle" class="px-4 py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition">
+            🔈 Sound On
+        </button>
+    </div>
+    <audio id="bg-music" loop>
+        <source src="https://music.mota.press/music/tetris/project/bgms/bgm.mp3" type="audio/mpeg">
+    </audio>
+    <audio id="move-sound">
+        <source src="https://electronicenergysource.com/entirelibofsounds/Salvaged%20Files/1001%20Sound%20Effects/Video%20Game%20Sounds/Arcade%20Beep%2001.wav" type="audio/wav">
+    </audio>
+    <audio id="rotate-sound">
+        <source src="https://electronicenergysource.com/entirelibofsounds/Salvaged%20Files/1001%20Sound%20Effects/Video%20Game%20Sounds/Arcade%20Beep%2002.wav" type="audio/wav">
+    </audio>
+    <audio id="drop-sound">
+        <source src="https://electronicenergysource.com/entirelibofsounds/Salvaged%20Files/1001%20Sound%20Effects/Video%20Game%20Sounds/Arcade%20Beep%2003.wav" type="audio/wav">
+    </audio>
+    <audio id="clear-sound">
+        <source src="https://electronicenergysource.com/entirelibofsounds/Salvaged%20Files/1001%20Sound%20Effects/Video%20Game%20Sounds/Arcade%20Beep%2004.wav" type="audio/wav">
+    </audio>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game elements
+            const canvas = document.getElementById('game-board');
+            const ctx = canvas.getContext('2d');
+            const startScreen = document.getElementById('start-screen');
+            const gameOverScreen = document.getElementById('game-over');
+            const startBtn = document.getElementById('start-btn');
+            const restartBtn = document.getElementById('restart-btn');
+            const scoreDisplay = document.getElementById('score');
+            const finalScoreDisplay = document.getElementById('final-score');
+            const levelDisplay = document.getElementById('level');
+            const soundToggle = document.getElementById('sound-toggle');
+            // Audio elements
+            const bgMusic = document.getElementById('bg-music');
+            const moveSound = document.getElementById('move-sound');
+            const rotateSound = document.getElementById('rotate-sound');
+            const dropSound = document.getElementById('drop-sound');
+            const clearSound = document.getElementById('clear-sound');
+            // Game settings
+            const COLS = 10;
+            const ROWS = 20;
+            const BLOCK_SIZE = 30;
+            const COLORS = [
+                null,
+                '#00d2d3', // I
+                '#5f27cd', // J
+                '#ff9f43', // L
+                '#feca57', // O
+                '#1dd1a1', // S
+                '#ff6b6b', // T
+                '#48dbfb'  // Z
+            ];
+            // Game state
+            let board = createBoard();
+            let piece = null;
+            let nextPiece = null;
+            let score = 0;
+            let level = 1;
+            let lines = 0;
+            let gameOver = false;
+            let dropInterval = 1000;
+            let lastTime = 0;
+            let dropCounter = 0;
+            let soundOn = true;
+            let animationId = null;
+            // Tetromino shapes
+            const SHAPES = {
+                I: [
+                    [0, 0, 0, 0],
+                    [1, 1, 1, 1],
+                    [0, 0, 0, 0],
+                    [0, 0, 0, 0]
+                ],
+                J: [
+                    [2, 0, 0],
+                    [2, 2, 2],
+                    [0, 0, 0]
+                ],
+                L: [
+                    [0, 0, 3],
+                    [3, 3, 3],
+                    [0, 0, 0]
+                ],
+                O: [
+                    [4, 4],
+                    [4, 4]
+                ],
+                S: [
+                    [0, 5, 5],
+                    [5, 5, 0],
+                    [0, 0, 0]
+                ],
+                T: [
+                    [0, 6, 0],
+                    [6, 6, 6],
+                    [0, 0, 0]
+                ],
+                Z: [
+                    [7, 7, 0],
+                    [0, 7, 7],
+                    [0, 0, 0]
+                ]
+            };
+            // Create game board
+            function createBoard() {
+                return Array.from(Array(ROWS), () => Array(COLS).fill(0));
+            }
+            // Create a random piece
+            function createPiece() {
+                const keys = Object.keys(SHAPES);
+                const randKey = keys[Math.floor(Math.random() * keys.length)];
+                const matrix = SHAPES[randKey];
+                // Position the piece in the middle of the board
+                const pos = {
+                    x: Math.floor((COLS - matrix[0].length) / 2),
+                    y: 0
+                };
+                return {
+                    matrix,
+                    pos,
+                    type: randKey
+                };
+            }
+            // Draw the game board
+            function drawBoard() {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                // Draw existing blocks
+                board.forEach((row, y) => {
+                    row.forEach((value, x) => {
+                        if (value) {
+                            ctx.fillStyle = COLORS[value];
+                            ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
+                            // Add border to blocks
+                            ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+                            ctx.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
+                        }
+                    });
+                });
+                // Draw current piece
+                if (piece) {
+                    piece.matrix.forEach((row, y) => {
+                        row.forEach((value, x) => {
+                            if (value) {
+                                ctx.fillStyle = COLORS[value];
+                                ctx.fillRect(
+                                    (piece.pos.x + x) * BLOCK_SIZE,
+                                    (piece.pos.y + y) * BLOCK_SIZE,
+                                    BLOCK_SIZE, BLOCK_SIZE
+                                );
+                                // Add border to current piece
+                                ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+                                ctx.strokeRect(
+                                    (piece.pos.x + x) * BLOCK_SIZE,
+                                    (piece.pos.y + y) * BLOCK_SIZE,
+                                    BLOCK_SIZE, BLOCK_SIZE
+                                );
+                            }
+                        });
+                    });
+                }
+            }
+            // Merge the piece into the board
+            function merge() {
+                piece.matrix.forEach((row, y) => {
+                    row.forEach((value, x) => {
+                        if (value) {
+                            board[y + piece.pos.y][x + piece.pos.x] = value;
+                        }
+                    });
+                });
+            }
+            // Check for collisions
+            function collide() {
+                const [m, o] = [piece.matrix, piece.pos];
+                for (let y = 0; y < m.length; ++y) {
+                    for (let x = 0; x < m[y].length; ++x) {
+                        if (m[y][x] !== 0 &&
+                            (board[y + o.y] === undefined ||
+                             board[y + o.y][x + o.x] === undefined ||
+                             board[y + o.y][x + o.x] !== 0)) {
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            }
+            // Rotate the piece
+            function rotate() {
+                if (soundOn) rotateSound.play();
+                const matrix = piece.matrix;
+                const N = matrix.length;
+                // Transpose the matrix
+                for (let y = 0; y < N; ++y) {
+                    for (let x = 0; x < y; ++x) {
+                        [matrix[x][y], matrix[y][x]] = [matrix[y][x], matrix[x][y]];
+                    }
+                }
+                // Reverse each row
+                matrix.forEach(row => row.reverse());
+                // If rotation causes collision, revert it
+                if (collide()) {
+                    // Reverse each row again
+                    matrix.forEach(row => row.reverse());
+                    // Transpose again to revert
+                    for (let y = 0; y < N; ++y) {
+                        for (let x = 0; x < y; ++x) {
+                            [matrix[x][y], matrix[y][x]] = [matrix[y][x], matrix[x][y]];
+                        }
+                    }
+                }
+            }
+            // Move the piece
+            function movePiece(dir) {
+                if (soundOn) moveSound.play();
+                piece.pos.x += dir;
+                if (collide()) {
+                    piece.pos.x -= dir;
+                }
+            }
+            // Drop the piece
+            function dropPiece() {
+                if (soundOn) dropSound.play();
+                piece.pos.y++;
+                if (collide()) {
+                    piece.pos.y--;
+                    merge();
+                    clearLines();
+                    resetPiece();
+                    // Check for game over
+                    if (collide()) {
+                        gameOver = true;
+                    }
+                }
+                dropCounter = 0;
+            }
+            // Hard drop (instant drop)
+            function hardDrop() {
+                if (soundOn) dropSound.play();
+                while (!collide()) {
+                    piece.pos.y++;
+                }
+                piece.pos.y--;
+                merge();
+                clearLines();
+                resetPiece();
+                // Check for game over
+                if (collide()) {
+                    gameOver = true;
+                }
+                dropCounter = 0;
+            }
+            // Reset the piece after it lands
+            function resetPiece() {
+                piece = nextPiece || createPiece();
+                nextPiece = createPiece();
+            }
+            // Clear completed lines
+            function clearLines() {
+                let linesCleared = 0;
+                outer: for (let y = board.length - 1; y >= 0; --y) {
+                    for (let x = 0; x < board[y].length; ++x) {
+                        if (board[y][x] === 0) {
+                            continue outer;
+                        }
+                    }
+                    // Remove the line
+                    const row = board.splice(y, 1)[0].fill(0);
+                    board.unshift(row);
+                    ++y; // Check the same row again
+                    linesCleared++;
+                }
+                if (linesCleared > 0) {
+                    if (soundOn) clearSound.play();
+                    updateScore(linesCleared);
+                }
+            }
+            // Update score based on lines cleared
+            function updateScore(linesCleared) {
+                lines += linesCleared;
+                // Scoring based on original Tetris rules
+                const points = [0, 40, 100, 300, 1200];
+                score += points[linesCleared] * level;
+                // Level up every 10 lines
+                level = Math.floor(lines / 10) + 1;
+                // Increase speed with level (capped at 100ms)
+                dropInterval = Math.max(100, 1000 - (level - 1) * 100);
+                // Update displays
+                scoreDisplay.textContent = score;
+                levelDisplay.textContent = level;
+            }
+            // Game loop
+            function gameLoop(time = 0) {
+                const deltaTime = time - lastTime;
+                lastTime = time;
+                dropCounter += deltaTime;
+                if (dropCounter > dropInterval) {
+                    dropPiece();
+                }
+                drawBoard();
+                if (!gameOver) {
+                    animationId = requestAnimationFrame(gameLoop);
+                } else {
+                    endGame();
+                }
+            }
+            // Start the game
+            function startGame() {
+                if (soundOn) bgMusic.play();
+                board = createBoard();
+                piece = createPiece();
+                nextPiece = createPiece();
+                score = 0;
+                level = 1;
+                lines = 0;
+                gameOver = false;
+                dropInterval = 1000;
+                scoreDisplay.textContent = score;
+                levelDisplay.textContent = level;
+                startScreen.classList.add('hidden');
+                gameOverScreen.classList.add('hidden');
+                lastTime = 0;
+                dropCounter = 0;
+                gameLoop();
+            }
+            // End the game
+            function endGame() {
+                cancelAnimationFrame(animationId);
+                if (soundOn) bgMusic.pause();
+                finalScoreDisplay.textContent = score;
+                gameOverScreen.classList.remove('hidden');
+            }
+            // Event listeners
+            startBtn.addEventListener('click', startGame);
+            restartBtn.addEventListener('click', startGame);
+            soundToggle.addEventListener('click', () => {
+                soundOn = !soundOn;
+                soundToggle.textContent = soundOn ? '🔈 Sound On' : '🔇 Sound Off';
+                if (soundOn && !gameOver && !startScreen.classList.contains('hidden')) {
+                    bgMusic.play();
+                } else {
+                    bgMusic.pause();
+                }
+            });
+            // Keyboard controls
+            document.addEventListener('keydown', e => {
+                if (gameOver || startScreen.classList.contains('hidden') === false) return;
+                switch (e.keyCode) {
+                    case 37: // Left arrow
+                        movePiece(-1);
+                        break;
+                    case 39: // Right arrow
+                        movePiece(1);
+                        break;
+                    case 40: // Down arrow
+                        dropPiece();
+                        break;
+                    case 38: // Up arrow
+                        rotate();
+                        break;
+                    case 32: // Space
+                        hardDrop();
+                        break;
+                    case 80: // P
+                        // Pause functionality could be added here
+                        break;
+                }
+            });
+            // Initial draw
+            drawBoard();
+        });
+    </script>
+<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=C50BARZ/podsquad-tetris" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>