html5小游戏开发核心是canvas+requestanimationframe+事件监听+基础物理逻辑四者组合。canvas需用getcontext(‘2d’)绘图，清屏用clearrect；requestanimationframe天然同步刷新，需配合时间戳delta控制帧率；键盘鼠标需状态缓存；audiocontext须用户手势触发。
HTML5 写小游戏，核心不是学“一堆技术”，而是掌握能立刻画出图形、响应操作、维持动画循环的最小可行组合。Canvas + requestAnimationFrame + 事件监听 + 基础物理逻辑，这四块拼起来，就能跑通第一个可交互小球弹跳。
Canvas 2D 上下文是绘图唯一入口
所有图形绘制都必须通过 getContext('2d') 获取上下文对象，没有 DOM 操作式绘图；<canvas></canvas> 元素本身只是容器，宽高必须用 JS 或 HTML width/height 属性设置（CSS 缩放会导致模糊）。
- 清屏靠
clearRect(0, 0, canvas.width, canvas.height)，别用innerHTML = '' - 画圆用
arc(x, y, radius, startAngle, endAngle)，记得调beginPath()和stroke()或fill() - 图像加载异步，
img.onload内才能调drawImage()，否则黑块
requestAnimationFrame 是游戏循环的唯一合理选择
不用 setInterval 或 setTimeout 驱动主循环——它们不和屏幕刷新同步，容易掉帧、卡顿、耗电。浏览器会在下次重绘前自动调用回调，天然适配不同刷新率设备。
- 循环结构固定：
function gameLoop() { update(); render(); requestAnimationFrame(gameLoop); } - 想控制帧率？别改间隔，用时间戳做 delta 计算：
const delta = now - lastTime; if (delta > 16) { ... } - 页面切到后台时，
requestAnimationFrame自动暂停，无需手动 stop
键盘/鼠标事件要自己做状态缓存
原生 keydown/keyup 是离散事件，无法直接判断“按键是否正被按住”。游戏需要持续输入状态，必须维护一个键位映射表。
