用js写俄罗斯方块

俄罗斯方块是一款经典的游戏，以下是用JavaScript实现俄罗斯方块的基础概念、优势、类型、应用场景以及一个简单的示例代码。

基础概念

俄罗斯方块由不同形状的方块组成，玩家需要通过旋转和移动这些方块，使它们在游戏区域中排列整齐并消除行。每个方块由多个小方格组成，常见的方块形状有I、J、L、O、S、T、Z。

优势

简单易学：规则简单，容易上手。
锻炼思维：需要玩家进行空间想象和策略规划。
放松心情：作为一种休闲游戏，有助于缓解压力。

类型

经典模式：标准的俄罗斯方块玩法。
无尽模式：没有明确的关卡，不断累积分数。
限时模式：在规定时间内尽可能多地消除行。

应用场景

网页游戏：可以在浏览器中直接游玩。
移动应用：适配各种移动设备。
教育工具：用于培养逻辑思维和手眼协调能力。

示例代码

以下是一个简单的俄罗斯方块游戏的JavaScript实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tetris</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            background: #000;
        }
    </style>
</head>
<body>
    <canvas id="tetris" width="300" height="600"></canvas>
    <script>
        const canvas = document.getElementById('tetris');
        const ctx = canvas.getContext('2d');
        const blockSize = 30;
        const width = canvas.width / blockSize;
        const height = canvas.height / blockSize;

        let board = Array.from({ length: height }, () => Array(width).fill(0));
        let piece = { shape: [[1, 1, 1, 1]], x: 0, y: 0 };

        function drawPiece(piece) {
            piece.shape.forEach((row, y) => {
                row.forEach((value, x) => {
                    if (value) {
                        ctx.fillStyle = '#fff';
                        ctx.fillRect((piece.x + x) * blockSize, (piece.y + y) * blockSize, blockSize, blockSize);
                    }
                });
            });
        }

        function drawBoard() {
            board.forEach((row, y) => {
                row.forEach((value, x) => {
                    if (value) {
                        ctx.fillStyle = '#fff';
                        ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
                    }
                });
            });
        }

        function collides(piece, board) {
            return piece.shape.some((row, y) => 
                row.some((value, x) => 
                    value && (board[piece.y + y] && board[piece.y + y][piece.x + x])
                )
            );
        }

        function merge(piece, board) {
            piece.shape.forEach((row, y) => {
                row.forEach((value, x) => {
                    if (value) {
                        board[piece.y + y][piece.x + x] = 1;
                    }
                });
            });
        }

        function clearLines() {
            for (let y = height - 1; y >= 0; y--) {
                if (board[y].every(value => value)) {
                    board.splice(y, 1);
                    board.unshift(Array(width).fill(0));
                }
            }
        }

        function update() {
            piece.y++;
            if (collides(piece, board)) {
                merge(piece, board);
                clearLines();
                piece = { shape: [[1, 1, 1, 1]], x: 0, y: 0 };
            }
        }

        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBoard();
            drawPiece(piece);
            update();
            requestAnimationFrame(gameLoop);
        }

        gameLoop();
    </script>
</body>
</html>

解释

HTML部分：创建一个canvas元素用于绘制游戏界面。
CSS部分：设置canvas的样式，使其居中并设置背景色为黑色。
JavaScript部分：
- 初始化游戏板和当前方块。
- drawPiece函数用于绘制当前方块。
- drawBoard函数用于绘制整个游戏板。
- collides函数检查方块是否与游戏板发生碰撞。
- merge函数将方块合并到游戏板上。
- clearLines函数清除满行并更新游戏板。
- update函数更新方块的位置并处理碰撞逻辑。
- gameLoop函数是游戏的主循环，不断重绘游戏界面并更新状态。