俄罗斯方块网业游戏代码

胡李祎222222 · 发表于 2026-1-6 09:45:02

俄罗斯方块网业游戏代码

kaia · 发表于 2026-1-6 09:45:24

你好呀！你想做一个俄罗斯方块网页游戏，太棒了！我来帮你写一个简单的示范代码，让你能在网页上玩俄罗斯方块。我们会用 HTML + CSS + JavaScript 来做哦。

### 1. HTML — 网页结构

先做个画布（canvas），这是俄罗斯方块游戏显示的地方：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>简单俄罗斯方块</title>
<style>
/* 设置画布边框和背景 */
#tetris {
border: 2px solid black;
background: #f0f0f0;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="tetris" width="240" height="400"></canvas>
<script>
// JavaScript 代码会放这里
</script>
</body>
</html>

复制代码

### 2. JavaScript — 让它动起来！

以下代码会让俄罗斯方块动起来：

const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');
context.scale(20, 20); // 放大网格，方便绘制
// 创建游戏区域（20行 × 12列）
const arenaWidth = 12;
const arenaHeight = 20;
const arena = createMatrix(arenaWidth, arenaHeight);
// 不同形状的俄罗斯方块（以4x4矩阵表示）
const pieces = {
'T': [
[0, 0, 0],
[1, 1, 1],
[0, 1, 0],
],
'O': [
[2, 2],
[2, 2],
],
'L': [
[0, 3, 0],
[0, 3, 0],
[0, 3, 3],
],
'J': [
[0, 4, 0],
[0, 4, 0],
[4, 4, 0],
],
'I': [
[0, 5, 0, 0],
[0, 5, 0, 0],
[0, 5, 0, 0],
[0, 5, 0, 0],
],
'S': [
[0, 6, 6],
[6, 6, 0],
[0, 0, 0],
],
'Z': [
[7, 7, 0],
[0, 7, 7],
[0, 0, 0],
],
};
// 颜色对应数字
const colors = [
null,
'purple',
'yellow',
'orange',
'blue',
'cyan',
'green',
'red',
];
// 生成空矩阵
function createMatrix(w, h) {
const matrix = [];
while (h--) {
matrix.push(new Array(w).fill(0));
}
return matrix;
}
// 合并落下的方块到 arena
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 collide(arena, player) {
const m = player.matrix;
const o = 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 sweep() {
let rowCount = 1;
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;
// 这里可以增加得分逻辑
}
}
// 旋转方块
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();
}
}
// 玩家对象，存放当前方块信息
const player = {
pos: { x: 0, y: 0 },
matrix: null,
};
// 生成随机方块
function createPiece(type) {
return pieces[type];
}
function playerReset() {
const types = 'TJLOSZI';
player.matrix = createPiece(types[(types.length * Math.random()) | 0]);
player.pos.y = 0;
player.pos.x = ((arenaWidth / 2) | 0) - ((player.matrix[0].length / 2) | 0);
if (collide(arena, player)) {
// 游戏结束，重置
arena.forEach(row => row.fill(0));
}
}
// 移动玩家方块
function playerMove(dir) {
player.pos.x += dir;
if (collide(arena, player)) {
player.pos.x -= dir;
}
}
// 玩家方块下落一格
function playerDrop() {
player.pos.y++;
if (collide(arena, player)) {
player.pos.y--;
merge(arena, player);
playerReset();
sweep();
}
dropCounter = 0;
}
// 玩家旋转
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 drawMatrix(matrix, offset) {
matrix.forEach((row, y) => {
row.forEach((value, x) => {
if (value !== 0) {
context.fillStyle = colors[value];
context.fillRect(x + offset.x, y + offset.y, 1, 1);
context.strokeRect(x + offset.x, y + offset.y, 1, 1);
}
});
});
}
// 绘制所有内容
function draw() {
context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.height);
drawMatrix(arena, { x: 0, y: 0 });
drawMatrix(player.matrix, player.pos);
}
// 控制下落速度
let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;
// 游戏循环
function update(time = 0) {
const deltaTime = time - lastTime;
lastTime = time;
dropCounter += deltaTime;
if (dropCounter > dropInterval) {
playerDrop();
}
draw();
requestAnimationFrame(update);
}
// 监听键盘操作
document.addEventListener('keydown', event => {
if (event.key === 'ArrowLeft') {
playerMove(-1);
} else if (event.key === 'ArrowRight') {
playerMove(1);
} else if (event.key === 'ArrowDown') {
playerDrop();
} else if (event.key === 'ArrowUp') {
playerRotate(1);
}
});
// 开始游戏
playerReset();
update();

复制代码

---

### 讲解一下：

- 画布(canvas)就像是我们的游戏屏幕。
- 俄罗斯方块都是小方块组成的图案，我们用二维数组来表示它们。
- 游戏规则里最重要的是检测碰撞，比如小方块是否挨到其他方块或者地面。
- 用JavaScript的动画循环（requestAnimationFrame）让方块自动往下掉。
- 用键盘箭头键控制左右移动、下落和旋转。

如果你想试试，只要把上面的代码复制保存成一个 `.html` 文件，用浏览器打开就能玩啦！如果想添加分数或者难度，你可以告诉我，我可以帮你改进噢~

你觉得这样讲清楚吗？还有什么想知道的，随时问我！????