Spaces:

mahen23
/

tetris-one

Running

App Files Files Community

mahen23 commited on 22 days ago

Commit

22ad172

verified ·

1 Parent(s): 9ba2ae1

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +540 -19

README.md CHANGED Viewed

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

 ---
+title: tetris-one
+emoji: 🐳
+colorFrom: purple
+colorTo: gray
 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,540 @@
-<!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>Simple Tetris</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .cell {
+            width: 30px;
+            height: 30px;
+            border: 1px solid #ccc;
+        }
+        .piece-I { background-color: #00f0f0; }
+        .piece-J { background-color: #0000f0; }
+        .piece-L { background-color: #f0a000; }
+        .piece-O { background-color: #f0f000; }
+        .piece-S { background-color: #00f000; }
+        .piece-T { background-color: #a000f0; }
+        .piece-Z { background-color: #f00000; }
+        #game-board {
+            display: grid;
+            grid-template-rows: repeat(20, 30px);
+            grid-template-columns: repeat(10, 30px);
+            gap: 1px;
+            background-color: #111;
+        }
+        #next-piece {
+            display: grid;
+            grid-template-rows: repeat(4, 30px);
+            grid-template-columns: repeat(4, 30px);
+            gap: 1px;
+            background-color: #111;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="text-center mb-4">
+        <h1 class="text-4xl font-bold mb-2">Tetris</h1>
+        <div class="flex justify-center gap-8">
+            <div>
+                <div class="text-xl font-semibold mb-2">Score: <span id="score">0</span></div>
+                <div class="text-xl font-semibold mb-2">Level: <span id="level">1</span></div>
+                <div class="text-xl font-semibold mb-2">Lines: <span id="lines">0</span></div>
+            </div>
+            <div>
+                <div class="text-xl font-semibold mb-2">High Score: <span id="high-score">0</span></div>
+                <div class="text-lg mb-2">Next:</div>
+                <div id="next-piece" class="mb-4"></div>
+            </div>
+        </div>
+    </div>
+    <div class="flex gap-8 items-start">
+        <div id="game-board"></div>
+    </div>
+    <div class="mt-6 flex gap-4">
+        <button id="start-btn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
+            Start Game
+        </button>
+        <button id="pause-btn" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded" disabled>
+            Pause
+        </button>
+        <button id="reset-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
+            Reset
+        </button>
+    </div>
+    <div class="mt-6 text-center">
+        <p class="mb-2">Controls:</p>
+        <p>← → : Move Left/Right</p>
+        <p>↑ : Rotate</p>
+        <p>↓ : Soft Drop</p>
+        <p>Space : Hard Drop</p>
+        <p>P : Pause</p>
+    </div>
+    <script>
+        // Game constants
+        const COLS = 10;
+        const ROWS = 20;
+        const BLOCK_SIZE = 30;
+        const EMPTY = 'empty';
+        // Tetromino shapes
+        const SHAPES = {
+            I: [
+                [0, 0, 0, 0],
+                [1, 1, 1, 1],
+                [0, 0, 0, 0],
+                [0, 0, 0, 0]
+            ],
+            J: [
+                [1, 0, 0],
+                [1, 1, 1],
+                [0, 0, 0]
+            ],
+            L: [
+                [0, 0, 1],
+                [1, 1, 1],
+                [0, 0, 0]
+            ],
+            O: [
+                [1, 1],
+                [1, 1]
+            ],
+            S: [
+                [0, 1, 1],
+                [1, 1, 0],
+                [0, 0, 0]
+            ],
+            T: [
+                [0, 1, 0],
+                [1, 1, 1],
+                [0, 0, 0]
+            ],
+            Z: [
+                [1, 1, 0],
+                [0, 1, 1],
+                [0, 0, 0]
+            ]
+        };
+        const COLORS = {
+            I: 'piece-I',
+            J: 'piece-J',
+            L: 'piece-L',
+            O: 'piece-O',
+            S: 'piece-S',
+            T: 'piece-T',
+            Z: 'piece-Z'
+        };
+        // Game variables
+        let board = Array(ROWS).fill().map(() => Array(COLS).fill(EMPTY));
+        let currentPiece = null;
+        let nextPiece = null;
+        let currentX = 0;
+        let currentY = 0;
+        let score = 0;
+        let level = 1;
+        let lines = 0;
+        let gameInterval = null;
+        let gameSpeed = 1000;
+        let isPaused = false;
+        let isGameOver = false;
+        // DOM elements
+        const gameBoard = document.getElementById('game-board');
+        const nextPieceDisplay = document.getElementById('next-piece');
+        const scoreDisplay = document.getElementById('score');
+        const levelDisplay = document.getElementById('level');
+        const linesDisplay = document.getElementById('lines');
+        const highScoreDisplay = document.getElementById('high-score');
+        const startBtn = document.getElementById('start-btn');
+        const pauseBtn = document.getElementById('pause-btn');
+        const resetBtn = document.getElementById('reset-btn');
+        // Initialize the game board
+        function initBoard() {
+            gameBoard.innerHTML = '';
+            for (let y = 0; y < ROWS; y++) {
+                for (let x = 0; x < COLS; x++) {
+                    const cell = document.createElement('div');
+                    cell.className = 'cell';
+                    cell.id = `cell-${y}-${x}`;
+                    gameBoard.appendChild(cell);
+                }
+            }
+        }
+        // Initialize the next piece display
+        function initNextPieceDisplay() {
+            nextPieceDisplay.innerHTML = '';
+            for (let y = 0; y < 4; y++) {
+                for (let x = 0; x < 4; x++) {
+                    const cell = document.createElement('div');
+                    cell.className = 'cell';
+                    cell.id = `next-cell-${y}-${x}`;
+                    nextPieceDisplay.appendChild(cell);
+                }
+            }
+        }
+        // Get a random tetromino
+        function getRandomPiece() {
+            const pieces = Object.keys(SHAPES);
+            const randomPiece = pieces[Math.floor(Math.random() * pieces.length)];
+            return {
+                shape: SHAPES[randomPiece],
+                color: COLORS[randomPiece],
+                type: randomPiece
+            };
+        }
+        // Draw the game board
+        function drawBoard() {
+            for (let y = 0; y < ROWS; y++) {
+                for (let x = 0; x < COLS; x++) {
+                    const cell = document.getElementById(`cell-${y}-${x}`);
+                    cell.className = 'cell';
+                    if (board[y][x] !== EMPTY) {
+                        cell.classList.add(board[y][x]);
+                    }
+                }
+            }
+        }
+        // Draw the current piece
+        function drawPiece() {
+            if (!currentPiece) return;
+            for (let y = 0; y < currentPiece.shape.length; y++) {
+                for (let x = 0; x < currentPiece.shape[y].length; x++) {
+                    if (currentPiece.shape[y][x]) {
+                        const boardY = currentY + y;
+                        const boardX = currentX + x;
+                        if (boardY >= 0 && boardY < ROWS && boardX >= 0 && boardX < COLS) {
+                            const cell = document.getElementById(`cell-${boardY}-${boardX}`);
+                            cell.classList.add(currentPiece.color);
+                        }
+                    }
+                }
+            }
+        }
+        // Draw the next piece
+        function drawNextPiece() {
+            if (!nextPiece) return;
+            // Clear next piece display
+            for (let y = 0; y < 4; y++) {
+                for (let x = 0; x < 4; x++) {
+                    const cell = document.getElementById(`next-cell-${y}-${x}`);
+                    cell.className = 'cell';
+                }
+            }
+            // Draw the next piece centered
+            const offsetX = Math.floor((4 - nextPiece.shape[0].length) / 2);
+            const offsetY = Math.floor((4 - nextPiece.shape.length) / 2);
+            for (let y = 0; y < nextPiece.shape.length; y++) {
+                for (let x = 0; x < nextPiece.shape[y].length; x++) {
+                    if (nextPiece.shape[y][x]) {
+                        const displayY = y + offsetY;
+                        const displayX = x + offsetX;
+                        const cell = document.getElementById(`next-cell-${displayY}-${displayX}`);
+                        cell.classList.add(nextPiece.color);
+                    }
+                }
+            }
+        }
+        // Check for collisions
+        function collision(x, y, piece) {
+            for (let py = 0; py < piece.shape.length; py++) {
+                for (let px = 0; px < piece.shape[py].length; px++) {
+                    if (!piece.shape[py][px]) continue;
+                    const newX = x + px;
+                    const newY = y + py;
+                    if (newX < 0 || newX >= COLS || newY >= ROWS) {
+                        return true;
+                    }
+                    if (newY >= 0 && board[newY][newX] !== EMPTY) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+        // Rotate the current piece
+        function rotate() {
+            if (!currentPiece || isPaused || isGameOver) return;
+            const newShape = currentPiece.shape[0].map((_, i) =>
+                currentPiece.shape.map(row => row[i]).reverse()
+            );
+            const oldShape = currentPiece.shape;
+            currentPiece.shape = newShape;
+            if (collision(currentX, currentY, currentPiece)) {
+                currentPiece.shape = oldShape;
+            } else {
+                draw();
+            }
+        }
+        // Move the current piece
+        function move(direction) {
+            if (!currentPiece || isPaused || isGameOver) return;
+            let newX = currentX;
+            let newY = currentY;
+            switch (direction) {
+                case 'left':
+                    newX--;
+                    break;
+                case 'right':
+                    newX++;
+                    break;
+                case 'down':
+                    newY++;
+                    break;
+            }
+            if (!collision(newX, newY, currentPiece)) {
+                currentX = newX;
+                currentY = newY;
+                draw();
+                return true;
+            }
+            // If we couldn't move down, lock the piece
+            if (direction === 'down') {
+                lockPiece();
+                clearLines();
+                spawnPiece();
+                if (collision(currentX, currentY, currentPiece)) {
+                    gameOver();
+                }
+            }
+            return false;
+        }
+        // Hard drop the current piece
+        function hardDrop() {
+            if (!currentPiece || isPaused || isGameOver) return;
+            while (move('down')) {
+                // Keep moving down until we can't anymore
+            }
+        }
+        // Lock the current piece to the board
+        function lockPiece() {
+            for (let y = 0; y < currentPiece.shape.length; y++) {
+                for (let x = 0; x < currentPiece.shape[y].length; x++) {
+                    if (currentPiece.shape[y][x]) {
+                        const boardY = currentY + y;
+                        const boardX = currentX + x;
+                        if (boardY >= 0 && boardX >= 0 && boardY < ROWS && boardX < COLS) {
+                            board[boardY][boardX] = currentPiece.color;
+                        }
+                    }
+                }
+            }
+        }
+        // Clear completed lines
+        function clearLines() {
+            let linesCleared = 0;
+            for (let y = ROWS - 1; y >= 0; y--) {
+                if (board[y].every(cell => cell !== EMPTY)) {
+                    // Remove the line
+                    board.splice(y, 1);
+                    // Add a new empty line at the top
+                    board.unshift(Array(COLS).fill(EMPTY));
+                    linesCleared++;
+                    y++; // Check the same row again (now with new content)
+                }
+            }
+            if (linesCleared > 0) {
+                // Update score
+                const points = [0, 40, 100, 300, 1200][linesCleared] * level;
+                score += points;
+                lines += linesCleared;
+                // Update level every 10 lines
+                const newLevel = Math.floor(lines / 10) + 1;
+                if (newLevel > level) {
+                    level = newLevel;
+                    gameSpeed = Math.max(100, 1000 - (level - 1) * 100);
+                    clearInterval(gameInterval);
+                    gameInterval = setInterval(gameLoop, gameSpeed);
+                }
+                updateDisplay();
+            }
+        }
+        // Spawn a new piece
+        function spawnPiece() {
+            currentPiece = nextPiece || getRandomPiece();
+            nextPiece = getRandomPiece();
+            // Start position (centered at top)
+            currentX = Math.floor(COLS / 2) - Math.floor(currentPiece.shape[0].length / 2);
+            currentY = 0;
+            drawNextPiece();
+        }
+        // Game loop
+        function gameLoop() {
+            if (!isPaused && !isGameOver) {
+                move('down');
+            }
+        }
+        // Start the game
+        function startGame() {
+            if (gameInterval) {
+                clearInterval(gameInterval);
+            }
+            // Reset game state
+            board = Array(ROWS).fill().map(() => Array(COLS).fill(EMPTY));
+            score = 0;
+            level = 1;
+            lines = 0;
+            gameSpeed = 1000;
+            isPaused = false;
+            isGameOver = false;
+            // Get high score from local storage
+            const highScore = localStorage.getItem('tetrisHighScore') || 0;
+            highScoreDisplay.textContent = highScore;
+            // Initialize pieces
+            nextPiece = getRandomPiece();
+            spawnPiece();
+            // Start game loop
+            gameInterval = setInterval(gameLoop, gameSpeed);
+            // Update UI
+            updateDisplay();
+            startBtn.disabled = true;
+            pauseBtn.disabled = false;
+            pauseBtn.textContent = 'Pause';
+        }
+        // Pause the game
+        function togglePause() {
+            if (isGameOver) return;
+            isPaused = !isPaused;
+            pauseBtn.textContent = isPaused ? 'Resume' : 'Pause';
+        }
+        // Reset the game
+        function resetGame() {
+            clearInterval(gameInterval);
+            gameInterval = null;
+            isGameOver = true;
+            startBtn.disabled = false;
+            pauseBtn.disabled = true;
+            // Clear the board
+            board = Array(ROWS).fill().map(() => Array(COLS).fill(EMPTY));
+            draw();
+        }
+        // Game over
+        function gameOver() {
+            clearInterval(gameInterval);
+            isGameOver = true;
+            // Update high score if needed
+            const highScore = localStorage.getItem('tetrisHighScore') || 0;
+            if (score > highScore) {
+                localStorage.setItem('tetrisHighScore', score);
+                highScoreDisplay.textContent = score;
+            }
+            alert(`Game Over! Your score: ${score}`);
+            startBtn.disabled = false;
+            pauseBtn.disabled = true;
+        }
+        // Update the display
+        function updateDisplay() {
+            scoreDisplay.textContent = score;
+            levelDisplay.textContent = level;
+            linesDisplay.textContent = lines;
+        }
+        // Draw everything
+        function draw() {
+            drawBoard();
+            drawPiece();
+        }
+        // Event listeners
+        document.addEventListener('keydown', (e) => {
+            if (isGameOver) return;
+            switch (e.key) {
+                case 'ArrowLeft':
+                    move('left');
+                    break;
+                case 'ArrowRight':
+                    move('right');
+                    break;
+                case 'ArrowDown':
+                    move('down');
+                    break;
+                case 'ArrowUp':
+                    rotate();
+                    break;
+                case ' ':
+                    hardDrop();
+                    break;
+                case 'p':
+                case 'P':
+                    togglePause();
+                    break;
+            }
+        });
+        startBtn.addEventListener('click', startGame);
+        pauseBtn.addEventListener('click', togglePause);
+        resetBtn.addEventListener('click', resetGame);
+        // Initialize the game
+        initBoard();
+        initNextPieceDisplay();
+        // Load high score
+        const highScore = localStorage.getItem('tetrisHighScore') || 0;
+        highScoreDisplay.textContent = highScore;
+    </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=mahen23/tetris-one" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>