《react-tetris》四十年了，方块还是最上头

一个用 React + Redux 写的俄罗斯方块，Star 好几千（据仓库页面），没有花哨引擎，没有美术素材，整个游戏就是一棵状态树加一个纯函数。作者 chvin 是个个人开发者，README 里写得直白：这就是为了研究 React/Redux 技术栈做的练手项目。结果练手练成了一个标杆——搜索“React 游戏”“Redux 例子”，这个仓库常年排在前面，被无数教程和面试题引用。它证明了一件事：最好的技术示范，不是 TodoMVC，而是一台能玩的上头机器。

仓库档案

一局方块，循环四十年

俄罗斯方块不需要介绍玩法，但你有没有认真拆过它的核心循环？用这个仓库的实现来看，每一秒发生的事情极其干净：

graph TD
    A[新方块从顶部出现] --> B[玩家操作：旋转/平移/软降]
    B --> C[方块落底锁定]
    C --> D{有没有凑满整行}
    D -- 凑满 --> E[消行得分 等级提升]
    D -- 没凑满 --> F[残块堆高 风险上升]
    E --> G[速度加快 压力变大]
    G --> A
    F --> H{堆到顶没有}
    H -- 没有 --> A
    H -- 堆到顶 --> I[游戏结束 结算分数]
    I --> J[不服 最高分就在眼前]
    J --> A

三个反馈同时咬合：你的操作立刻改变局面（落块），系统立刻给奖励或惩罚（消行/堆高），难度立刻跟随进度爬升（提速）。一圈只要几秒钟，而“再来一局”的开关，就是那个明晃晃挂着的最高分。react-tetris 把这个循环原样复刻了：下落、旋转、消行、计分、提速、下一块预览，一个不少，而且手感对——这点后面会说，恰恰是最难的。

为什么这玩意儿能上头四十年

即时反馈密到变态。 每一次按键都有肉眼可见的响应：块动了、转了、掉快了。消行的瞬间整行闪烁消失，得分跳涨。玩家的每个动作都被承认，没有任何输入是白费的——这是所有上头游戏的第一性原理。

随机奖励，但公平。 方块序列是随机的，下一块是什么永远未知，这正是斯金纳箱的胃口。但它给了你“下一块预览”做补偿：命运不透明，但规划空间透明。你永远觉得“这一把我能摆好”，输了的理由永远是“刚才那步错了”，而不是“运气差”。这种归因方式让人停不下来。

风险是看得见的。 堆到多高，画面直接告诉你，一行一行逼近顶部。紧张感不是剧情给的，是空间给的。速度提升之后，决策窗口被压缩，心跳跟着加速——这是最廉价也最有效的难度曲线。

“差一块”强迫症。 I 型长条四个格，攒了半天才能消四行，而它总是在你需要之前出现、在你不需要之后才来。这种“资源错位”制造了大量的“就差一点”时刻，而心理学上，差一点比差很多更让人想再来一把。

单局短，重开零成本。 一局几分钟甚至几十秒，死亡没有惩罚动画，重开一键。整个循环的摩擦力被压到接近零——这也是为什么它是验证“你的改动有没有让游戏更上头”的最佳实验平台：循环短，数据快。

技术拆解：把一台街机塞进 Redux

这个仓库对游戏开发者最值钱的地方，是它演示了一个极简但完整的前端游戏架构，每一块都能直接搬走。

状态即游戏。 整个游戏就是一棵 Redux state 树：一个二维矩阵表示棋盘、当前方块、下一个方块、分数、等级、速度、运行状态。所有“游戏逻辑”就是 reducer 里的纯函数——输入旧状态，输出新状态。掉帧、旋转、消行，全都是状态转移，没有散落在 DOM 里的野逻辑。这个思路可以直接迁移到任何棋盘类、回合类小游戏：写游戏 = 写状态机。

Immutable 保证渲染高效。 棋盘是几百个格子的网格，如果每帧全量重绘会很难看。仓库用 Immutable.js 让状态变化可被快速比较，React 只重绘真正变化的格子。你不用跟着用 Immutable，但“棋盘渲染必须按格子做差量更新”这个原则，是所有网格类游戏的必答题。

