canvas横版跑酷游戏核心是帧驱动、坐标系统与状态分离；用requestanimationframe主循环，统一世界坐标与camera偏移，对象抽象为含update/render/hittest的实体，输入采用键位快照与跳跃状态机，并关闭抗锯齿。
Canvas横版跑酷游戏的核心不在炫酷特效，而在“帧驱动 + 坐标系统 + 状态分离”这三点。它不需要框架，纯原生Canvas API就能跑起来，关键是要把更新逻辑、渲染逻辑和输入逻辑拆清楚。
游戏主循环：requestAnimationFrame驱动
用requestAnimationFrame替代setInterval，保证动画顺滑且省电。主循环里只做三件事：更新状态、检测碰撞、绘制画面。
- 每一帧先调用
update(delta)——delta是毫秒级时间差，用于实现与帧率无关的移动（比如角色每秒跑200px，就写x += speed * delta / 1000） - 碰撞检测不放在渲染里，而放在update之后、render之前，避免视觉延迟
- render函数只负责清屏+drawImage+fillText，不做计算
坐标系统：世界坐标 vs 画布坐标
跑酷游戏必须处理“地图滚动”。推荐用“世界坐标”统一管理所有对象位置（如玩家x=500、障碍物x=1200），再通过一个cameraX偏移量转换为画布坐标：
- 绘制时统一减去
cameraX：ctx.drawImage(obj.img, obj.x - cameraX, obj.y) - cameraX通常跟随玩家：当玩家x超过屏幕中间，就让
cameraX = player.x - canvas.width/2 - 背景层可设多个，按不同速度滚动（如远山滚动慢，近树滚动快），制造视差效果
对象抽象：用构造函数或class管理实体
玩家、敌人、金币、平台都应是独立对象，共享基础接口：
- 每个对象有
update()（改变自身状态）、render(ctx)（把自己画出来）、hitTest(other)（返回是否相交） - 用数组管理对象池：
gameObjects = [player, ...obstacles, ...coins]，主循环遍历调用它们的方法 - 销毁对象别直接
splice，标记alive = false，等本帧结束后批量清理，避免遍历时数组长度变化出错
输入控制：键盘状态快照 + 跳跃状态机
跑酷对响应要求高，不能只监听keydown事件。要维护一个按键状态表：
- 监听
keydown/keyup，更新keys['ArrowUp'] = true/false - 在update中判断：
if (keys['ArrowUp'] && player.onGround) player.jump() - 跳跃不是“按下就起跳”，而是分状态：idle → jumping → falling → landed，用
player.state管理，防止二段跳失控
不复杂但容易忽略：Canvas像素默认是抗锯齿的，跑酷游戏建议关掉以保持像素风锐利——加一句ctx.imageSmoothingEnabled = false就行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
