俄罗斯方块：方块越落越快，四行连消的那一刻最解压

方块往下掉得越来越急，直到四条线同时闪白消掉，那种「咔哒」一下的解压感，才是 Tetris 真正上头的地方。下面是这次从 0 做出的单文件俄罗斯方块：一个 index.html，即开即玩，分数、等级、下一个方块预览都在同一个画面里。

这个工具做什么

这是浏览器里能直接玩的俄罗斯方块，界面是 dark 玻璃拟态风格，玩法不缩水：

• 7 种方块 + 7-Bag 洗牌：不像纯随机那样可能一直不出长条，每 7 个方块打乱后发一轮，手感更公平。
• 完整操作：← → 左右移动、↑/X 旋转（带墙踢）、↓ 加速下落、空格直落，移动端还有滑动手势和触屏按钮。
• 计分升级：满行消除按 100/300/500/800×等级计分，每 10 行升一级，下落从 620ms 一路加速到 70ms。
• 手感细节：幽灵投影标出落点、消行前闪烁动画、下一个方块预览。
• 游戏状态：开始/暂停/继续/重新开始/游戏结束完整闭环。

为什么值得看

如果只做“方块会往下掉、能消行”，其实十分钟就能写完。俄罗斯方块真正难的地方在第一眼看不到：随机不能太随机，否则连出几个同款方块会让玩家觉得被针对；速度曲线不能线性加，否则前 30 秒太慢、后 30 秒失控。

这两点都要靠明确的状态和公式收住。本文要讲的就是这两个「看不见的控制点」是怎么落到单文件代码里的。

任务描述

在码道 Web 输入框粘贴下面这段需求，回车发送：

开发一个俄罗斯方块网页小游戏：7 种方块随机落下，支持左右移动、旋转、加速下落，满行自动消除并计分，分数越高下落越快；带下一个方块预览、分数和等级显示、暂停/重新开始按钮，界面简洁美观，单个 index.html 即开即玩。完成后打开预览，让我直接看到运行效果。

这轮码道实际做了什么

没有让它在后台“润”一个通用游戏模板，实际动作就是围绕上面那句需求一步步落地：

• 创建单文件 index.html，把界面、状态机、渲染循环、计分和触控全塞进一个文件，无第三方依赖。
• 用 7-Bag 洗牌替代普通 Math.random 抽方块，让发牌更接近“公平随机”。
• 生成后跑了两组自动化验证：Playwright 冒烟测试（开始/移动/旋转/暂停/重开/结束全通过、零控制台报错）和计分加速公式 11 项单测。
• 做完直接在码道 Web 内打开预览，不需要再挂公网域名，我是在内置预览面板里看到的运行效果。

代码亮点

index.html 里最值钱的是三个小函数，都只做了自己该做的那件事。

1. 7-Bag 洗牌：随机但不摆烂

pickNext 维护一个装满 7 个方块编号的袋子，拿空后重新洗牌再发：

function pickNext(){
  if(!bag || bag.length===0){
    bag=[0,1,2,3,4,5,6];
    for(let i=bag.length-1;i>0;i--){ const j=Math.floor(Math.random()*(i+1)); [bag[i],bag[j]]=[bag[j],bag[i]]; }
  }
  return bag.pop();
}

这样同一轮方块不会重复到离谱，长条也不会“千年等一回”。

2. 墙踢：旋转不能把方块卡进墙里

tryRotate 先转出矩阵，再按偏移 [0,-1,1,-2,2] 逐个试，贴边旋转也能找到合法位置：

function tryRotate(){
  if(state!==S.PLAYING||clearing) return;
  const m=rotate(cur.m);
  for(const off of [0,-1,1,-2,2]){
    if(!collides(m,cur.x+off,cur.y)){ cur.m=m; cur.x+=off; return; }
  }
}

3. 速度曲线：不是线性变快

下落间隔用指数函数压缩，620ms 起步，等级越高越接近 70ms 的底线：

function intervalFor(lv){ return Math.max(70, Math.round(620*Math.pow(0.84,lv-1))); }

配合满行计分 [0,100,300,500,800]，一次消四行的爽感和升级正好咬合。

验证与踩坑

这轮生成结果没有直接相信“代码能跑”，码道自己先做了两层验证：

• Playwright 冒烟测试：开始、左右移动、旋转、暂停、重开、游戏结束这几条路径全部通过，控制台零报错。
• 公式单测：计分、加速、升级相关公式 11 项全过，说明 intervalFor 和 [0,100,300,500,800] 这条主线没有手滑。

我自己在预览里也点了一次「开始游戏」，能正常进入游戏画面；04-game.png 就是当时的运行界面截图。

准备环境：进入码道 Web

用 CodeArts 的 WebUI 版演示，浏览器就能用，不需要装软件。开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件），本文用 WebUI 版。

进入 CodeArts：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

进入码道 Web：浏览器打开 https://devcloud.cn-north-4.huaweicloud.com/chat/home；如果拿到带活动参数的活动入口，也可以用该入口直达，选「体验版」登录后就能在对话窗口输入需求。

本地复现

生成物只有一个 index.html，复现没有依赖：

1. 下载 index.html。
2. 双击文件，浏览器会直接打开并显示「开始游戏」界面。
3. 也可以用静态服务跑：python -m http.server 8000，然后访问 http://localhost:8000。

使用码道体会

这轮最明显的一点是：需求里把验收方式说清楚，产出会更贴脸。我在需求末尾写了「完成后打开预览，让我直接看到运行效果」，所以它没有再去折腾公网部署，直接走了内置预览，省下了等待时间。小工具类需求适合这种单文件 + 预览的路径；如果做需要持久化或后端接口的项目，再把部署地址写进需求也不迟。

直接下载试玩

源码已托管到公开 Demo Park 仓库，拿 index.html 就能试玩：

• Demo Park 仓库：https://atomgit.com/deli007/demo_park
• 本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-tetris

总结

单文件 Tetris 的核心不是“会消行”，而是怎么把这个经典游戏里最影响体验的随机和速度曲线做对。7-Bag 洗牌负责公平，墙踢负责操作流畅，intervalFor 负责把速度压在 70ms~620ms 这条不上头的区间里。想继续加料，可以补音效、最高分本地存档，或者做四行连消的特效强化。