VIBE CODING / WEB GAME2026

几何消消

SHAPE
MATCH · 几何消消

连成三个,
让整块棋盘热闹起来。

在 15 步之内凑够目标分。连锁越深,倍率越高;提前达标省下的步数换成金币,买升级和印记,把一局慢慢养成满屏连爆。

打开网页即可 · 支持电脑和手机

A LITTLE GAME. A BIG CHAIN.
没有图片素材。方块由 Canvas 绘制,音效实时合成。
我的工作
  • 游戏设计
  • 交互设计
  • 视觉设计
每关最多步数
15步
主线关卡
09关
图片美术素材
0张

THE GAME LOOP

小小棋盘,
一局慢慢长大。

红圆、蓝方、黄三角、绿菱形,四种方块各有形状,黑色专门留给炸弹。每 3 关遇到一个带特殊规则的首领,9 关通关后,还可以继续无尽模式。

  1. 01

    交换,消除,接起连锁

    同色三连消除,四连、五连或 T / L 形制造炸弹。

  2. 02

    提前达标,把步数换成金币

    每关最多 15 步,达到目标分立即过关。

  3. 03

    去商店,让下一关更有得玩

    升级方块与炸弹,搭配印记,逐渐形成自己的打法。

BEHIND THE GAME

让「好玩」
有迹可循。

从方向、规则到第一步体验,三次关键取舍。

01

FIND THE FOCUS

从打怪到冲分,
先把目标说清楚。

最早做的是三消打怪:消方块攻击敌人,同时应付护盾和毒气。几轮试玩下来,总是在「太简单」和「太难」之间摇摆,攻防数值相互牵扯。

后来改成冲分,每关只需要定一个目标分,玩家一眼就能看懂。我先做了可以切换的原型,试玩确认手感后,再把打怪模式整体搁置。

最初攻击 / 护盾 / 毒气

同时理解攻防,平衡多组数值

调整后凑够这一关的目标分

一个清楚的目标,留出连锁成长空间

02

MAKE EACH MOVE COUNT

让好的一步,
真的更值钱。

改一条规则:
清掉的每一块,都计基数。

模拟发现,34% 的步数得分不到全关的 2%,最高的一步却占了全关的 23%。很多普通消除几乎没有贡献,少数爆发决定了大部分分数。

我把「连锁清掉的方块」也纳入方块基数。最好 10% 步数占总分的比例从 42% 降到 34%,得分分布更平均,每一步的贡献也更容易被感知。

最好 10% 的步数,占全关总分的比例
调整前
42%
调整后
34%

自动玩家模拟结果,非真人测试。查看设计记录 ↗

03

HELP THE FIRST TWO MINUTES

给只玩两分钟的访客,
一个轻一点的引导。

作品集访客大多不读规则。我把说明拆进第一关,在情境发生时弹出四句提示:交换、计分、炸弹、过关。每句只出现一次,也可以跳过。

停手 5 秒后,棋盘会提示一步可以走的交换。优先提示能做出炸弹的一步,把引导和游戏的爽点接在一起。

  1. 交换
  2. 计分
  3. 炸弹
  4. 过关
一句提示,配合棋盘上的示范,让玩家先动手。

A SWISS POSTER, IN MOTION

用几何和数字,
把游戏画出来。

从四种代码画面样板中选定「构成」风格,再从五种可试玩的界面里选出瑞士海报版式:巨型数字、原色色块、粗细两级线条。

平涂几何,没有阴影,动作带回弹。界面只保留横向结构线,用浅色色块替代方框;游戏根据窗口大小缩放,一屏装下完整画面。

棋盘之外,商店也沿用同一套视觉语言。

BUILT WITH CODE

画面、声音、规则,
都在代码里。

React + TypeScript + Canvas。音效用 Web Audio 实时合成,规则引擎是独立的纯函数模块,配有单元测试与自动玩家模拟器。

查看开源代码

现在,轮到你了。

LET IT CHAIN.

立即试玩
← 回到全部作品