做网页小游戏需要的引擎、素材、社区与工具清单。这里列的每一条都是可以长期使用的公开资源,不做付费墙推荐,也不塞自家产品的软广。
🎮 引擎与工具链
做 HTML5 小游戏,主流选择是「浏览器引擎 + 画布」这条路线。
- Phaser 官方学习资源 —— 2D 游戏最常用的 JS 引擎,物理、动画、场景管理一应俱全,官方教程与示例可直接跑
- PixiJS —— 极速 WebGL 渲染库,适合自己写玩法逻辑、需要极致帧率的轻量项目
- Three.js 手册 —— 3D 方向的 Web 引擎,站内 3D 展厅 即基于同类技术栈
- Godot 下载页 —— 免费开源引擎,支持导出 Web 版,是「先做原生再导网页」的稳妥路线
- Excalibur.js —— TypeScript 原生 2D 引擎,适合偏好强类型的前端团队
- Kaboom.js —— 轻量 2D 引擎,文档短、上手快,适合原型验证
🎨 可商用素材
素材是 Web 小游戏最容易踩版权坑的地方,优先用明确授权的站点。
- Kenney 素材库 —— 大量 CC0 游戏素材(精灵图、音效、UI),商用免署名
- OpenGameArt —— 开源游戏艺术社区,每个条目都标注授权方式,下载前看清 License
- Freesound —— 音效与录音共享库,按 CC 协议分层筛选,商用前确认具体条款
- Google Fonts —— 开源字体,站内标题字体即出自此类来源
- Google Material Icons —— 统一风格的图标集,适合按钮与菜单
- Mixkit —— 免费视频、音频与模板素材,许可宽松
👨🏫 社区与教程
- MDN Canvas 教程 —— Canvas 绘制与动画的权威入门
- MDN HTML Canvas 元素 —— 元素级 API 说明与浏览器支持情况
- web.dev —— 面向前端的性能、可访问性与最佳实践指南
- Chrome Developers —— 浏览器特性、性能分析与调试工具的官方文档
- Can I use —— 查询各浏览器对某个特性的支持率,决定兼容策略
- itch.io —— 独立游戏平台,作品发布、试玩与找玩家都在这里
- GitHub —— 开源引擎、模板与示例代码的主仓库
🚀 上线与部署
静态小游戏不需要服务器,一份 HTML 加几个资源目录就够了。
- Cloudflare Pages —— 免费静态托管,自带 CDN 与 HTTPS
- Netlify —— 拖拽式部署,适合快速分享 demo
- Vercel —— 前端项目友好,构建即上线
- Surge —— 命令行一键发布静态目录,适合极简项目
- WAI-ARIA 实践指南 —— 给 Canvas 游戏补键盘操作与语义标签的可访问性方案
🧭 一份起步路径
想今天就做出第一款?按这个顺序走:用 Canvas 或 Phaser 写一个最小可玩循环 → 用 Kenney 的 CC0 素材替换占位图 → 在 itch.io 或本地预览里调手感 → 用 Cloudflare Pages / Netlify 发布 → 回到 IOUXI 的 游戏页结构说明 补齐规则、技巧、亮点与 FAQ 四段说明。发布后也可以来 常见问答 看看读者最常问的五个问题。
以上为常青资源,持续维护。若某个链接失效,可在文档中心反馈。