小游戏

H5 Game Lab

小游戏实验室

这里是我的 H5 游戏实验室。我试着用纯前端技术复刻了一些经典小游戏，并在右侧记录了它们背后的算法与实现思路。欢迎上手体验！

2048 魔方 五子棋 飞行萝卜 一笔连珠

2048

重新开始

Score0

Best0

游戏结束

规则很简单

用方向键或滑动移动方块，相同数字会合并。桌面端用方向键，手机端直接滑动棋盘。

目标合成 2048，也可以继续冲更高分。

节奏适合碎片时间，输赢都不占脑子。

记录最高分会保存在本地浏览器。

五子棋

双人对战 人机对战

重新开始

黑方回合

玩法 & 算法

双人对战或人机对战。AI 基于 Minimax + Alpha-Beta 剪枝，搜索深度 4 层，棋型评分驱动。

双人模式本地对弈，两位玩家共用一台设备轮流操作。

人机模式你执黑先行，AI 执白。AI 使用 Minimax 搜索最优落子点。

AI 算法Minimax + Alpha-Beta 剪枝，棋型评分（五连 > 活四 > 冲四 > 活三 > ...），仅搜索已有棋子邻域。

悔棋

飞行萝卜

全屏

3D 动画场景

萝卜载着兔子飞行员在云层中飞行。支持鼠标拖拽旋转视角、滚轮缩放。

操作鼠标拖拽旋转视角，滚轮拉近拉远，右键平移。

角色胡萝卜机身 + 棕色翅膀 + 兔子飞行员（耳朵会动、眼睛会眨）。

场景云朵循环飘过，胡萝卜上下浮动，叶子持续旋转。

一笔连珠

⛶

核心实现原理

看似简单的"不重复走完所有格子"规则，在计算机科学中其实是一个经典的哈密顿路径（Hamiltonian Path）问题。关卡用 7×6 二维数组描述，通过事件驱动的状态机控制精灵移动与碰撞检测。

关卡地图每个关卡是一个 7×6 二维数组，用 0–3 分别表示空地、路径格、起点/终点和特殊机关。类似于游戏引擎中的 Tilemap 数据结构。

图论建模将网格建模为无向图：每个路径格是一个节点，上下左右相邻的格子之间有一条边。问题等价于在图中寻找一条恰好遍历每个节点一次的路径。

精灵状态机每个格子对应一个精灵对象，内部通过 tag 字段（0/1/2）驱动状态流转：未访问 → 当前路径中 → 已完成，实现清晰的视觉反馈。

交互与碰撞监听鼠标/触摸事件链（按下→移动→抬起），在每次移动时检测当前坐标落入哪个格子的屏幕区域，实时切换精灵状态并刷新画布。

魔方练习台

全屏练习 复位

Moves0

ModeKociemba

Speed快速

Playback

慢速 标准 快速

Algorithm 算法复原

已复位

Kociemba Solution 双击魔方开始

Kociemba 两阶段算法

双击魔方触发合法打乱，手动还原或点算法复原。复原时左侧会实时高亮当前执行的转面步骤。

Phase 1将魔方归约到 <U,D,L2,R2,F2,B2> 子群，最多 12 步。

Phase 2在子群内搜索最优解，两阶段合计通常 20 步以内。

God's Number任意魔方状态最多 20 步可解（HTM），由计算机穷举证明于 2010 年。