HTML5游戏角色移动需用requestAnimationFrame驱动每帧更新坐标并重绘，禁用CSS动画；须记录键状态、设canvas焦点、基于deltaTime计算位移、注意drawImage坐标偏移。
HTML5 游戏中角色移动不是靠 position 动画硬推，而是靠每帧更新 x、y 坐标 + 重绘实现的——这是 Canvas 或 WebGL 渲染逻辑决定的，用 CSS transition 或 transform 移动角色会导致状态脱节、碰撞检测失效、输入响应延迟。
用 requestAnimationFrame 驱动移动循环
角色移动必须放在主渲染循环里，否则会卡顿或跳帧。不能用 setInterval 或点击事件直接改坐标后 draw 一次。
-
requestAnimationFrame保证与屏幕刷新率同步（通常是 60fps），且在页面不可见时自动暂停 - 移动逻辑写在循环内：读取按键状态 → 计算新坐标 → 边界检查 → 绘制角色
- 避免在循环里做 DOM 查询或创建对象，比如反复调用
document.getElementById或new Image()
let player = { x: 100, y: 100, speed: 4 };
const keys = {};
<p>function update() {
if (keys['ArrowLeft']) player.x = Math.max(0, player.x - player.speed);
if (keys['ArrowRight']) player.x = Math.min(canvas.width - 32, player.x + player.speed);
if (keys['ArrowUp']) player.y = Math.max(0, player.y - player.speed);
if (keys['ArrowDown']) player.y = Math.min(canvas.height - 32, player.y + player.speed);
}</p><p>function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(playerImg, player.x, player.y, 32, 32);
}</p><p>function gameLoop() {
update();
render();
requestAnimationFrame(gameLoop);
}
gameLoop();监听键盘事件要防重复触发和焦点丢失
原生 keydown/keyup 在长按时会触发重复事件，但游戏需要“持续按下”语义；同时 canvas 默认不获取焦点，键盘事件可能根本收不到。
- 用
keys对象记录键状态（布尔值），keydown设为true，keyup设为false，不依赖事件频率 - 给
canvas加tabindex="0"，再调用canvas.focus()，否则首次点击 canvas 后才能响应键盘 - 注意浏览器快捷键干扰（如 F5 刷新、Ctrl+R），可在
keydown中对event.preventDefault()做条件拦截
移动方向与速度控制：别直接用像素/帧硬编码
固定每帧加减 4 这种写法在高刷屏（120Hz）或低性能设备上会明显变速，导致体验割裂。
立即学习“前端免费学习笔记（深入）”；
- 改用基于时间的位移：
deltaTime（上一帧到当前帧的毫秒数），例如player.x += speed * deltaTime * 0.016（对标 60fps 的基准帧时） - 方向向量更可控：把上下左右映射为
{x: 0, y: -1}等单位向量，再乘以速度和时间，方便后续加旋转、斜向移动 - 加速度/摩擦力？先确保匀速移动稳定，再引入
velocity和acceleration变量，避免直接操作x/y
Canvas 坐标系和图像绘制常见错位
角色“看起来没动”或“动得不对”，80% 是坐标理解偏差或绘制时机问题。
-
drawImage(img, x, y)的x、y是图像左上角位置，不是中心点——如果角色图像是居中绘制的，需手动偏移：ctx.drawImage(img, x - img.width/2, y - img.height/2) - Canvas 的
y轴向下为正，和数学习惯相反，但和屏幕一致；别和 SVG 或 CSS 的transform: scaleY(-1)混用 - 清屏用
clearRect，别用fillRect填黑底——前者更快，且不会遮盖半透明效果
真正难的不是让角色“动起来”，而是动得准、停得稳、转向自然、能被其他系统（碰撞、动画、网络同步）可靠感知——这些都建立在坐标更新和渲染节奏严格统一的基础上。
