五个像素游戏,每个都是一个 HTML 文件

没有构建步骤、没有 npm、没有 CDN —— 双击就能玩,另存就能改。界面中英双语,按 L 切换。 每个文件内部按 算法区 / 游戏层 分层,算法区不碰 DOM, 所以能被单独抠出来做单元测试。五个游戏合起来有 862 条自动化断言 在跑。

零依赖 · 完全离线 640×360 像素画布 中英双语界面 MIT 许可 erling78.github.io/single-file-pixel-games

打砖块

碰撞检测与关卡数据驱动

球撞挡板的位置决定反弹角度。5 个关卡用字符画描述 —— 加一关就是多打几行字,不用碰任何逻辑。

操作 ← → 或鼠标移动挡板 空格 发射

贪吃蛇

网格逻辑与转向缓冲

"推进一格"写成纯函数。转向可以排队两拍 —— 这一个小设计,决定了快速连按会不会丢输入。

操作 方向键 / WASD 空格 暂停 R 重开

平台跳跃

瓦片碰撞与手感参数

轴分离碰撞、单向平台、土狼时间、跳跃缓冲、变高跳。手感靠的是时间,不是粒子特效。

操作 ← → / AD 空格 跳(长按更高) R 重来

推箱子

不可变状态与撤销栈

移动写成"进去一个状态、出来一个新状态",撤销、求解器、回放全都免费得到。6 个关卡都被 BFS 证明过可解。

操作 方向键 / WASD Z 撤销 R 重来

弹幕射击

实体系统与弹幕模式

弹幕是数据不是代码:每种形状都是一个返回速度向量数组的纯函数。三种敌人三种弹幕,形状两两不同。

操作 ← → / AD 按住空格 开火

怎么跑

你现在打开的这页就是线上版,点上面的卡片直接玩。 想放到自己机器上:直接双击任意 games/*.html 即可 —— 单个游戏是自包含的。 要让五个游戏互相跳转,用任意静态服务器:

# 任选一种,都不需要装任何东西
python -m http.server 8000
npx serve .

# 然后打开 http://localhost:8000

怎么验证

node tests/core.test.mjs      # 算法单元测试(196 项)
node tests/smoke.test.mjs     # 端到端冒烟测试(158 项)
node tests/systems.test.mjs   # 规则与平衡测试(256 项)
node tests/dom-check.mjs      # 静态一致性检查(252 项)
node tests/readme.test.mjs    # 文档一致性检查(不计入上面的总数)

npm test                      # 一次跑完
→ 862 项全部通过

不需要 npm install —— 测试只用 Node 内置模块。

怎么改

拆解一个游戏

单文件内部的四层结构:UI 层、世界层、算法区、游戏层。为什么算法区必须不碰 DOM。

常见改造怎么做

"加一关""换成我的美术""改手感""加一个新机制"—— 每种改造的具体改法和副作用。

可复用的模式

固定步长、双缓冲缩放、对象池、种子随机、本地化……踩过的坑与结论。English

完整说明

测试怎么组织、每个游戏教什么、已知限制。以及这些代码不打算解决什么问题。