HTML5 Canvas 小游戏：从游戏循环到碰撞检测

小游戏不需要引擎。理解状态、循环与输入之后，一百多行代码就能做出完整可玩的作品。

游戏循环

浏览器的 requestAnimationFrame 提供稳定的帧回调。把「更新状态」和「绘制画面」分开：

function loop(timestamp) {
  update(deltaTime);
  draw();
  requestAnimationFrame(loop);
}

使用时间差而不是固定步长，游戏速度才不会随显示器刷新率变化。

网格与碰撞

贪吃蛇天然适合网格：

const head = { x: snake[0].x + dx, y: snake[0].y + dy };
const hitWall = head.x < 0 || head.x >= cols;
const hitSelf = snake.some(segment => segment.x === head.x && segment.y === head.y);

砖块破坏者则使用轴对齐包围盒（AABB）判断球与砖块是否相交。

输入与移动端

键盘监听之外，补充触摸方向按钮或滑动手势，让手机也能玩。输入只改变方向意图，真正的移动仍在游戏循环中处理。

嵌入站点

游戏作为独立静态目录存在，通过 iframe 嵌入详情页。全屏、重开、返回都由外层页面控制，游戏本身保持纯粹。