小游戏

H5 Game Lab

小游戏实验室

这里是我用纯前端技术复刻的经典小游戏合集。每个游戏下方都记录了核心算法、数据结构与实现思路——不是游戏说明书的复读，而是写给同行看的「代码是怎么想的」。

🔢

2048

方向键滑动合并，压缩数组 + 满行检测判负

🧊

魔方练习台

Kociemba 两阶段求解器，step-by-step 动画回放

⚫

五子棋

Minimax + Alpha-Beta 剪枝，棋型评分引擎驱动 AI

🥕

飞行萝卜

Three.js 3D 动画：TweenMax 循环 + OrbitControls 视角

🌀

一笔连珠

哈密顿路径建模，事件驱动状态机 + Tilemap 碰撞

✦

六花方块

小鸟游六花主题 Tetris：7-bag 随机、Hold、Ghost 与墙踢

🏃

一个都不能死

双通道 Canvas 渲染 + 渐进加速障碍生成 + 碰撞检测

💣

扫雷

Fisher-Yates 布雷 + BFS 递归展开连通区域

📦

推箱子

数字编码地图 + 历史栈撤销 + 100 关预置图谱

🟡

吃豆人

Tile 地图 + 幽灵状态机（追逐/散开/逃跑）+ AABB 碰撞

🎮

坦克大战

分层 Canvas 渲染 + 对象池子弹 + AABB 碰撞系统

🪚

切积木

Box2D 物理模拟 + 鼠标轨迹多边形切割判定

👁️

最强眼力

HSL 色彩空间 + 指数衰减色差 + 随机位置算法

← 返回游戏大厅

2048

重新开始

Score0

Best0

游戏结束

合并到 2048，你能做到吗？

用方向键或滑动移动方块，相同数字碰在一起会合并。不断叠加，直到拼出 2048。

为什么有时候滑了没反应？操作前后棋盘状态完全相同时，不会生成新方块——这一步对局面没有意义。

什么时候游戏结束？棋盘填满且没有任何相邻格子数字相同，无路可走。

最高分存在本地，刷新页面不会丢失。

五子棋

双人对战 人机对战

重新开始

黑方回合

和 AI 下一局五子棋

先连成五子的一方获胜。支持双人对战和人机对战，人机模式下 AI 会主动进攻也会封堵你的活三活四。

Minimax + Alpha-Beta 剪枝AI 搜索深度 4 层。Minimax 假设双方都走最优着法，AI 选对自己评分最高、对对手评分最低的落点。Alpha-Beta 剪枝在搜索过程中丢弃已经不会影响结果的分支——复杂度从 O(bⁿ) 降到 O(√(bⁿ))。

评分函数沿四个方向扫描线评估棋型：五连 > 活四 > 冲四 > 活三 > 冲三 > 活二。防守权重 1.1x，AI 略偏保守。候选节点只从已有棋子 2 格邻域生成，每层取评分前 15 名，大幅缩减搜索宽度。

悔棋历史栈记录每步坐标与颜色，人机模式一次撤销两步（你的 + AI 的）。

悔棋

飞行萝卜

全屏

一只兔子驾着萝卜飞过云层

纯观赏性的 3D 动画场景，拖动鼠标可以转动视角。没有目标，就是好看。

所有模型都是代码画的没有导入任何外部模型文件，兔子、萝卜、翅膀全部用几何体拼出来。

动画怎么循环的？浮动、摇摆、耳朵摆动各自独立循环，互不干扰，叠在一起就有了自然的节奏感。

一笔连珠

⛶

一笔画过所有格子

从起点出发，不重复地走过每一个格子，到达终点。看起来简单，越到后面越容易把自己堵死。

为什么会堵死？「不重复走完所有格子」在数学上叫哈密顿路径问题，是经典的 NP 完全问题——没有捷径，只能靠预判。

HS Game Lab

小鸟游 · 六花主题  俄罗斯方块

以小鸟游六花为主题的俄罗斯方块游戏，紫色的方块与星辰相伴，守护高效与开发的世界！

☆ 小鸟游 · 六花  俄罗斯方块

新窗口打开

游戏说明 ☆

在经典俄罗斯方块规则上重构了六花主题 UI：发光方块、幽灵落点、暂存方块、按住连发、经典清行计分和自动暂停。

READY 开始

得分0

最高0

行数0

等级1

Next-

Hold-

← 旋转 → ↓ Hold 硬降 暂停 重开

操作说明方向键移动方块，↑ 或 X 旋转方块，↓ 加速下落，空格硬降，C 暂存，P 暂停或开始。

游戏目标通过移动、旋转和放置方块，填满一行或多行来消除它们并获得分数。消除的行数越多，获得的分数越高。

得分规则单行消除 100 分，双行消除 300 分，三行消除 500 分，四行消除（Tetris）800 分。

游戏特色小鸟游六花主题界面、紫色星空背景、可爱的 Golang 小地鼠，以及流畅的游戏体验。

