Spaces:

openfree
/

Tetris-Game

Running

File size: 11,333 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris Game by MOUSE(VIDraft-mouse1.hf.space)</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #1a1a1a;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .title {
            color: #00f0f0;
            font-size: 2.5rem;
            margin-bottom: 2rem;
            text-align: center;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
        }

        .game-container {
            display: flex;
            gap: 20px;
        }

        #game-board {
            border: 2px solid #333;
            background: #000;
        }

        .side-panel {
            display: flex;
            flex-direction: column;
            gap: 20px;
            color: white;
        }

        .next-piece {
            width: 150px;
            height: 150px;
            border: 2px solid #333;
            background: #000;
        }

        .score-board {
            padding: 10px;
            background: #333;
            border-radius: 5px;
        }

        .controls {
            background: #333;
            padding: 10px;
            border-radius: 5px;
        }

        .controls p {
            margin: 5px 0;
            font-size: 14px;
        }

        .title strong {
            color: #f0a000;
        }
    </style>
</head>
<body>
    <h1 class="title">Tetris Game <strong>by MOUSE(VIDraft-mouse1.hf.space)</strong></h1>
    <div class="game-container">
        <canvas id="game-board" width="300" height="600"></canvas>
        <div class="side-panel">
            <div class="next-piece">
                <canvas id="next-piece-canvas" width="150" height="150"></canvas>
            </div>
            <div class="score-board">
                <h3>Score: <span id="score">0</span></h3>
                <h3>Lines: <span id="lines">0</span></h3>
                <h3>Level: <span id="level">1</span></h3>
            </div>
            <div class="controls">
                <h3>Controls:</h3>
                <p>← → : Move Left/Right</p>
                <p>↓ : Soft Drop</p>
                <p>Space : Hard Drop</p>
                <p>↑ : Rotate</p>
            </div>
        </div>
    </div>

    <!-- 이하 script 부분은 동일하므로 생략하지 않고 그대로 포함 -->
    <script>
        const canvas = document.getElementById('game-board');
        const ctx = canvas.getContext('2d');
        const nextPieceCanvas = document.getElementById('next-piece-canvas');
        const nextPieceCtx = nextPieceCanvas.getContext('2d');
        
        const BLOCK_SIZE = 30;
        const BOARD_WIDTH = 10;
        const BOARD_HEIGHT = 20;
        
        let board = Array(BOARD_HEIGHT).fill().map(() => Array(BOARD_WIDTH).fill(0));
        let score = 0;
        let lines = 0;
        let level = 1;
        let gameLoop;
        let currentPiece;
        let nextPiece;
        
        const SHAPES = [
            [[1, 1, 1, 1]], // I
            [[1, 1], [1, 1]], // O
            [[0, 1, 1], [1, 1, 0]], // S
            [[1, 1, 0], [0, 1, 1]], // Z
            [[1, 0, 0], [1, 1, 1]], // L
            [[0, 0, 1], [1, 1, 1]], // J
            [[0, 1, 0], [1, 1, 1]] // T
        ];
        
        const COLORS = [
            '#00f0f0', // cyan
            '#f0f000', // yellow
            '#00f000', // green
            '#f00000', // red
            '#f0a000', // orange
            '#0000f0', // blue
            '#a000f0'  // purple
        ];
        
        class Piece {
            constructor(shape = null) {
                this.shape = shape || SHAPES[Math.floor(Math.random() * SHAPES.length)];
                this.color = COLORS[SHAPES.findIndex(s => s === this.shape)];
                this.x = Math.floor((BOARD_WIDTH - this.shape[0].length) / 2);
                this.y = 0;
            }
        }
        
        function drawBlock(ctx, x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE - 1, BLOCK_SIZE - 1);
        }
        
        function drawBoard() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw board
            for(let y = 0; y < BOARD_HEIGHT; y++) {
                for(let x = 0; x < BOARD_WIDTH; x++) {
                    if(board[y][x]) {
                        drawBlock(ctx, x, y, board[y][x]);
                    }
                }
            }
            
            // Draw current piece
            if(currentPiece) {
                for(let y = 0; y < currentPiece.shape.length; y++) {
                    for(let x = 0; x < currentPiece.shape[y].length; x++) {
                        if(currentPiece.shape[y][x]) {
                            drawBlock(ctx, currentPiece.x + x, currentPiece.y + y, currentPiece.color);
                        }
                    }
                }
            }
        }
        
        function drawNextPiece() {
            nextPieceCtx.clearRect(0, 0, nextPieceCanvas.width, nextPieceCanvas.height);
            
            const offsetX = (nextPieceCanvas.width - nextPiece.shape[0].length * BLOCK_SIZE) / 2;
            const offsetY = (nextPieceCanvas.height - nextPiece.shape.length * BLOCK_SIZE) / 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]) {
                        nextPieceCtx.fillStyle = nextPiece.color;
                        nextPieceCtx.fillRect(
                            offsetX + x * BLOCK_SIZE,
                            offsetY + y * BLOCK_SIZE,
                            BLOCK_SIZE - 1,
                            BLOCK_SIZE - 1
                        );
                    }
                }
            }
        }
        
        function isValidMove(piece, offsetX, offsetY, newShape = null) {
            const shape = newShape || piece.shape;
            
            for(let y = 0; y < shape.length; y++) {
                for(let x = 0; x < shape[y].length; x++) {
                    if(shape[y][x]) {
                        const newX = piece.x + x + offsetX;
                        const newY = piece.y + y + offsetY;
                        
                        if(newX < 0 || newX >= BOARD_WIDTH || newY >= BOARD_HEIGHT) {
                            return false;
                        }
                        
                        if(newY >= 0 && board[newY][newX]) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }
        
        function rotatePiece() {
            const newShape = currentPiece.shape[0].map((_, i) => 
                currentPiece.shape.map(row => row[i]).reverse()
            );
            
            if(isValidMove(currentPiece, 0, 0, newShape)) {
                currentPiece.shape = newShape;
            }
        }
        
        function mergePiece() {
            for(let y = 0; y < currentPiece.shape.length; y++) {
                for(let x = 0; x < currentPiece.shape[y].length; x++) {
                    if(currentPiece.shape[y][x]) {
                        board[currentPiece.y + y][currentPiece.x + x] = currentPiece.color;
                    }
                }
            }
        }
        
        function checkLines() {
            let linesCleared = 0;
            
            for(let y = BOARD_HEIGHT - 1; y >= 0; y--) {
                if(board[y].every(cell => cell !== 0)) {
                    board.splice(y, 1);
                    board.unshift(Array(BOARD_WIDTH).fill(0));
                    linesCleared++;
                    y++;
                }
            }
            
            if(linesCleared > 0) {
                lines += linesCleared;
                score += linesCleared * 100 * level;
                level = Math.floor(lines / 10) + 1;
                
                document.getElementById('score').textContent = score;
                document.getElementById('lines').textContent = lines;
                document.getElementById('level').textContent = level;
            }
        }
        
        function gameOver() {
            clearInterval(gameLoop);
            alert(`Game Over! Score: ${score}`);
            resetGame();
        }
        
        function resetGame() {
            board = Array(BOARD_HEIGHT).fill().map(() => Array(BOARD_WIDTH).fill(0));
            score = 0;
            lines = 0;
            level = 1;
            document.getElementById('score').textContent = score;
            document.getElementById('lines').textContent = lines;
            document.getElementById('level').textContent = level;
            startGame();
        }
        
        function update() {
            if(isValidMove(currentPiece, 0, 1)) {
                currentPiece.y++;
            } else {
                mergePiece();
                checkLines();
                
                currentPiece = nextPiece;
                nextPiece = new Piece();
                drawNextPiece();
                
                if(!isValidMove(currentPiece, 0, 0)) {
                    gameOver();
                }
            }
            drawBoard();
        }
        
        function startGame() {
            currentPiece = new Piece();
            nextPiece = new Piece();
            drawNextPiece();
            
            if(gameLoop) clearInterval(gameLoop);
            gameLoop = setInterval(() => {
                update();
            }, 1000 / level);
        }
        
        document.addEventListener('keydown', (e) => {
            switch(e.keyCode) {
                case 37: // Left
                    if(isValidMove(currentPiece, -1, 0)) {
                        currentPiece.x--;
                        drawBoard();
                    }
                    break;
                    
                case 39: // Right
                    if(isValidMove(currentPiece, 1, 0)) {
                        currentPiece.x++;
                        drawBoard();
                    }
                    break;
                    
                case 40: // Down
                    if(isValidMove(currentPiece, 0, 1)) {
                        currentPiece.y++;
                        drawBoard();
                    }
                    break;
                    
                case 38: // Up (Rotate)
                    rotatePiece();
                    drawBoard();
                    break;
                    
                case 32: // Space (Hard Drop)
                    while(isValidMove(currentPiece, 0, 1)) {
                        currentPiece.y++;
                    }
                    update();
                    break;
            }
        });
        
        startGame();
    </script>
</body>
</html>