实验2026
五行方块:给下落游戏加一套生克规则
设计 · 开发
Next.jsCanvas 2DrequestAnimationFrame五行生克
背景
下落类玩法(三连方块 → 成行成列消除)被验证了几十年,规则清楚、手感稳定。但它只讲「同色相连」这一层关系,和站点的东方调性没有关系。
方案
在常规消除之上加一层五行关系:消除组旁边若有「本元素所生」的元素(木生火、火生土、土生金、金生水、水生木),本次得分乘以 1.5;若有「本元素所克」的元素(木克土、土克水、水克火、火克金、金克木),会连带消除它并形成连锁,连击层数越高倍率越高。渲染用 Canvas 2D 配单个 requestAnimationFrame 循环,固定步长累加并钳制 deltaTime(切后台回来不会跳帧),页面隐藏自动暂停;清除判定、生克连锁与计分全部拆成纯函数,可用构造棋盘逐条验证。
结果
同一个棋盘上同时存在「找三连」与「找生克关系」两种判断,节奏和纯消除游戏明显不同。规则代码与渲染代码分离后,相生、相克、多块、竖直与连锁六类场景都有确定性用例覆盖。