html5游戏需依赖requestanimationframe主循环、坐标归一化和deltatime校准，而非仅用canvas绘图；webgl适用于复杂渲染，2d上下文更适合轻量级游戏。
HTML5 游戏真不是靠 canvas 画几笔就跑起来的
绝大多数人卡在第一步：以为只要会用 canvas.getContext('2d') 就能做游戏。其实 canvas 只是画布，没时间控制、没帧循环、没输入处理，连“动起来”都做不到。真正撑起 HTML5 游戏的是那几个被忽略的底层逻辑。
常见错误现象：requestAnimationFrame 写成 setTimeout 循环；鼠标点击没做坐标归一化，点哪都偏移；动画忽快忽慢，因为没校准 delta time。
- 必须用
requestAnimationFrame驱动主循环，它和屏幕刷新率同步，setInterval或setTimeout会掉帧甚至卡死 - 所有输入事件（
mousemove、touchstart）坐标要减去canvas.getBoundingClientRect()的left/top，否则响应位置错乱 - 物理或动画计算别直接写
+= 2，得用deltaTime = (now - lastTime) / 1000做归一化，不然不同设备速度天差地别
用 WebGL 还是坚持 2D 上下文？看这三点再决定
不是性能好就该上 WebGL。很多“小而精”的游戏（比如像素风解谜、文字冒险）用 2D 更稳、更易调、兼容性更好。但一旦涉及粒子、缩放旋转叠加、大量 Sprite 批量渲染，2D 的 drawImage 就开始掉帧。
使用场景差异明显：Phaser 默认用 WebGL，但可以强制 fallback 到 Canvas；pixijs 启动时检测失败会自动切；自己手写的话，canvas.getContext('webgl') 返回 null 就得兜底。
-
WebGL在 iOS Safari 旧版本（2D 没这问题 -
2D上做模糊、阴影用shadowBlur简单粗暴；WebGL得写 fragment shader，调试成本高一截 - 如果要用音频同步动画（比如音游），
WebGL渲染延迟略低，但得配Web Audio API，不能只靠Audio元素
localStorage 存游戏进度？小心 iOS Safari 的“悄悄清空”
localStorage 看似方便，但在 iOS Safari（尤其 PWA 模式下）可能被系统静默清理——不是你代码出错，是 Safari 自己干的。用户玩到一半关页面，回来发现存档没了，第一反应是“这游戏太垃圾”，其实锅不在你。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
真实兼容性影响比想象中大：Android Chrome 稳，桌面端也稳，但 iOS Safari + 微信内置浏览器 + QQ 浏览器内核，对 localStorage 的持久性几乎不承诺。
- 关键进度（如关卡、金币数）建议用
IndexedDB，哪怕只存一个对象，它受系统清理策略影响小得多 - 如果坚持用
localStorage，至少加一层校验：try { JSON.parse(localStorage.getItem('save')) } catch，避免解析失败导致白屏 - 不要存
canvas数据（toDataURL出来的 base64），体积大、写入慢、容易触发存储上限（通常 5–10MB）
打包后资源 404？检查 fetch() 路径和 CORS 头
本地开发一切正常，一扔到 Nginx 或 GitHub Pages 就报 Failed to load resource: the server responded with a status of 404 ()，八成是路径写死了。HTML5 游戏里资源加载不像传统网页有 <img src> 自动补全，全靠 JS 里的 fetch() 或 XMLHttpRequest，路径错了就是 404。
另一个隐形坑是跨域：fetch('assets/player.png') 在本地双击打开（file:// 协议）会因 CORS 被拒，但换成服务器（http://localhost:8080）就没事——这不是 bug，是浏览器安全机制。
- 资源路径统一用相对路径，别用
./assets/或../assets/，直接assets/player.png，靠 HTML 的<base href="/">控制根目录 - 开发时用
npx serve或 VS Code Live Server，别双击 HTML 文件，避开file://的 CORS 限制 - 如果部署在非根路径（比如
https://example.com/mygame/），fetch()的路径得对应前缀，或者用new URL('assets/map.json', import.meta.url)动态解析
事情说清了就结束。最麻烦的从来不是画个角色或写个跳跃逻辑，而是这些藏在运行时底下的水下部分——它们不报错，但会让游戏在某个机型、某次更新、某个网络环境下突然“不对劲”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
