本文详解 p5.js 中因坐标系混淆导致的“僵尸奔向原点而非玩家”的典型 bug，重点修正 ZombieHandler.render() 中的渲染坐标计算错误，并提供健壮的朝向向量实现方案。
本文详解 p5.js 中因坐标系混淆导致的“僵尸奔向原点而非玩家”的典型 bug，重点修正 `zombiehandler.render()` 中的渲染坐标计算错误，并提供健壮的朝向向量实现方案。
在 p5.js 开发 2D 追逐类游戏时，一个常见却隐蔽的 bug 是：敌人（如僵尸）看似在追逐玩家，实则被锚定在画布原点 (0, 0) 附近打转——这往往并非运动逻辑出错，而是渲染坐标与世界坐标混用所致。
回顾问题代码中的关键片段：
// ❌ 错误：将世界坐标直接叠加到玩家位置上渲染
rect(zombie[0] + Player.posX + winX / 2,
zombie[1] + Player.posY + winY / 2,
30, 30, 5, 5, 5, 5);此处 zombie[0] 和 zombie[1] 是僵尸在世界坐标系中的绝对位置（例如 [2000, -500]），而 Player.posX/posY 也是世界坐标（如 [50, 50]）。但渲染时需将所有对象转换为屏幕坐标：即以玩家为中心、经相机偏移后的相对位置。
正确逻辑应为：
屏幕 X = 僵尸世界 X − 相机 X + 画布中心 X
屏幕 Y = 僵尸世界 Y − 相机 Y + 画布中心 Y
而你的 render() 方法中错误地写成了 zombie[0] + Player.posX，相当于把两个世界坐标相加，导致僵尸始终被“拉”向 (0, 0) 附近（因 Player.posX 在移动中频繁接近零或负值，叠加后产生漂移）。
✅ 正确的渲染实现如下：
class ZombieHandler {
render(Player) {
this.list.forEach(zombie => {
// ✅ 关键修正：使用 camera 偏移量（即 Player.posX/posY 实际代表相机反向位移）
// 屏幕位置 = 僵尸世界位置 - 相机位置 + 画布中心
const screenX = zombie[0] - Player.posX + winX / 2;
const screenY = zombie[1] - Player.posY + winY / 2;
fill(0);
rect(screenX, screenY, 30, 30, 5);
});
}
control(Player) {
for (let i = 0; i < this.list.length; i++) {
const z = this.list[i];
// ✅ 使用 p5.Vector 简化向量运算（推荐）
const target = createVector(Player.posX, Player.posY);
const pos = createVector(z[0], z[1]);
const dir = p5.Vector.sub(target, pos); // 从僵尸指向玩家的方向向量
dir.normalize();
dir.mult(z[2]); // 应用速度
z[0] += dir.x;
z[1] += dir.y;
}
}
}? 为什么 Math.atan2() 不是主因？
ZombieHandler.control() 中的 Math.atan2(Player.posY - z[1], Player.posX - z[0]) 逻辑本身正确（计算朝向角度），但若渲染坐标错误，即使运动轨迹正确，视觉上也会表现为“绕原点旋转”。这是典型的「运动正确、显示错位」问题。
? 额外优化建议：
- 避免重复注册事件监听器：将 document.onkeydown / onkeyup 移出 draw()，改在 setup() 中一次性绑定，或使用 p5.js 内置的 keyPressed() / keyReleased() 钩子；
-
防重叠机制：引入简单的分离力（flocking 的 separation 规则），防止僵尸堆叠：
// 在 control() 中添加（伪代码） for (let j = 0; j < this.list.length; j++) { if (i !== j) { const other = this.list[j]; const dist = dist(z[0], z[1], other[0], other[1]); if (dist < 30) { const repel = p5.Vector.sub(pos, createVector(other[0], other[1])); repel.normalize().mult(0.5); z[0] += repel.x; z[1] += repel.y; } } } - 性能提示：createVector() 在循环内创建对象会增加 GC 压力，可复用向量实例或直接用原生数值运算（如上 dir 示例已兼顾可读性与效率）。
总结：在带相机平移的 p5.js 游戏中，务必严格区分 世界坐标（用于逻辑计算）、屏幕坐标（用于渲染）和 相机偏移量（通常等于 -player.worldPosition）。一次坐标的加减号错误，就足以让整个追逐系统失效。
