教你用代码制作俄罗斯方块

上周邻居家小孩看我玩俄罗斯方块，眼睛亮晶晶地问："这个能自己做吗？"我当场打开笔记本，两个小时后他就能自己改方块颜色了。今天我就把这个魔法教给你，准备好你的代码编辑器，咱们边喝咖啡边做游戏。

一、先搞清楚我们要做什么

想象你在搭积木，我们要做的就是这个电子版。核心就三件事：

• 会动的方块像跳舞的积木
• 结实的底座掉下来的方块要叠整齐
• 消失的魔法铺满一行就清空

1.1 开发环境准备

别被专业工具吓到，咱们就用浏览器自带的玩具：

二、先画个会动的方块

打开新文件block_game.html，先搭个舞台：

2.1 方块怎么出生

给方块办个身份证：

class Block {constructor {this.x = 150;  // 出生在中间this.y = 0;    // 从顶部降落this.shape = [[1, 1],[1, 1]       // 先做个正方形];this.color = 'FF6B6B'; // 珊瑚色

2.2 让方块跳起舞

加上动画魔法：

function gameLoop {ctx.clearRect(0, 0, canvas.width, canvas.height);// 每帧下落2像素currentBlock.y += 2;drawBlock(currentBlock);requestAnimationFrame(gameLoop);// 初始化let canvas = document.getElementById('gameCanvas');let ctx = canvas.getContext('2d');let currentBlock = new Block;gameLoop;

三、给方块装上方向盘

现在按键盘还没反应，咱们来接线：

document.addEventListener('keydown', (e) => {switch(e.key) {case 'ArrowLeft':currentBlock.x -= 10; // 左移break;case 'ArrowRight':currentBlock.x += 10; // 右移break;case 'ArrowDown':currentBlock.y += 10; // 加速下坠break;});

3.1 旋转的奥秘

给方块加上转圈技能：

rotate {const newShape = [];// 矩阵旋转魔法for (let i = 0; i< this.shape.length; i++) {newShape.push([]);for (let j = this.shape.length1; j >= 0; j--) {newShape[i].push(this.shape[j][i]);this.shape = newShape;

四、堆积木要守规矩

加上碰撞检测，别让方块穿墙：

function checkCollision(block) {// 边界检查if (block.x< 0) return true;if (block.x + block.shape.length30 > canvas.width) return true;// 底部检查if (block.y + block.shape.length30 > canvas.height) return true;return false;

4.1 消除行的秘密

当某行被填满时触发消除：

function checkFullLines {for (let row = 0; row< grid.length; row++) {if (grid[row].every(cell => cell !== 0)) {grid.splice(row, 1);      // 删除这行grid.unshift(new Array(10).fill(0)); // 补充新行score += 100;             // 加分！

五、给你的游戏加点料

现在基础功能都有了，来点好玩的：

• 在构造函数里加7种经典方块形状
• 用localStorage保存最高分
• 给不同方块配上马卡龙色系
• 添加"硬降"音效（用Web Audio API）

窗外的天色渐渐暗下来，屏幕上的彩色方块欢快地跳跃着。当你按下F5刷新页面，看着自己亲手创造的游戏世界，那种成就感就像小时候第一次搭成乐高城堡。试试把方块颜色改成你喜欢的配色，或者加个背景音乐——这已经是属于你的独一无二的方块宇宙了。