纯前端 · 零后端 · 零第三方运行时
24 款 轻量级网页小游戏
免下载，秒开即玩
H5 轻量游戏合集收录仅用 HTML、CSS、JavaScript 开发的网页游戏，不使用任何后端服务与第三方运行时。 单文件平均体积约 11 KB，支持键盘与手机触摸，全部以 MIT 许可开源。
已上线游戏
以下 6 款已完成开发并通过构建校验，点击即可开始游玩。每款均为自包含单文件，可离线保存后直接打开。
2048
滑动合并相同数字方块，每次移动随机生成 2 或 4，目标拼出 2048。无时间压力，纯策略。
开始游戏 →
俄罗斯方块
七种四格骨牌旋转下落，填满整行消除得分。含下一块预览、硬降落点提示与随等级递增的速度。
开始游戏 →
扫雷
根据数字提示推理地雷位置，右键插旗标记。三档难度，首点保证安全，支持双击快速展开。
开始游戏 →
打砖块
控制挡板反弹小球击碎全部砖块，反弹角随击球点变化，球速随关卡递增，共三条命。
开始游戏 →
贪吃蛇
控制小蛇吃食物不断变长，撞墙或咬到自己即结束。含穿墙模式与随长度递增的速度。
开始游戏 →
记忆翻牌
翻开卡牌找出所有相同图案的配对，记录步数与用时。支持 4×4 与 6×6 两档难度。
开始游戏 →规划中的游戏清单
共规划 24 款，覆盖益智、动作、休闲、策略与 3D 五大类。清单来源包括 itch.io 开源区（tag: open-source）、 GitHub 检索、Ludum Dare 参赛作品与经典玩法复刻，技术难点与推荐开源库均已在规划文档中标注。
🧠 益智 Puzzle
- 2048 已上线
- 俄罗斯方块 已上线
- 扫雷 已上线
- 数独 回溯生成 · 20 KB
- 猜数字 Bulls & Cows 9 KB
- 汉诺塔 递归可视化 · 10 KB
- 数字华容道 可解性判定 · 10 KB
- 六边形消除 轴向坐标 · 22 KB
⚡ 动作 Action
- 打砖块 已上线
- 太空射击 对象池 · 30 KB
- 飞跃管道 视差滚动 · 12 KB
- 像素平台跳跃 Phaser 3 · 40 KB
- 弹球对战 Pong 8 KB
- 无尽跑酷 Phaser 3 · 45 KB
🎈 休闲 Casual
- 贪吃蛇 已上线
- 记忆翻牌 已上线
- 三消宝石 连锁补位 · 25 KB
- 21 点 软硬点数 · 15 KB
- 纸牌接龙 拖拽栈 · 28 KB
- 指尖打字 WPM 统计 · 9 KB
- 节奏点击 Web Audio · 20 KB
♟️ 策略 Strategy
- 五子棋 Alpha-Beta 剪枝 · 18 KB
- 迷你塔防 A* 寻路 · 35 KB
🧊 3D
- 3D 骰子 three.js + cannon-es
技术方案与设计取舍
轻量级静态游戏指仅由 HTML、CSS、JavaScript 构成、不依赖服务器端逻辑与数据库、可作为纯静态文件托管的网页游戏。 与需要引擎运行时的方案相比，它的核心优势是体积与启动速度：本合集单文件平均约 11 KB， 在 4G 网络下首屏可交互时间低于 1 秒，且可整页离线保存后继续游玩。
筛选标准
入选游戏需同时满足四项条件：仅使用 HTML/CSS/JavaScript 且无需后端；单文件体积控制在 40 KB 以内；玩法类型不重复；具备明确的技术实现难点或优化空间。
来源核查结果
本轮对四个来源做了实际核查：itch.io 的 open-source 标签可直接筛出大量浏览器端 MIT/GPL 作品，可用性最高；
GitHub Trending 噪声较大，更适合改用固定检索式；LudumDare 官方组织仓库仅含官网与归档代码、不含游戏作品源码，
需改用参赛者个人仓库检索；Simple Game Tutorials 已迁移至 berbasoft.com，且教程基于 LÖVE (Lua) 与 Pygame Zero (Python)，
仅作为玩法与算法参考移植。
开源库选型
| 场景 | 首选 | 备选 | 说明 |
|---|---|---|---|
| 基础渲染 | 原生 Canvas 2D | — | 绝大多数玩法无需框架，省下 100 KB–1 MB 运行时 |
| 复杂 2D 游戏 | Phaser 3 | Kaboom.js | Phaser 生态成熟；Kaboom 约 50 KB 更轻 |
| 3D | three.js | Babylon.js | 仅 3D 分类使用，CDN 懒加载 |
| 2D 物理 | 自写 AABB | Matter.js | 打砖块与平台跳跃自写足够，Matter.js 约 90 KB |
| 3D 物理 | cannon-es | Rapier (WASM) | cannon-es 约 30 KB；Rapier 性能更好但体积大 |
| 音效 | Web Audio 合成 | Howler.js | 用 OscillatorNode 合成音效，零字节 |
| 状态持久化 | localStorage | IndexedDB | 分数与进度用 localStorage 足够 |
部署配置
站点托管于 Cloudflare Pages，构建产物目录为 dist，通过 wrangler.toml 与 GitHub Actions 自动部署，
域名由 Cloudflare DNS 解析。生产化配置包含安全响应头、长缓存策略、LICENSE 合规校验与体积门禁。
3D 分类的模型素材可由 Blender MCP 生成 glTF 后经 Draco 压缩引入，并独立懒加载以避免影响其余页面性能。
常见问题
关于技术选型、隐私与部署的高频问题。
这些游戏需要下载或安装吗？
不需要。所有游戏都是纯 HTML/CSS/JavaScript 实现的网页应用，直接在浏览器中打开即可游玩，无需下载客户端、无需注册账号、也不依赖任何后端服务。
什么是轻量级静态游戏？
轻量级静态游戏指仅由 HTML、CSS、JavaScript 三种前端技术构成、不需要服务器端逻辑与数据库、可作为纯静态文件托管的网页游戏。其典型特征是单文件体积极小（本合集平均约 11 KB）、首屏加载快、可离线运行，适合部署在 Cloudflare Pages、GitHub Pages、Vercel 等静态托管平台。
游戏支持手机吗？
支持。所有已上线游戏均同时适配键盘与触摸操作：2048 与贪吃蛇支持滑动手势，打砖块支持手指拖动挡板，其余游戏支持点击操作，并针对移动端视口做了响应式布局。
游戏是开源的吗？
是的。全部游戏以 MIT 许可发布，源码为单文件 HTML，可直接查看、修改与二次分发。部署脚本与构建流程同样开源。
为什么不使用 Phaser 或 Unity 等游戏引擎？
因为合集的定位是极致轻量。引入 Phaser 3 会增加约 1 MB 的运行时体积，而 2048、扫雷、贪吃蛇这类玩法用原生 Canvas 2D 与 DOM 即可完整实现。只有平台跳跃、无尽跑酷等需要场景与精灵管理的作品才会考虑引入 Phaser 3。
游戏数据会上传服务器吗？
不会。站点没有任何后端，也不含任何统计与追踪脚本。最高分、最佳步数等记录仅保存在浏览器本地的 localStorage 中，不会离开你的设备。
如何新增一款游戏？
在 games 目录下新建以游戏 ID 命名的子目录并放入自包含的 index.html，随后在 data/games.json 中登记元数据（标题、分类、描述、技术难点、体积预估）。执行 npm run build 会自动生成更新后的 sitemap.xml 与 llms.txt 并完成脚本语法与体积校验。
网站部署在什么平台上？
站点支持一键发布到 GitHub Pages（推荐，零密钥）与 Cloudflare Pages，构建产物目录为 dist，由 GitHub Actions 自动构建与部署，也可经 Wrangler CLI 发布到 Cloudflare Pages。