存档就是序列化状态树。 据仓库 README，游戏状态持久化在 localStorage：刷新页面能接着上次玩，最高分也在本地。对小游戏来说这是性价比最高的存档方案——不用后端、不用账号体系，JSON.stringify 一把梭。你要做的只是把“哪些状态该存”（进度、最高分）和“哪些不该存”（动画中间态）切干净。

双端操控一次做好。 PC 上监听键盘，移动端给虚拟按键和触控，布局自适应。这是网页小游戏最常见的翻车点：开发者只在桌面调，手机上一坨。这个仓库从第一天就双端适配，可以当模板抄。

手感是细节堆出来的。 据仓库 README，它追求“像素级还原”经典体验，界面用 CSS 绘制像素风格。落块、旋转的手感来自输入响应节奏和动画时序，这些参数藏在代码里，值得逐个调一遍——比任何“游戏设计理论”都具体。

一句话总结可复用资产：状态机写法、格子差量渲染、localStorage 存档、双端操控模板。四件套凑齐，你做任何棋牌、益智、回合制小游戏，地基就有了。

变现观察：方块印钱史，和它划出的红线

方块这个品类，是小游戏变现史上最成功的案例之一。原版俄罗斯方块当年靠掌机捆绑卖爆硬件；移动时代，拿到正版授权的作品长期占据下载榜；超休闲浪潮里，无数方块变体靠广告变现活得很好——插屏、激励视频、-banner，模式全部成熟。这类“零学习成本 + 强循环”的玩法，天然适合买量广告变现的算术。

但要给你划一条红线：俄罗斯方块是所有经典玩法里维权最凶的一个。2012 年美国法院在 Tetris Holding 诉 Xio Interactive 案中，判一款“换皮方块”侵权——法院认定除了方块形状本身，界面的视觉呈现方式也构成受保护的表达。此后几十年，方块商标方一直活跃在维权一线。

这给你的教训比项目本身更值钱：玩法机制本身不受版权保护，但具体的“表达”受。名字、美术、界面构图、关卡排布、音效——这些是雷区。你可以做一个“掉落消除”游戏，但你得换名字、换美术风格、换界面语言。反过来说，react-tetris 这种个人学习项目没有商业化，所以风险可控；你一旦要上商店收广告费，第一件事就是把自己从“复刻”挪到“致敬”。

另外注意这个仓库自己示范了另一条变现路：作品即简历。作者靠一个练手项目在前端社区留下了名字——对个人开发者，“游戏不赚钱但项目带来接单、offer 和影响力”是真实存在的回报，尤其在今天这个卷作品集的环境里。

给我的灵感：三个能动手的方向

方向一：换皮换题材，做成微信小游戏。 保留方块循环，把“凑满整行”换成别的目标——比如“汉字方块”：每块上写偏旁，凑成词即消行，顺手做成语文教育向，家长愿意转发。MVP 工作量 1-2 周，架构照搬本仓库四件套。变现：微信小游戏的激励视频（复活、提示）+ 流量主广告，这条链路在国内已完全跑通。

方向二：加一层 roguelike 钩子。 每消 5 行抽一张“技能卡”：清掉底两行、10 秒慢速、把下一块变成 I、随机砸碎一个格子。卡不叠加，每局只能带一张进场——于是“选哪张卡”成了第二层决策，单局差异拉开，直播效果直接拉满。工作量 +1 周左右。变现：itch.io 付费下载或内置去广告，这类“经典玩法 + 单变量创新”在 itch 上有稳定受众。

方向三：双人竞速对战。 两个玩家各玩各的棋盘，消两行以上就把“垃圾行”压给对方，谁先堆顶谁输——Tetris 99 的核心机制，单人也能先做成好友房。WebSocket + 房间码，工作量 2-3 周。变现：主播互动场景（观众扫码上车），或朋友房内嵌激励视频换道具。对战是小玩法做社交裂变的最短路径。

三个方向的共同前提：先把原版循环做到“手感对”。这也是这个仓库最值得你花一晚上读的原因——它把“手感对”这件事的全部细节，摊开在代码里。