用html、css和JavaScript实现的俄罗斯方块小游戏

风格654

已于 2025-02-05 13:49:46 修改

阅读量654

点赞数 13

文章标签： html css javascript

于 2025-02-05 11:40:34 首次发布

本文链接：https://blog.csdn.net/qq_64227634/article/details/145452386

版权

使用html、css和JavaScript实现的俄罗斯方块小游戏，复制代码到html文件里即可使用

<!DOCTYPE html>
<html>
<head>
    <title>俄罗斯方块</title>
    <style>
        canvas {
            border: 2px solid #333;
        }
        body {
            display: flex;
            justify-content: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        #game-container {
            margin-top: 50px;
            text-align: center;
        }
        #score {
            font-size: 24px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="score">得分：0</div>
        <canvas id="game" width="300" height="600"></canvas>
    </div>

    <script>
        const canvas = document.getElementById('game');
        const ctx = canvas.getContext('2d');
        const BLOCK_SIZE = 30;
        const COLS = 10;
        const ROWS = 20;
        let score = 0;

        // 方块形状
        const SHAPES = [
            [[1, 1, 1, 1]], // I
            [[1, 1], [1, 1]], // O
            [[1, 1, 1], [0, 1, 0]], // T
            [[1, 1, 1], [1, 0, 0]], // L
            [[1, 1, 1], [0, 0, 1]], // J
            [[1, 1, 0], [0, 1, 1]], // S
            [[0, 1, 1], [1, 1, 0]]  // Z
        ];

        // 颜色
        const COLORS = [
            '#00f0f0', // cyan
            '#f0f000', // yellow
            '#a000f0', // purple
            '#f0a000', // orange
            '#0000f0', // blue
            '#00f000', // green
            '#f00000'  // red
        ];

        let board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
        let currentPiece = null;
        let currentPieceX = 0;
        let currentPieceY = 0;

        // 创建新方块
        function createPiece() {
            const index = Math.floor(Math.random() * SHAPES.length);
            return {
                shape: SHAPES[index],
                color: COLORS[index]
            };
        }

        // 绘制方块
        function drawBlock(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE - 1, BLOCK_SIZE - 1);
        }

        // 绘制游戏区域
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制当前方块
            currentPiece.shape.forEach((row, y) => {
                row.forEach((value, x) => {
                    if (value) {
                        drawBlock(currentPieceX + x, currentPieceY + y, currentPiece.color);
                    }
                });
            });

            // 绘制已固定的方块
            board.forEach((row, y) => {
                row.forEach((value, x) => {
                    if (value) {
                        drawBlock(x, y, value);
                    }
                });
            });
        }

        // 碰撞检测
        function collision() {
            return currentPiece.shape.some((row, dy) => {
                return row.some((value, dx) => {
                    if (!value) return false;
                    const newX = currentPieceX + dx;
                    const newY = currentPieceY + dy;
                    return newX < 0 || newX >= COLS || newY >= ROWS || board[newY]?.[newX];
                });
            });
        }

        // 固定方块
        function freeze() {
            currentPiece.shape.forEach((row, y) => {
                row.forEach((value, x) => {
                    if (value) {
                        board[currentPieceY + y][currentPieceX + x] = currentPiece.color;
                    }
                });
            });

            // 消除满行
            for (let y = ROWS - 1; y >= 0; y--) {
                if (board[y].every(cell => cell)) {
                    board.splice(y, 1);
                    board.unshift(Array(COLS).fill(0));
                    score += 100;
                    document.getElementById('score').textContent = `得分：${score}`;
                }
            }
        }

        // 游戏循环
        function gameLoop() {
            currentPieceY++;
            if (collision()) {
                currentPieceY--;
                freeze();
                currentPiece = createPiece();
                currentPieceX = Math.floor(COLS / 2) - 1;
                currentPieceY = 0;
                if (collision()) {
                    alert(`游戏结束！得分：${score}`);
                    board = Array(ROWS).fill().map(() => Array(COLS).fill(0));
                    score = 0;
                    document.getElementById('score').textContent = `得分：${score}`;
                }
            }
            draw();
        }

        // 旋转方块
        function rotate() {
            const rotated = currentPiece.shape[0].map((_, i) =>
                currentPiece.shape.map(row => row[i]).reverse()
            );
            const previousShape = currentPiece.shape;
            currentPiece.shape = rotated;
            if (collision()) {
                currentPiece.shape = previousShape;
            }
        }

        // 控制事件
        document.addEventListener('keydown', event => {
            switch (event.keyCode) {
                case 37: // 左
                    currentPieceX--;
                    if (collision()) currentPieceX++;
                    break;
                case 39: // 右
                    currentPieceX++;
                    if (collision()) currentPieceX--;
                    break;
                case 40: // 下
                    currentPieceY++;
                    if (collision()) currentPieceY--;
                    break;
                case 38: // 上（旋转）
                    rotate();
                    break;
            }
            draw();
        });

        // 初始化游戏
        currentPiece = createPiece();
        currentPieceX = Math.floor(COLS / 2) - 1;
        setInterval(gameLoop, 1000);
    </script>
</body>
</html>