HTML5小游戏开发核心是Canvas+requestAnimationFrame+事件监听+基础物理逻辑四者组合。Canvas需用getContext('2d')绘图，清屏用clearRect；requestAnimationFrame天然同步刷新，需配合时间戳delta控制帧率；键盘鼠标需状态缓存；AudioContext须用户手势触发。
HTML5 写小游戏，核心不是学“一堆技术”，而是掌握能立刻画出图形、响应操作、维持动画循环的最小可行组合。Canvas + requestAnimationFrame + 事件监听 + 基础物理逻辑，这四块拼起来，就能跑通第一个可交互小球弹跳。
Canvas 2D 上下文是绘图唯一入口
所有图形绘制都必须通过 getContext('2d') 获取上下文对象，没有 DOM 操作式绘图； 元素本身只是容器，宽高必须用 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 是离散事件，无法直接判断“按键是否正被按住”。游戏需要持续输入状态，必须维护一个键位映射表。
立即学习“前端免费学习笔记（深入）”；
- 初始化一个对象：
const keys = {}; - 监听
keydown设keys[event.code] = true，keyup设false - 在
update()中查if (keys['ArrowRight']) { x += 5; }，不是在事件里直接改位置 - 鼠标同理：用
canvas.getBoundingClientRect()把clientX/clientY转成画布坐标系
AudioContext 播放音效有严格触发时机限制
现代浏览器禁止自动播放音频，AudioContext 必须由用户手势（如 click、keydown）首次触发才能解禁，且后续所有音频都依赖这个上下文。
- 别在页面加载完就
new AudioContext()，等第一次点击再初始化 - 音效推荐用
AudioBufferSourceNode+decodeAudioData预加载，避免每次播放都解码 - 短音效别用
标签，延迟高、不可控；长背景乐可用HTMLMediaElement+play()（仍需用户触发）
真正卡住新手的，往往不是语法不会，而是没意识到 Canvas 不是“重绘整个世界”，而是“擦掉再重画全部”；也不是搞不定物理公式，而是忘了把时间差 delta 乘进速度里导致帧率一变角色就飞出去。这些点，比学多少 API 都关键。
