零基础入门JavaScript 1000例实战开发--实例2：俄罗斯方块游戏

本文链接：https://blog.youkuaiyun.com/xiaoheshang_123/article/details/145770012

俄罗斯方块游戏代码

HTML 结构

JavaScript 逻辑 (tetris.js)

俄罗斯方块（Tetris）是一款经典的益智游戏，玩家需要操控不同形状的方块，使其在屏幕上排列成完整的行，从而消除这些行并获得分数。以下是一个简单的俄罗斯方块游戏实现，使用HTML5和JavaScript。

俄罗斯方块游戏代码

JavaScript 逻辑 (`tetris.js`)

const canvas = document.getElementById('tetrisCanvas');
const ctx = canvas.getContext('2d');

// Adjust the scale based on the window size
const scale = Math.min(window.innerWidth / canvas.width, window.innerHeight / canvas.height);
ctx.scale(scale, scale);

const arena = createMatrix(12, 20);

const colors = [
    null,
    '#FF0D72',
    '#0DC2FF',
    '#0DFF72',
    '#F538FF',
    '#FF8E0D',
    '#FFE138',
    '#3877FF',
];

const player = {
    pos: { x: 0, y: 0 },
    matrix: null,
    score: 0,
};

function createMatrix(w, h) {
    const matrix = [];
    while (h--) {
        matrix.push(new Array(w).fill(0));
    }
    return matrix;
}

function createPiece(type) {
    if (type === 'T') {
        return [
            [0, 0, 0],
            [1, 1, 1],
            [0, 1, 0],
        ];
    } else if (type === 'O') {
        return [
            [2, 2],
            [2, 2],
        ];
    } else if (type === 'L') {
        return [
            [0, 3, 0],
            [0, 3, 0],
            [0, 3, 3],
        ];
    } else if (type === 'J') {
        return [
            [0, 4, 0],
            [0, 4, 0],
            [4, 4, 0],
        ];
    } else if (type === 'I') {
        return [
            [0, 5, 0, 0],
            [0, 5, 0, 0],
            [0, 5, 0, 0],
            [0, 5, 0, 0],
        ];
    } else if (type === 'S') {
        return [
            [0, 6, 6],
            [6, 6, 0],
            [0, 0, 0],
        ];
    } else if (type === 'Z') {
        return [
            [7, 7, 0],
            [0, 7, 7],
            [0, 0, 0],
        ];
    }
}

function drawMatrix(matrix, offset) {
    matrix.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) {
                ctx.fillStyle = colors[value];
                ctx.fillRect(x + offset.x, y + offset.y, 1, 1);
            }
        });
    });
}

function draw() {
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, canvas.width / scale, canvas.height / scale);

    drawMatrix(arena, { x: 0, y: 0 });
    drawMatrix(player.matrix, player.pos);
}

function merge(arena, player) {
    player.matrix.forEach((row, y) => {
        row.forEach((value, x) => {
            if (value !== 0) {
                arena[y + player.pos.y][x + player.pos.x] = value;
            }
        });
    });
}

function rotate(matrix, dir) {
    for (let y = 0; y < matrix.length; ++y) {
        for (let x = 0; x < y; ++x) {
            [
                matrix[x][y],
                matrix[y][x],
            ] = [
                matrix[y][x],
                matrix[x][y],
            ];
        }
    }

    if (dir > 0) {
        matrix.forEach(row => row.reverse());
    } else {
        matrix.reverse();
    }
}

function playerDrop() {
    player.pos.y++;
    if (collide(arena, player)) {
        player.pos.y--;
        merge(arena, player);
        playerReset();
        arenaSweep();
        updateScore();
    }
    dropCounter = 0;
}

function playerMove(dir) {
    player.pos.x += dir;
    if (collide(arena, player)) {
        player.pos.x -= dir;
    }
}

function playerReset() {
    const pieces = 'TJLOSZI';
    player.matrix = createPiece(pieces[(pieces.length * Math.random()) | 0]);
    player.pos.y = 0;
    player.pos.x = (arena[0].length / 2 | 0) -
                   (player.matrix[0].length / 2 | 0);
    if (collide(arena, player)) {
        arena.forEach(row => row.fill(0));
        player.score = 0;
        updateScore();
    }
}

