HTML5 游戏最大的优势是“零安装”：一个链接发出去就能玩，特别适合独立开发者用 Demo 验证想法。我在游戏宅基地写这类内容，就是想让新手少走我走过的弯路。下面按实际开发顺序拆一遍。
第一步：最小可行原型
一个 index.html 加一块 canvas，再写一个 game loop，让一个方块能受键盘控制移动——这就是第一步。别急着加美术、音效、菜单，先把“能交互”跑通。我见过太多人卡在搭工程脚手架，三个月没见到一个能动的画面。
资源加载：新手必踩的坑
真实细节：图片一定要预加载。我第一版直接 drawImage，结果第一帧图还没加载完，画面空白、逻辑却已经在跑。正确做法是把所有 Image 的 onload 用 Promise.all 包起来，全部就绪再启动循环。音频同理，而且移动端必须等用户手势（第一次 touch/click）之后才能 play()，否则静音。
屏幕适配
我用的固定设计分辨率方案：比如竖屏统一 720×1280，再用 CSS scale 结合 devicePixelRatio 缩放铺满不同屏幕，避免在高清屏上糊成马赛克。这是上线后才发现的坑，早期我直接用屏幕尺寸画，结果在不同手机上布局全乱。
一个上线后才暴露的案例
我曾做一个竖屏消除类小游戏，本地和主流机型都流畅，上线后却有玩家反馈卡顿。排查发现安卓低端机帧率只有 20 左右：每帧都在 new 粒子对象、又没用对象池，GC 频繁打断渲染。改成对象池复用后，稳定在 55fps 以上。这种问题模拟器里很难复现，必须真机测。
我的“H5 三阶段”方法论
- 原型验证（约 3 天）：只做核心玩法能不能成立。
- 核心打磨（约 2 周）：手感、关卡、反馈、音效，别在美术上耗太久。
- 分享/商业化（约 1 周）：接分享、接渠道，发出去收集真实反馈。
判断：H5 游戏拼的是“快”和“轻”，一周做不出原型的方向，往往本身就不适合 H5。
能发的渠道
游戏宅基地、Itch.io、微信小游戏、抖音小游戏都可以放。我一般先把能玩版本放到游戏宅基地，和社区里的独立开发者互相试玩提意见，再决定铺哪些渠道。如果你也在做 H5 小游戏，欢迎来 bacc8.cn 交流真实踩坑。
