以下是一份有趣的纯前端（HTML + CSS + JavaScript）小游戏项目合集，全部可以在浏览器中直接运行，几乎都是开源的，代码清晰，非常适合学习、练手、面试展示、教学或快速原型。
我把它们按类型分类整理（截至2026年仍然活跃或经典的项目），并附上GitHub地址、在线Demo（如果有）、技术点和难度参考。数量超过200个的完整大集合较少见，但以下来源加起来轻松超过200+个高质量项目。
1. 最推荐的综合合集（一站式包含几十到几百个游戏）
这些仓库把很多小游戏打包在一起，非常适合一次性浏览和学习。
- he-is-talha / html-css-javascript-games
链接：https://github.com/he-is-talha/html-css-javascript-games
游戏数量：30+ 个经典游戏（还在持续更新）
亮点：每个游戏都有源码 + 独立在线Demo，代码清晰，适合初学者
代表游戏：Candy Crush、Flappy Bird、Tic Tac Toe、Snake、2048、Memory Card、Piano Tiles、Whac-A-Mole 等
技术：纯 HTML + CSS + JS（部分用 Canvas） - solygambas / html-css-javascript-projects
链接：https://github.com/solygambas/html-css-javascript-projects
游戏数量：100+ 个小项目（包含大量游戏）
亮点：CodePen 集合风格，项目非常精致，视觉效果好
代表游戏：Insect Catch Game、Memory Game、Whack-a-mole、Rock Paper Scissors 等 - CoolDude2349 / Offline-HTML-Games-Pack
链接：https://github.com/CoolDude2349/Offline-HTML-Games-Pack
游戏数量：约300个单文件离线游戏
亮点：全部单HTML文件，下载后无需服务器就能玩，非常适合离线/教学 - Martin-Pitt / awesome-frontend-games
链接：https://github.com/Martin-Pitt/awesome-frontend-games
类型：精选列表（非代码仓库，但链接到很多高质量开源游戏）
包含：Game Dev Tycoon、各种Canvas/WebGL游戏
2. 经典游戏重制 & 热门类型合集（学习价值最高）
| 类型 | 推荐仓库 / 项目 | 亮点 / 技术点 | 难度 |
|---|---|---|---|
| Snake | https://github.com/topics/snake-game?l=javascript | 经典贪吃蛇，很多变体（彩色、AI、3D） | ★☆☆ |
| Tetris | https://github.com/search?q=tetris+html5+language%3Ajavascript&type=repositories | Canvas + 键盘控制 + 方块旋转 | ★★☆ |
| 2048 | https://github.com/gabrielecirulli/2048（原版） + 很多 fork | 滑动合并、动画、触屏适配 | ★★☆ |
| Flappy Bird | https://github.com/ellisonleao/clumsy-bird（经典重制） | 物理碰撞、Canvas动画、音效 | ★★☆ |
| Memory / 翻牌 | https://github.com/topics/memory-game?l=javascript | 翻牌匹配、计时、动画 | ★☆☆ |
| Whac-A-Mole | https://github.com/topics/whack-a-mole | 随机出现、点击计分、动画 | ★☆☆ |
| Pong / 乒乓 | https://github.com/topics/pong?l=javascript | 多人/单人、物理反弹 | ★★☆ |
| Pac-Man | https://github.com/topics/pacman?l=javascript | 迷宫寻路、鬼魂AI | ★★★ |
| Platformer | https://github.com/topics/platformer?l=javascript | 跳跃、重力、关卡设计 | ★★★ |
| Puzzle | https://github.com/krishealty/puzzle（15宫格拼图） | 拖拽、胜负判定、可自定义图片 | ★★☆ |
3. 游戏引擎 + 大型开源游戏（进阶学习）
如果你想做更复杂的游戏，这些仓库值得 fork 和学习：
- Phaser（最流行的 HTML5 游戏框架）
https://github.com/phaserjs/phaser
官方示例：几百个示例游戏，涵盖物理、粒子、tilemap、多人等 - PixiJS（高性能 2D 渲染引擎）
https://github.com/pixijs/pixijs
很多炫酷的粒子、动画、跑酷游戏示例 - melonJS（轻量级 HTML5 引擎）
https://github.com/melonjs/melonjs
适合学习完整游戏结构 - js13kGames 参赛作品合集（每年13KB限制，非常精巧）
https://github.com/topics/js13kgames
每年几百个极致压缩的创意小游戏
4. 快速上手建议（适合初学者）
- 先克隆 https://github.com/he-is-talha/html-css-javascript-games
→ 每个文件夹都是独立项目，直接浏览器打开 index.html 就能玩 - 想自己改/学 → 选一个简单游戏（如 Snake、Tic-Tac-Toe、Memory），先跑通 → 加音效 → 加动画 → 加排行榜 → 加触屏适配
- 想做自己的合集 → 可以参考这些仓库的结构，建一个 index.html 做游戏列表 + iframe 预览
- 想做更炫的 → 学习 Canvas + requestAnimationFrame，或者直接上手 Phaser / PixiJS
需要我帮你推荐某个具体类型（例如全部是 Canvas 的、全部是纯 DOM 的、全部是小游戏单文件的）或者某个游戏的详细学习路径吗？
也可以告诉我你想做的游戏类型（益智、休闲、复古、3D），我可以给你更精准的仓库列表！