function playerRotate(dir) {
    const pos = player.pos.x;
    let offset = 1;
    rotate(player.matrix, dir);
    while (collide(arena, player)) {
        player.pos.x += offset;
        offset = -(offset + (offset > 0 ? 1 : -1));
        if (offset > player.matrix[0].length) {
            rotate(player.matrix, -dir);
            player.pos.x = pos;
            return;
        }
    }
}

function collide(arena, player) {
    const [m, o] = [player.matrix, player.pos];
    for (let y = 0; y < m.length; ++y) {
        for (let x = 0; x < m[y].length; ++x) {
            if (m[y][x] !== 0 &&
               (arena[y + o.y] &&
                arena[y + o.y][x + o.x]) !== 0) {
                return true;
            }
        }
    }
    return false;
}

function arenaSweep() {
    outer: for (let y = arena.length - 1; y > 0; --y) {
        for (let x = 0; x < arena[y].length; ++x) {
            if (arena[y][x] === 0) {
                continue outer;
            }
        }

        const row = arena.splice(y, 1)[0].fill(0);
        arena.unshift(row);
        ++y;

        player.score += 10;
    }
}

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

let dropCounter = 0;
let dropInterval = 1000;
let isPaused = false;

let lastTime = 0;
function update(time = 0) {
    if (isPaused) return;

    const deltaTime = time - lastTime;
    lastTime = time;

    dropCounter += deltaTime;
    if (dropCounter > dropInterval) {
        playerDrop();
    }

    draw();
    requestAnimationFrame(update);
}

document.addEventListener('keydown', event => {
    if (event.keyCode === 37) {
        playerMove(-1);
    } else if (event.keyCode === 39) {
        playerMove(1);
    } else if (event.keyCode === 40) {
        playerDrop();
    } else if (event.keyCode === 81) {
        playerRotate(-1);
    } else if (event.keyCode === 87) {
        playerRotate(1);
    }
});

const pauseButton = document.getElementById('pauseButton');
const stopButton = document.getElementById('stopButton');

pauseButton.addEventListener('click', () => {
    isPaused = !isPaused;
    pauseButton.textContent = isPaused ? '继续游戏' : '暂停游戏';
});

stopButton.addEventListener('click', () => {
    isPaused = true;
    arena.forEach(row => row.fill(0));
    player.score = 0;
    updateScore();
    playerReset();
});

playerReset();
updateScore();
update();

教你写经典小游戏：俄罗斯方块

简介

俄罗斯方块是一款经典的益智游戏，玩家需要操控不同形状的方块，使其在屏幕上排列成完整的行，从而消除这些行并获得分数。本教程将带你一步步实现这个经典游戏，使用HTML5和JavaScript来创建一个可以在网页上运行的俄罗斯方块游戏。

准备工作

在开始编写代码之前，确保你已经准备好以下工具：

一个代码编辑器（如Visual Studio Code、Sublime Text等）。
一个现代浏览器（如Google Chrome、Mozilla Firefox等）。

步骤一：创建HTML结构

首先，我们需要创建一个基本的HTML结构，用于显示游戏画布和控制按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块游戏</title>
    <style>
        body {
            background-color: #fff;
            color: #000;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            height: 100vh;
        }
        canvas {
            background-color: #fff;
            border: 2px solid #000;
            max-width: 100%;
            max-height: 100%;
        }
        .controls {
            margin-top: 20px;
        }
        .instructions {
            margin-top: 20px;
            font-size: 18px;
            text-align: center;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="300" height="600"></canvas>
    <div class="controls">
        <button id="pauseButton">暂停游戏</button>
        <button id="stopButton">结束游戏</button>
    </div>
    <div class="instructions">
        <p>使用箭头键控制方块的移动。</p>
        <p>使用 <strong>Q</strong> 和 <strong>W</strong> 键旋转方块。</p>
        <p>消除完整的行以获得分数。</p>
        <p>避免方块堆积到顶部。</p>
    </div>
    <script src="tetris.js"></script>
</body>
</html>