Spaces:

bestofaiml
/

tetris

Running

App Files Files Community

bestofaiml commited on Mar 31, 2025

Commit

91ca8e9

verified ·

1 Parent(s): 3c65d7e

Update index.html

Browse files

Files changed (1) hide show

index.html +804 -19

index.html CHANGED Viewed

@@ -1,19 +1,804 @@
-<!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>Classic Tetris</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Arial', sans-serif;
+        }
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #1e1e2f, #2d2d44);
+            color: #fff;
+            overflow: hidden;
+        }
+        .game-container {
+            display: flex;
+            gap: 30px;
+            align-items: flex-start;
+        }
+        #game-board {
+            border: 4px solid #4a4a6b;
+            border-radius: 5px;
+            display: grid;
+            grid-template-rows: repeat(20, 1fr);
+            grid-template-columns: repeat(10, 1fr);
+            gap: 1px;
+            background-color: #2a2a3a;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+            width: 300px;
+            height: 600px;
+        }
+        .cell {
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            background-color: #2a2a3a;
+        }
+        .controls {
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+        }
+        .info-panel {
+            background-color: #2a2a3a;
+            border: 4px solid #4a4a6b;
+            border-radius: 5px;
+            padding: 20px;
+            width: 180px;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+        }
+        .next-piece-container {
+            width: 120px;
+            height: 120px;
+            display: grid;
+            grid-template-rows: repeat(4, 1fr);
+            grid-template-columns: repeat(4, 1fr);
+            gap: 2px;
+            margin-top: 10px;
+            margin-bottom: 20px;
+        }
+        .next-cell {
+            background-color: #3a3a4a;
+            border-radius: 2px;
+        }
+        h2 {
+            font-size: 18px;
+            margin-bottom: 10px;
+            color: #ddd;
+        }
+        .score-display {
+            font-size: 24px;
+            margin-bottom: 15px;
+            color: #fff;
+        }
+        .level-display {
+            font-size: 18px;
+            margin-bottom: 15px;
+            color: #fff;
+        }
+        .controls-info {
+            background-color: #2a2a3a;
+            border: 4px solid #4a4a6b;
+            border-radius: 5px;
+            padding: 20px;
+            width: 180px;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+        }
+        .control-item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+            font-size: 14px;
+            color: #ccc;
+        }
+        .key {
+            background-color: #4a4a6b;
+            color: #fff;
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-family: monospace;
+        }
+        .game-over {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 10;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+        }
+        .game-over.show {
+            opacity: 1;
+            pointer-events: all;
+        }
+        .game-over h1 {
+            font-size: 42px;
+            margin-bottom: 20px;
+            color: #ff5555;
+        }
+        .final-score {
+            font-size: 24px;
+            margin-bottom: 30px;
+        }
+        .restart-btn {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            font-size: 16px;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: background-color 0.3s;
+        }
+        .restart-btn:hover {
+            background-color: #45a049;
+        }
+        .tetromino-i { background-color: #00f0f0; }
+        .tetromino-j { background-color: #0000f0; }
+        .tetromino-l { background-color: #f0a000; }
+        .tetromino-o { background-color: #f0f000; }
+        .tetromino-s { background-color: #00f000; }
+        .tetromino-t { background-color: #a000f0; }
+        .tetromino-z { background-color: #f00000; }
+        .tetromino-i.ghost { background-color: rgba(0, 240, 240, 0.2); }
+        .tetromino-j.ghost { background-color: rgba(0, 0, 240, 0.2); }
+        .tetromino-l.ghost { background-color: rgba(240, 160, 0, 0.2); }
+        .tetromino-o.ghost { background-color: rgba(240, 240, 0, 0.2); }
+        .tetromino-s.ghost { background-color: rgba(0, 240, 0, 0.2); }
+        .tetromino-t.ghost { background-color: rgba(160, 0, 240, 0.2); }
+        .tetromino-z.ghost { background-color: rgba(240, 0, 0, 0.2); }
+        @media (max-width: 768px) {
+            .game-container {
+                flex-direction: column;
+                align-items: center;
+            }
+            .controls {
+                flex-direction: row;
+                margin-top: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <div id="game-board"></div>
+        <div class="controls">
+            <div class="info-panel">
+                <h2>Next Piece</h2>
+                <div class="next-piece-container" id="next-piece"></div>
+                <h2>Score</h2>
+                <div class="score-display" id="score">0</div>
+                <h2>Level</h2>
+                <div class="level-display" id="level">1</div>
+            </div>
+            <div class="controls-info">
+                <h2>Controls</h2>
+                <div class="control-item">
+                    <span>Move Left</span>
+                    <span class="key">←</span>
+                </div>
+                <div class="control-item">
+                    <span>Move Right</span>
+                    <span class="key">→</span>
+                </div>
+                <div class="control-item">
+                    <span>Rotate</span>
+                    <span class="key">↑</span>
+                </div>
+                <div class="control-item">
+                    <span>Soft Drop</span>
+                    <span class="key">↓</span>
+                </div>
+                <div class="control-item">
+                    <span>Hard Drop</span>
+                    <span class="key">Space</span>
+                </div>
+                <div class="control-item">
+                    <span>Pause</span>
+                    <span class="key">P</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="game-over" id="game-over">
+        <h1>GAME OVER</h1>
+        <div class="final-score">Score: <span id="final-score">0</span></div>
+        <button class="restart-btn" id="restart-btn">Play Again</button>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game constants
+            const COLS = 10;
+            const ROWS = 20;
+            const BLOCK_SIZE = 30;
+            const NEXT_PIECE_COLS = 4;
+            const NEXT_PIECE_ROWS = 4;
+            // DOM elements
+            const gameBoard = document.getElementById('game-board');
+            const nextPieceContainer = document.getElementById('next-piece');
+            const scoreDisplay = document.getElementById('score');
+            const levelDisplay = document.getElementById('level');
+            const gameOverScreen = document.getElementById('game-over');
+            const finalScoreDisplay = document.getElementById('final-score');
+            const restartBtn = document.getElementById('restart-btn');
+            // Game state
+            let board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
+            let currentPiece = null;
+            let nextPiece = null;
+            let currentPosition = { x: 0, y: 0 };
+            let score = 0;
+            let level = 1;
+            let linesCleared = 0;
+            let gameOver = false;
+            let isPaused = false;
+            let dropStart;
+            let gameInterval;
+            // 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: 'tetromino-i',
+                J: 'tetromino-j',
+                L: 'tetromino-l',
+                O: 'tetromino-o',
+                S: 'tetromino-s',
+                T: 'tetromino-t',
+                Z: 'tetromino-z'
+            };
+            // Initialize game board
+            function initBoard() {
+                gameBoard.innerHTML = '';
+                for (let row = 0; row < ROWS; row++) {
+                    for (let col = 0; col < COLS; col++) {
+                        const cell = document.createElement('div');
+                        cell.className = 'cell';
+                        cell.id = `${row}-${col}`;
+                        gameBoard.appendChild(cell);
+                    }
+                }
+            }
+            // Initialize next piece display
+            function initNextPieceDisplay() {
+                nextPieceContainer.innerHTML = '';
+                for (let row = 0; row < NEXT_PIECE_ROWS; row++) {
+                    for (let col = 0; col < NEXT_PIECE_COLS; col++) {
+                        const cell = document.createElement('div');
+                        cell.className = 'next-cell';
+                        cell.id = `next-${row}-${col}`;
+                        nextPieceContainer.appendChild(cell);
+                    }
+                }
+            }
+            // Get random tetromino
+            function getRandomPiece() {
+                const keys = Object.keys(SHAPES);
+                const randomKey = keys[Math.floor(Math.random() * keys.length)];
+                return {
+                    shape: SHAPES[randomKey],
+                    color: COLORS[randomKey],
+                    type: randomKey
+                };
+            }
+            // Draw the current piece on the board
+            function drawPiece(x, y, piece, isGhost = false) {
+                piece.shape.forEach((row, rowIndex) => {
+                    row.forEach((value, colIndex) => {
+                        if (value) {
+                            const boardRow = y + rowIndex;
+                            const boardCol = x + colIndex;
+                            if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
+                                const cell = document.getElementById(`${boardRow}-${boardCol}`);
+                                if (cell) {
+                                    cell.classList.add(piece.color);
+                                    if (isGhost) {
+                                        cell.classList.add('ghost');
+                                    }
+                                }
+                            }
+                        }
+                    });
+                });
+            }
+            // Clear the current piece from the board
+            function clearPiece(x, y, piece) {
+                piece.shape.forEach((row, rowIndex) => {
+                    row.forEach((value, colIndex) => {
+                        if (value) {
+                            const boardRow = y + rowIndex;
+                            const boardCol = x + colIndex;
+                            if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
+                                const cell = document.getElementById(`${boardRow}-${boardCol}`);
+                                if (cell) {
+                                    cell.className = 'cell';
+                                }
+                            }
+                        }
+                    });
+                });
+            }
+            // Draw the ghost piece (projection of where the piece will land)
+            function drawGhostPiece() {
+                let ghostY = currentPosition.y;
+                while (!collision(currentPosition.x, ghostY + 1, currentPiece)) {
+                    ghostY++;
+                }
+                if (ghostY !== currentPosition.y) {
+                    // First clear any existing ghost pieces
+                    clearGhost();
+                    // Draw the new ghost piece
+                    drawPiece(currentPosition.x, ghostY, currentPiece, true);
+                }
+            }
+            // Clear all ghost pieces from the board
+            function clearGhost() {
+                const ghostCells = document.querySelectorAll('.ghost');
+                ghostCells.forEach(cell => {
+                    const className = cell.className;
+                    const colorClass = className.split(' ').find(cls => cls.startsWith('tetromino-'));
+                    cell.className = 'cell';
+                    if (colorClass) {
+                        cell.classList.remove(colorClass, 'ghost');
+                    }
+                });
+            }
+            // Check for collision
+            function collision(x, y, piece) {
+                for (let row = 0; row < piece.shape.length; row++) {
+                    for (let col = 0; col < piece.shape[row].length; col++) {
+                        if (!piece.shape[row][col]) continue;
+                        const boardX = x + col;
+                        const boardY = y + row;
+                        if (
+                            boardX < 0 ||
+                            boardX >= COLS ||
+                            boardY >= ROWS ||
+                            (boardY >= 0 && board[boardY][boardX])
+                        ) {
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            }
+            // Rotate piece
+            function rotate(piece) {
+                const N = piece.shape.length;
+                const rotated = Array(N).fill().map(() => Array(N).fill(0));
+                // Transpose the matrix
+                for (let i = 0; i < N; i++) {
+                    for (let j = 0; j < N; j++) {
+                        rotated[i][j] = piece.shape[N - j - 1][i];
+                    }
+                }
+                // Special case for I piece to make it rotate properly
+                if (piece.type === 'I') {
+                    if (currentPosition.x < 0) {
+                        currentPosition.x = 0;
+                    } else if (currentPosition.x > COLS - 4) {
+                        currentPosition.x = COLS - 4;
+                    }
+                }
+                return {
+                    ...piece,
+                    shape: rotated
+                };
+            }
+            // Lock piece in place
+            function lockPiece() {
+                currentPiece.shape.forEach((row, rowIndex) => {
+                    row.forEach((value, colIndex) => {
+                        if (value) {
+                            const boardRow = currentPosition.y + rowIndex;
+                            const boardCol = currentPosition.x + colIndex;
+                            if (boardRow >= 0) {
+                                board[boardRow][boardCol] = currentPiece.color;
+                            }
+                        }
+                    });
+                });
+                // Check for completed lines
+                checkLines();
+                // Check for game over
+                if (currentPosition.y <= 0) {
+                    gameOver = true;
+                    showGameOver();
+                    return;
+                }
+                // Get next piece
+                currentPiece = nextPiece;
+                nextPiece = getRandomPiece();
+                currentPosition = { x: Math.floor(COLS / 2) - Math.floor(currentPiece.shape[0].length / 2), y: 0 };
+                // Update next piece display
+                updateNextPieceDisplay();
+                // Draw the new piece and ghost
+                drawPiece(currentPosition.x, currentPosition.y, currentPiece);
+                drawGhostPiece();
+                // Reset drop interval
+                dropStart = Date.now();
+            }
+            // Check for completed lines
+            function checkLines() {
+                let linesToClear = 0;
+                for (let row = ROWS - 1; row >= 0; row--) {
+                    if (board[row].every(cell => cell)) {
+                        linesToClear++;
+                        // Shift all rows above down
+                        for (let y = row; y > 0; y--) {
+                            board[y] = [...board[y - 1]];
+                        }
+                        board[0] = Array(COLS).fill(0);
+                        // Since we modified the current row, need to check it again
+                        row++;
+                    }
+                }
+                if (linesToClear > 0) {
+                    // Update score
+                    updateScore(linesToClear);
+                    // Redraw the board
+                    drawBoard();
+                }
+            }
+            // Update score
+            function updateScore(lines) {
+                const points = [0, 40, 100, 300, 1200]; // Points for 0, 1, 2, 3, 4 lines
+                score += points[lines] * level;
+                linesCleared += lines;
+                // Every 10 lines increases the level
+                level = Math.floor(linesCleared / 10) + 1;
+                // Update displays
+                scoreDisplay.textContent = score;
+                levelDisplay.textContent = level;
+            }
+            // Draw the entire board
+            function drawBoard() {
+                for (let row = 0; row < ROWS; row++) {
+                    for (let col = 0; col < COLS; col++) {
+                        const cell = document.getElementById(`${row}-${col}`);
+                        cell.className = 'cell';
+                        if (board[row][col]) {
+                            cell.classList.add(board[row][col]);
+                        }
+                    }
+                }
+            }
+            // Update next piece display
+            function updateNextPieceDisplay() {
+                // Clear the next piece display
+                for (let row = 0; row < NEXT_PIECE_ROWS; row++) {
+                    for (let col = 0; col < NEXT_PIECE_COLS; col++) {
+                        const cell = document.getElementById(`next-${row}-${col}`);
+                        cell.className = 'next-cell';
+                    }
+                }
+                // Draw the next piece in the center
+                const startRow = Math.floor((NEXT_PIECE_ROWS - nextPiece.shape.length) / 2);
+                const startCol = Math.floor((NEXT_PIECE_COLS - nextPiece.shape[0].length) / 2);
+                for (let row = 0; row < nextPiece.shape.length; row++) {
+                    for (let col = 0; col < nextPiece.shape[row].length; col++) {
+                        if (nextPiece.shape[row][col]) {
+                            const cell = document.getElementById(`next-${startRow + row}-${startCol + col}`);
+                            if (cell) {
+                                cell.classList.add(nextPiece.color);
+                            }
+                        }
+                    }
+                }
+            }
+            // Move piece down
+            function moveDown() {
+                if (gameOver || isPaused) return;
+                clearPiece(currentPosition.x, currentPosition.y, currentPiece);
+                clearGhost();
+                if (!collision(currentPosition.x, currentPosition.y + 1, currentPiece)) {
+                    currentPosition.y++;
+                    drawPiece(currentPosition.x, currentPosition.y, currentPiece);
+                    drawGhostPiece();
+                    return true;
+                } else {
+                    drawPiece(currentPosition.x, currentPosition.y, currentPiece);
+                    drawGhostPiece();
+                    lockPiece();
+                    return false;
+                }
+            }
+            // Hard drop
+            function hardDrop() {
+                if (gameOver || isPaused) return;
+                clearPiece(currentPosition.x, currentPosition.y, currentPiece);
+                clearGhost();
+                while (!collision(currentPosition.x, currentPosition.y + 1, currentPiece)) {
+                    currentPosition.y++;
+                }
+                drawPiece(currentPosition.x, currentPosition.y, currentPiece);
+                lockPiece();
+                dropStart = Date.now();
+            }
+            // Move piece left or right
+            function movePiece(direction) {
+                if (gameOver || isPaused) return;
+                clearPiece(currentPosition.x, currentPosition.y, currentPiece);
+                clearGhost();
+                const newX = currentPosition.x + direction;
+                if (!collision(newX, currentPosition.y, currentPiece)) {
+                    currentPosition.x = newX;
+                }
+                drawPiece(currentPosition.x, currentPosition.y, currentPiece);
+                drawGhostPiece();
+            }
+            // Rotate current piece
+            function rotatePiece() {
+                if (gameOver || isPaused) return;
+                clearPiece(currentPosition.x, currentPosition.y, currentPiece);
+                clearGhost();
+                const rotated = rotate(currentPiece);
+                // Wall kick - try moving left/right if rotation would cause a collision
+                if (!collision(currentPosition.x, currentPosition.y, rotated)) {
+                    currentPiece = rotated;
+                } else if (!collision(currentPosition.x - 1, currentPosition.y, rotated)) {
+                    currentPiece = rotated;
+                    currentPosition.x--;
+                } else if (!collision(currentPosition.x + 1, currentPosition.y, rotated)) {
+                    currentPiece = rotated;
+                    currentPosition.x++;
+                }
+                drawPiece(currentPosition.x, currentPosition.y, currentPiece);
+                drawGhostPiece();
+            }
+            // Game loop
+            function gameLoop() {
+                const now = Date.now();
+                const delta = now - dropStart;
+                const dropInterval = Math.max(1000 - (level - 1) * 100, 100); // Speeds up as level increases
+                if (delta > dropInterval) {
+                    moveDown();
+                    dropStart = now;
+                }
+                if (!gameOver) {
+                    requestAnimationFrame(gameLoop);
+                }
+            }
+            // Show game over screen
+            function showGameOver() {
+                gameOverScreen.classList.add('show');
+                finalScoreDisplay.textContent = score;
+                clearInterval(gameInterval);
+            }
+            // Reset game
+            function resetGame() {
+                board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
+                score = 0;
+                level = 1;
+                linesCleared = 0;
+                gameOver = false;
+                isPaused = false;
+                scoreDisplay.textContent = score;
+                levelDisplay.textContent = level;
+                // Initialize pieces
+                currentPiece = getRandomPiece();
+                nextPiece = getRandomPiece();
+                currentPosition = { x: Math.floor(COLS / 2) - Math.floor(currentPiece.shape[0].length / 2), y: 0 };
+                // Clear the board
+                drawBoard();
+                updateNextPieceDisplay();
+                // Draw current piece and ghost
+                drawPiece(currentPosition.x, currentPosition.y, currentPiece);
+                drawGhostPiece();
+                // Hide game over screen
+                gameOverScreen.classList.remove('show');
+                // Reset drop time and start game loop
+                dropStart = Date.now();
+                gameLoop();
+            }
+            // Pause/unpause the game
+            function togglePause() {
+                if (gameOver) return;
+                isPaused = !isPaused;
+                if (!isPaused) {
+                    dropStart = Date.now(); // Reset drop timer
+                    gameLoop();
+                }
+            }
+            // Initialize the game
+            function init() {
+                initBoard();
+                initNextPieceDisplay();
+                // Initialize first pieces
+                currentPiece = getRandomPiece();
+                nextPiece = getRandomPiece();
+                currentPosition = { x: Math.floor(COLS / 2) - Math.floor(currentPiece.shape[0].length / 2), y: 0 };
+                updateNextPieceDisplay();
+                drawPiece(currentPosition.x, currentPosition.y, currentPiece);
+                drawGhostPiece();
+                // Keyboard controls
+                document.addEventListener('keydown', event => {
+                    if (event.key === 'ArrowLeft') {
+                        movePiece(-1);
+                    } else if (event.key === 'ArrowRight') {
+                        movePiece(1);
+                    } else if (event.key === 'ArrowDown') {
+                        moveDown();
+                    } else if (event.key === 'ArrowUp') {
+                        rotatePiece();
+                    } else if (event.key === ' ') {
+                        hardDrop();
+                    } else if (event.key === 'p' || event.key === 'P') {
+                        togglePause();
+                    }
+                    // Prevent default for arrow keys and space to avoid scrolling
+                    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', ' '].includes(event.key)) {
+                        event.preventDefault();
+                    }
+                });
+                restartBtn.addEventListener('click', resetGame);
+                // Start game loop
+                dropStart = Date.now();
+                gameLoop();
+            }
+            init();
+        });
+    </script>
+</body>
+</html>