tetris

Running

File size: 27,183 Bytes

c9ee90d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Tetris Game</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Custom styles that can't be done with Tailwind */
        .cell {
            box-sizing: border-box;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .cell-filled {
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
        }
        
        @keyframes flash {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        .flash-animation {
            animation: flash 0.3s 2;
        }
        
        /* Tetromino colors */
        .cell-I { background-color: #00FFFF; }
        .cell-O { background-color: #FFFF00; }
        .cell-T { background-color: #AA00FF; }
        .cell-S { background-color: #00FF00; }
        .cell-Z { background-color: #FF0000; }
        .cell-J { background-color: #0000FF; }
        .cell-L { background-color: #FFAA00; }
    </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 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600 mb-2">Tetris</h1>
        <div class="flex justify-center gap-8">
            <div class="text-xl">
                <span class="text-gray-300">Score:</span>
                <span id="score" class="font-bold ml-2">0</span>
            </div>
            <div class="text-xl">
                <span class="text-gray-300">Level:</span>
                <span id="level" class="font-bold ml-2">1</span>
            </div>
            <div class="text-xl">
                <span class="text-gray-300">Lines:</span>
                <span id="lines" class="font-bold ml-2">0</span>
            </div>
        </div>
    </div>

    <div class="flex flex-col md:flex-row items-center gap-8">
        <div class="relative">
            <div id="game-board" class="grid grid-cols-10 grid-rows-20 gap-0 bg-gray-800 border-2 border-gray-700 rounded-md overflow-hidden"></div>
            <div id="game-over" class="absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center hidden">
                <h2 class="text-3xl font-bold text-red-500 mb-4">Game Over!</h2>
                <button id="restart-btn" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-md font-bold transition">Play Again</button>
            </div>
            <div id="pause-screen" class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden">
                <h2 class="text-3xl font-bold text-yellow-400">Paused</h2>
            </div>
        </div>

        <div class="flex flex-col gap-6">
            <div class="bg-gray-800 p-4 rounded-md border border-gray-700">
                <h3 class="text-xl font-semibold mb-2 text-center">Next Piece</h3>
                <div id="next-piece" class="grid grid-cols-4 grid-rows-4 gap-0 w-24 h-24 mx-auto"></div>
            </div>
            
            <div class="bg-gray-800 p-4 rounded-md border border-gray-700">
                <h3 class="text-xl font-semibold mb-2 text-center">Controls</h3>
                <div class="grid grid-cols-3 gap-2 text-center">
                    <div class="bg-gray-700 p-2 rounded">← Left</div>
                    <div class="bg-gray-700 p-2 rounded">→ Right</div>
                    <div class="bg-gray-700 p-2 rounded">↑ Rotate</div>
                    <div class="bg-gray-700 p-2 rounded">↓ Soft Drop</div>
                    <div class="bg-gray-700 p-2 rounded">Space Hard Drop</div>
                    <div class="bg-gray-700 p-2 rounded">P Pause</div>
                </div>
            </div>
            
            <button id="pause-btn" class="px-4 py-2 bg-yellow-600 hover:bg-yellow-700 rounded-md font-bold transition">Pause</button>
        </div>
    </div>

    <div class="mt-8 text-gray-400 text-sm">
        <p>Use keyboard or touch controls to play. Clear lines to score points!</p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Game constants
            const COLS = 10;
            const ROWS = 20;
            const BLOCK_SIZE = 30;
            const NEXT_PIECE_SIZE = 4;
            
            // Game variables
            let board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
            let currentPiece = null;
            let nextPiece = null;
            let score = 0;
            let level = 1;
            let lines = 0;
            let gameOver = false;
            let isPaused = false;
            let dropInterval = null;
            let dropSpeed = 1000; // Initial speed (ms)
            
            // 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 gameOverScreen = document.getElementById('game-over');
            const pauseScreen = document.getElementById('pause-screen');
            const restartBtn = document.getElementById('restart-btn');
            const pauseBtn = document.getElementById('pause-btn');
            
            // Tetromino shapes
            const SHAPES = {
                I: [
                    [0, 0, 0, 0],
                    [1, 1, 1, 1],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0]
                ],
                O: [
                    [1, 1],
                    [1, 1]
                ],
                T: [
                    [0, 1, 0],
                    [1, 1, 1],
                    [0, 0, 0]
                ],
                S: [
                    [0, 1, 1],
                    [1, 1, 0],
                    [0, 0, 0]
                ],
                Z: [
                    [1, 1, 0],
                    [0, 1, 1],
                    [0, 0, 0]
                ],
                J: [
                    [1, 0, 0],
                    [1, 1, 1],
                    [0, 0, 0]
                ],
                L: [
                    [0, 0, 1],
                    [1, 1, 1],
                    [0, 0, 0]
                ]
            };
            
            const COLORS = {
                I: 'cell-I',
                O: 'cell-O',
                T: 'cell-T',
                S: 'cell-S',
                Z: 'cell-Z',
                J: 'cell-J',
                L: 'cell-L'
            };
            
            // Initialize the game board
            function initBoard() {
                gameBoard.innerHTML = '';
                gameBoard.style.width = `${COLS * BLOCK_SIZE}px`;
                gameBoard.style.height = `${ROWS * BLOCK_SIZE}px`;
                
                for (let row = 0; row < ROWS; row++) {
                    for (let col = 0; col < COLS; col++) {
                        const cell = document.createElement('div');
                        cell.className = 'cell w-full h-full';
                        cell.dataset.row = row;
                        cell.dataset.col = col;
                        gameBoard.appendChild(cell);
                    }
                }
            }
            
            // Initialize the next piece display
            function initNextPieceDisplay() {
                nextPieceDisplay.innerHTML = '';
                nextPieceDisplay.style.width = `${NEXT_PIECE_SIZE * BLOCK_SIZE}px`;
                nextPieceDisplay.style.height = `${NEXT_PIECE_SIZE * BLOCK_SIZE}px`;
                
                for (let row = 0; row < NEXT_PIECE_SIZE; row++) {
                    for (let col = 0; col < NEXT_PIECE_SIZE; col++) {
                        const cell = document.createElement('div');
                        cell.className = 'cell w-full h-full';
                        cell.dataset.row = row;
                        cell.dataset.col = col;
                        nextPieceDisplay.appendChild(cell);
                    }
                }
            }
            
            // Create a new random piece
            function createPiece() {
                const types = Object.keys(SHAPES);
                const type = types[Math.floor(Math.random() * types.length)];
                const shape = SHAPES[type];
                
                // For O piece (2x2), adjust starting position
                const startCol = type === 'O' ? Math.floor(COLS / 2) - 1 : Math.floor(COLS / 2) - 2;
                
                return {
                    shape,
                    type,
                    color: COLORS[type],
                    x: startCol,
                    y: 0
                };
            }
            
            // Draw the current piece on the board
            function drawPiece() {
                if (!currentPiece) return;
                
                for (let row = 0; row < currentPiece.shape.length; row++) {
                    for (let col = 0; col < currentPiece.shape[row].length; col++) {
                        if (currentPiece.shape[row][col]) {
                            const boardRow = currentPiece.y + row;
                            const boardCol = currentPiece.x + col;
                            
                            if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
                                const cellIndex = boardRow * COLS + boardCol;
                                const cell = gameBoard.children[cellIndex];
                                cell.className = `cell cell-filled ${currentPiece.color}`;
                            }
                        }
                    }
                }
            }
            
            // Draw the next piece in the preview
            function drawNextPiece() {
                if (!nextPiece) return;
                
                // Clear the next piece display
                for (let i = 0; i < nextPieceDisplay.children.length; i++) {
                    nextPieceDisplay.children[i].className = 'cell w-full h-full';
                }
                
                // Center the piece in the 4x4 grid
                const offsetX = Math.floor((NEXT_PIECE_SIZE - nextPiece.shape[0].length) / 2);
                const offsetY = Math.floor((NEXT_PIECE_SIZE - nextPiece.shape.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 displayRow = row + offsetY;
                            const displayCol = col + offsetX;
                            const cellIndex = displayRow * NEXT_PIECE_SIZE + displayCol;
                            const cell = nextPieceDisplay.children[cellIndex];
                            cell.className = `cell cell-filled ${nextPiece.color}`;
                        }
                    }
                }
            }
            
            // Clear the current piece from the board (before moving/rotating)
            function clearPiece() {
                if (!currentPiece) return;
                
                for (let row = 0; row < currentPiece.shape.length; row++) {
                    for (let col = 0; col < currentPiece.shape[row].length; col++) {
                        if (currentPiece.shape[row][col]) {
                            const boardRow = currentPiece.y + row;
                            const boardCol = currentPiece.x + col;
                            
                            if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
                                const cellIndex = boardRow * COLS + boardCol;
                                const cell = gameBoard.children[cellIndex];
                                cell.className = 'cell w-full h-full';
                            }
                        }
                    }
                }
            }
            
            // Check if the current piece can move to the specified position
            function isValidMove(offsetX, offsetY, rotatedShape = null) {
                const shape = rotatedShape || currentPiece.shape;
                
                for (let row = 0; row < shape.length; row++) {
                    for (let col = 0; col < shape[row].length; col++) {
                        if (shape[row][col]) {
                            const newX = currentPiece.x + col + offsetX;
                            const newY = currentPiece.y + row + offsetY;
                            
                            // Check boundaries
                            if (newX < 0 || newX >= COLS || newY >= ROWS) {
                                return false;
                            }
                            
                            // Check collision with existing pieces (only check if moving down)
                            if (newY >= 0 && board[newY][newX] && offsetY >= 0) {
                                return false;
                            }
                        }
                    }
                }
                
                return true;
            }
            
            // Rotate the current piece
            function rotatePiece() {
                if (!currentPiece) return;
                
                // Create a rotated version of the shape
                const rotated = [];
                for (let col = 0; col < currentPiece.shape[0].length; col++) {
                    const newRow = [];
                    for (let row = currentPiece.shape.length - 1; row >= 0; row--) {
                        newRow.push(currentPiece.shape[row][col]);
                    }
                    rotated.push(newRow);
                }
                
                // Check if the rotation is valid
                if (isValidMove(0, 0, rotated)) {
                    clearPiece();
                    currentPiece.shape = rotated;
                    drawPiece();
                } else {
                    // Try wall kicks (adjust position if rotation would cause collision)
                    const kicks = [-1, 1, -2, 2];
                    for (const kick of kicks) {
                        if (isValidMove(kick, 0, rotated)) {
                            clearPiece();
                            currentPiece.shape = rotated;
                            currentPiece.x += kick;
                            drawPiece();
                            break;
                        }
                    }
                }
            }
            
            // Move the current piece left
            function moveLeft() {
                if (!currentPiece || gameOver || isPaused) return;
                
                if (isValidMove(-1, 0)) {
                    clearPiece();
                    currentPiece.x--;
                    drawPiece();
                }
            }
            
            // Move the current piece right
            function moveRight() {
                if (!currentPiece || gameOver || isPaused) return;
                
                if (isValidMove(1, 0)) {
                    clearPiece();
                    currentPiece.x++;
                    drawPiece();
                }
            }
            
            // Move the current piece down (soft drop)
            function moveDown() {
                if (!currentPiece || gameOver || isPaused) return;
                
                if (isValidMove(0, 1)) {
                    clearPiece();
                    currentPiece.y++;
                    drawPiece();
                    return true;
                } else {
                    lockPiece();
                    return false;
                }
            }
            
            // Hard drop - move piece all the way down immediately
            function hardDrop() {
                if (!currentPiece || gameOver || isPaused) return;
                
                while (moveDown()) {
                    // Keep moving down until it can't anymore
                }
            }
            
            // Lock the current piece in place and check for completed lines
            function lockPiece() {
                if (!currentPiece) return;
                
                // Add piece to the board
                for (let row = 0; row < currentPiece.shape.length; row++) {
                    for (let col = 0; col < currentPiece.shape[row].length; col++) {
                        if (currentPiece.shape[row][col]) {
                            const boardRow = currentPiece.y + row;
                            const boardCol = currentPiece.x + col;
                            
                            if (boardRow >= 0 && boardRow < ROWS && boardCol >= 0 && boardCol < COLS) {
                                board[boardRow][boardCol] = currentPiece.color;
                            }
                        }
                    }
                }
                
                // Check for completed lines
                checkLines();
                
                // Get next piece
                currentPiece = nextPiece;
                nextPiece = createPiece();
                drawNextPiece();
                
                // Check if game over (new piece can't be placed)
                if (!isValidMove(0, 0)) {
                    gameOver = true;
                    clearInterval(dropInterval);
                    gameOverScreen.classList.remove('hidden');
                }
            }
            
            // Check for completed lines and clear them
            function checkLines() {
                let linesCleared = 0;
                
                for (let row = ROWS - 1; row >= 0; row--) {
                    if (board[row].every(cell => cell !== 0)) {
                        // Line is complete
                        linesCleared++;
                        
                        // Flash animation for cleared lines
                        for (let col = 0; col < COLS; col++) {
                            const cellIndex = row * COLS + col;
                            const cell = gameBoard.children[cellIndex];
                            cell.classList.add('flash-animation');
                        }
                        
                        // Remove the line after animation
                        setTimeout(() => {
                            // Shift all rows above down
                            for (let r = row; r > 0; r--) {
                                board[r] = [...board[r - 1]];
                            }
                            board[0] = Array(COLS).fill(0);
                            
                            // Redraw the entire board
                            redrawBoard();
                        }, 300);
                    }
                }
                
                if (linesCleared > 0) {
                    // Update score based on lines cleared
                    const points = [0, 40, 100, 300, 1200]; // Points for 0, 1, 2, 3, 4 lines
                    score += points[linesCleared] * level;
                    lines += linesCleared;
                    
                    // Every 10 lines increases the level
                    level = Math.floor(lines / 10) + 1;
                    
                    // Increase speed with level (capped at 100ms)
                    dropSpeed = Math.max(100, 1000 - (level - 1) * 100);
                    
                    // Update displays
                    updateDisplays();
                    
                    // Restart the drop interval with new speed
                    clearInterval(dropInterval);
                    dropInterval = setInterval(moveDown, dropSpeed);
                }
            }
            
            // Redraw the entire board (after line clears)
            function redrawBoard() {
                for (let row = 0; row < ROWS; row++) {
                    for (let col = 0; col < COLS; col++) {
                        const cellIndex = row * COLS + col;
                        const cell = gameBoard.children[cellIndex];
                        
                        // Remove animation class if present
                        cell.classList.remove('flash-animation');
                        
                        if (board[row][col]) {
                            cell.className = `cell cell-filled ${board[row][col]}`;
                        } else {
                            cell.className = 'cell w-full h-full';
                        }
                    }
                }
            }
            
            // Update score, level, and lines displays
            function updateDisplays() {
                scoreDisplay.textContent = score;
                levelDisplay.textContent = level;
                linesDisplay.textContent = lines;
            }
            
            // Start the game
            function startGame() {
                // Reset game state
                board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
                score = 0;
                level = 1;
                lines = 0;
                gameOver = false;
                dropSpeed = 1000;
                
                // Create pieces
                currentPiece = createPiece();
                nextPiece = createPiece();
                
                // Update displays
                updateDisplays();
                
                // Draw initial state
                redrawBoard();
                drawPiece();
                drawNextPiece();
                
                // Hide game over screen
                gameOverScreen.classList.add('hidden');
                
                // Start the drop interval
                clearInterval(dropInterval);
                dropInterval = setInterval(moveDown, dropSpeed);
            }
            
            // Toggle pause
            function togglePause() {
                if (gameOver) return;
                
                isPaused = !isPaused;
                
                if (isPaused) {
                    clearInterval(dropInterval);
                    pauseScreen.classList.remove('hidden');
                } else {
                    dropInterval = setInterval(moveDown, dropSpeed);
                    pauseScreen.classList.add('hidden');
                }
            }
            
            // Event listeners
            document.addEventListener('keydown', (e) => {
                if (gameOver && e.key === 'Enter') {
                    startGame();
                    return;
                }
                
                if (isPaused && e.key !== 'p') return;
                
                switch (e.key) {
                    case 'ArrowLeft':
                        moveLeft();
                        break;
                    case 'ArrowRight':
                        moveRight();
                        break;
                    case 'ArrowDown':
                        moveDown();
                        break;
                    case 'ArrowUp':
                        rotatePiece();
                        break;
                    case ' ':
                        hardDrop();
                        break;
                    case 'p':
                    case 'P':
                        togglePause();
                        break;
                }
            });
            
            // Touch controls for mobile
            let touchStartX = 0;
            let touchStartY = 0;
            
            gameBoard.addEventListener('touchstart', (e) => {
                if (gameOver || isPaused) return;
                
                touchStartX = e.touches[0].clientX;
                touchStartY = e.touches[0].clientY;
                e.preventDefault();
            }, { passive: false });
            
            gameBoard.addEventListener('touchmove', (e) => {
                if (gameOver || isPaused) return;
                
                const touchX = e.touches[0].clientX;
                const touchY = e.touches[0].clientY;
                const diffX = touchX - touchStartX;
                const diffY = touchY - touchStartY;
                
                // Horizontal swipe
                if (Math.abs(diffX) > Math.abs(diffY)) {
                    if (diffX > 30) {
                        moveRight();
                        touchStartX = touchX;
                    } else if (diffX < -30) {
                        moveLeft();
                        touchStartX = touchX;
                    }
                }
                
                // Vertical swipe down (soft drop)
                if (diffY > 30) {
                    moveDown();
                    touchStartY = touchY;
                }
                
                e.preventDefault();
            }, { passive: false });
            
            gameBoard.addEventListener('touchend', (e) => {
                if (gameOver || isPaused) return;
                
                const touchEndX = e.changedTouches[0].clientX;
                const touchEndY = e.changedTouches[0].clientY;
                const diffX = touchEndX - touchStartX;
                const diffY = touchEndY - touchStartY;
                
                // Tap (rotate)
                if (Math.abs(diffX) < 10 && Math.abs(diffY) < 10) {
                    rotatePiece();
                }
                
                // Quick swipe up (hard drop)
                if (diffY < -50) {
                    hardDrop();
                }
            });
            
            // Button event listeners
            restartBtn.addEventListener('click', startGame);
            pauseBtn.addEventListener('click', togglePause);
            
            // Initialize the game
            initBoard();
            initNextPieceDisplay();
            startGame();
        });
    </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=bozhong/tetris" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>