记住！编写优雅的代码就像玩俄罗斯方块一样，需要思考、规划和完美的执行！

一个都不能死

一个都不能死

同时操控两个火柴人，任何一个倒下就算失败。

玩法点击角色本身让它跳跃，两个角色需要分别点击。任何一个被障碍碰到即失败。

难度障碍速度随存活时间持续加快，越到后期压力越大。四种难度模式可选，炼狱模式从一开始就不给喘息机会。

扫雷

东雪莲主题扫雷

每一次点击，都是一次智慧的探索。用数字推理揭开安全格子，避开隐藏的雷区。

目标找出所有不是地雷的格子，同时避免点到地雷。

数字提示数字表示周围 8 个格子中地雷的数量，用它推断下一步是否安全。

操作说明左键翻开格子，右键标记或取消标记。点到空白区域会自动展开周围安全区域。

推箱子

只能推，不能拉

把所有箱子推到目标点上。一步走错可能全局卡死，支持无限步撤销。

为什么这么难？推箱子在计算机科学里是 PSPACE 完全问题，比 NP 还难——即使给你无限时间枚举，状态空间也可能爆炸。

撤销每步操作都记录在历史栈里，随时可以一步步退回去。

吃豆人

吃豆人

在迷宫里吃掉所有豆子，躲开四只幽灵。吃到大豆子后幽灵会变蓝，这时候可以反过来追它们。

幽灵的行为模式每只幽灵由有限状态机驱动：追逐态（直奔吃豆人位置）、散开态（各自回角落）、逃跑态（吃到大豆子后变蓝反向逃离）。状态由计时器轮换，不是一直追着你跑。

碰撞用 Tile 坐标吃豆人和幽灵的位置都映射到迷宫格子上做离散碰撞检测，比像素级碰撞更稳定，不会出现「擦边也算碰」的问题。

坦克大战

FC 坦克大战，双人对战

消灭敌方坦克，保卫鹰巢基地。支持键盘双人同时操作，可以合作也可以互坑。

分层渲染5 层 Canvas 叠加而非单层全量重绘：墙壁层（静态地图，改了才重绘）→ 坦克层 → 草地层（半透明）→ 特效层（爆炸动画）→ UI 层。分层后每帧只重绘有变化的那几层。

对象池子弹和爆炸特效不随用随 new，而是预分配后复用。用过的对象标记空闲放回池里，下一发射直接从池里取。避免频繁 GC 造成的帧率抖动。

AABB 碰撞所有碰撞检测都用轴对齐矩形（AABB）判断：坦克-墙壁、坦克-坦克、子弹-墙壁、子弹-坦克四类。空间分块后每帧只需检查附近对象对，不用 O(n²) 穷举。

操作玩家1：WASD + Space；玩家2：方向键 + Enter。N/P 切换关卡。

切积木

鼠标画线，把积木切下来

用鼠标在积木上划线，把顶部积木切下来落到平台上。切得太碎可能立不住。

物理引擎Box2D 驱动真实的重力加速度和碰撞响应。切割后积木自动拆分为两个独立刚体，各自独立运动。

多边形切割算法鼠标轨迹与刚体多边形求交，确定切割线，计算分割后的两个凸多边形顶点，分别创建新的 b2Body。非凸多边形需先三角剖分再处理。

最强眼力

找出颜色不同的那一块

在一堆色块中找出颜色不同的那个。越往后色差越小，接近人眼的极限。

色差怎么计算的？用 HSL 色彩空间生成色块：固定色相和饱和度，微调亮度产生差异。人眼对不同色相敏感度不同（对绿色最敏感，对蓝色最钝），步长需要根据色相经验调整。

难度曲线初始色差 Δ=30，每关乘 0.92 衰减。到第 30 关 Δ≈2.5，接近人眼色差辨别阈（JND ≈ 2）。网格也从 2×2 扩到 6×6。

魔方练习台

全屏练习 复位

Moves0

ModeKociemba

Speed快速

Playback

慢速 标准 快速

Algorithm 算法复原

已复位

Kociemba Solution 双击魔方开始

点击「算法复原」，看魔方自己转回去

双击打乱，然后用 Kociemba 两阶段算法自动求解。左侧会实时高亮当前执行的转面步骤。

Kociemba 两阶段算法Phase 1 把魔方归约到一个受限子群（角块方向全正确、棱块中层归位），最多 12 步；Phase 2 在子群内搜索最优解。用 IDA*（迭代加深 A*）搜索 + 预计算的剪枝表剪掉不可能的分支。两阶段合计通常 18–22 步。

God's Number任意三阶魔方从任一状态到还原，最多只需要 20 步（HTM 度量：每次 90°/180° 转面算 1 步）。Google 用了 35 CPU-年穷举证明于 2010 年。

操作鼠标拖拽旋转视角，双击任意棱面打乱，空格键切换单层/双层转法。