如何使用js制作俄罗斯方块

如何使用js制作俄罗斯方块

使用JavaScript制作俄罗斯方块需要掌握基础的HTML、CSS和JavaScript，理解游戏逻辑、使用Canvas进行绘图、实现方块移动和旋转、处理碰撞检测、并实现游戏得分和结束机制。下面我们将详细介绍其中的关键步骤。

一、理解游戏逻辑

俄罗斯方块是一款经典的益智游戏，其核心逻辑包括方块的生成、移动、旋转、碰撞检测、行消除、得分计算等。了解这些基本逻辑是制作游戏的第一步。

1. 方块的生成与移动

每一个方块都是由几个小方块组成的，这些小方块可以形成各种形状。方块的生成通常从游戏区域的顶部开始，通过键盘操作可以向左、向右移动，并且向下加速下落。

2. 方块的旋转

方块的旋转是游戏的重要特点之一。通常使用一个二维数组来表示方块的形状，通过矩阵变换可以实现方块的旋转。

3. 碰撞检测

为了确保方块不会穿过其他方块或游戏区域的边界，需要进行碰撞检测。碰撞检测的主要目的是在方块移动或旋转时，检查是否与其他方块或边界发生冲突。

4. 行消除与得分计算

当一行被完全填满时，该行就会被消除，所有上面的方块会下移，同时增加玩家的得分。消除行数越多，得分越高。

5. 游戏结束机制

当新的方块无法生成（即顶部被填满）时，游戏结束。

二、使用Canvas进行绘图

Canvas API允许我们在网页上绘制图形，是制作俄罗斯方块游戏的关键工具。

1. 创建Canvas元素

首先，在HTML中创建一个Canvas元素，并设置其宽度和高度。

<canvas id="tetris" width="300" height="600"></canvas>

2. 获取Canvas上下文

在JavaScript中获取Canvas的2D上下文，使用这个上下文可以进行绘图操作。

const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');

3. 绘制方块

定义一个函数，用来绘制方块。方块的颜色和位置可以通过参数传递。

function drawSquare(x, y, color) {
    context.fillStyle = color;
    context.fillRect(x * 30, y * 30, 30, 30);
    context.strokeStyle = 'black';
    context.strokeRect(x * 30, y * 30, 30, 30);
}

4. 更新游戏画面

通过清除Canvas并重新绘制所有方块来更新游戏画面。

function drawBoard(board) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (let r = 0; r < board.length; r++) {
        for (let c = 0; c < board[r].length; c++) {
            drawSquare(c, r, board[r][c]);
        }
    }
}

三、实现方块移动和旋转

1. 实现方块下落

使用JavaScript的setInterval函数，使方块每隔一段时间向下移动一格。

let dropStart = Date.now();
let gameInterval = setInterval(drop, 1000);
function drop() {
    let now = Date.now();
    let delta = now - dropStart;
    if (delta > 1000) {
        // 逻辑：方块下落一格
        dropStart = Date.now();
    }
}

2. 处理键盘事件

使用键盘事件来控制方块的移动和旋转。

document.addEventListener('keydown', function(event) {
    if (event.keyCode === 37) { // 左箭头
        // 逻辑：方块向左移动
    } else if (event.keyCode === 39) { // 右箭头
        // 逻辑：方块向右移动
    } else if (event.keyCode === 40) { // 下箭头
        // 逻辑：方块加速下落
    } else if (event.keyCode === 38) { // 上箭头
        // 逻辑：方块旋转
    }
});

四、处理碰撞检测

1. 检测边界碰撞

在方块移动或旋转之前，检查是否与游戏区域的边界发生碰撞。

function collision(x, y, piece) {
    for (let r = 0; r < piece.length; r++) {
        for (let c = 0; c < piece[r].length; c++) {
            if (!piece[r][c]) {
                continue;
            }
            let newX = x + c;
            let newY = y + r;
            if (newX < 0 || newX >= board[0].length || newY >= board.length) {
                return true;
            }
            if (newY < 0) {
                continue;
            }
            if (board[newY][newX] !== 'white') {
                return true;
            }
        }
    }
    return false;
}

2. 处理方块固定

当方块无法再向下移动时，将其固定在游戏区域中，并生成新的方块。

function freeze() {
    for (let r = 0; r < activePiece.length; r++) {
        for (let c = 0; c < activePiece[r].length; c++) {
            if (!activePiece[r][c]) {
                continue;
            }
            if (activeY + r < 0) {
                // 游戏结束
                clearInterval(gameInterval);
                alert('Game Over');
                break;
            }
            board[activeY + r][activeX + c] = activePiece[r][c];
        }
    }
    // 生成新的方块
    activePiece = getRandomPiece();
    activeX = 3;
    activeY = -2;
}

五、实现行消除与得分计算

1. 检测并消除完整行

在每次方块固定后，检查是否有完整的行需要消除。

function removeFullRows() {
    for (let r = 0; r < board.length; r++) {
        let isRowFull = true;
        for (let c = 0; c < board[r].length; c++) {
            if (board[r][c] === 'white') {
                isRowFull = false;
                break;
            }
        }
        if (isRowFull) {
            board.splice(r, 1);
            board.unshift(new Array(board[0].length).fill('white'));
            // 增加得分
            score += 10;
        }
    }
}

2. 显示得分

将得分显示在网页中，并在每次更新时刷新显示。

let score = 0;
function updateScore() {
    document.getElementById('score').innerText = score;
}

六、游戏结束机制

1. 检测游戏结束

当新的方块生成位置被占用时，游戏结束。

function gameOver() {
    if (collision(activeX, activeY, activePiece)) {
        clearInterval(gameInterval);
        alert('Game Over');
    }
}

2. 重置游戏

提供一个按钮或其他方式，让玩家可以重新开始游戏。

<button onclick="resetGame()">Restart</button>

function resetGame() {
    board = createBoard();
    activePiece = getRandomPiece();
    activeX = 3;
    activeY = -2;
    score = 0;
    dropStart = Date.now();
    gameInterval = setInterval(drop, 1000);
}

通过以上步骤，我们可以使用JavaScript和Canvas API制作一个基本的俄罗斯方块游戏。当然，实际开发中还需要更多的优化和改进，比如增加不同难度级别、增加音效、优化游戏性能等。