p5.js敌人精灵按指定距离来回移动后消失问题求助

问题根因 #

• 你使用了if/else if互斥分支控制两个独立的敌人位置变量enemystart、enemyp1的绘制逻辑，只要第一个分支条件触发，第二个分支就不会执行；当任意一个变量跑出[-100, 0]的判断范围后，就没有对应分支负责绘制该精灵，自然会出现消失的问题。
• 你不需要拆分两个变量分别存储左右移动的位置，用同一个变量存敌人当前坐标、搭配方向变量控制朝向即可，逻辑更简洁也不会出现绘制断档的问题。

修复方案 #

单敌人来回移动实现 #

先初始化相关变量：

// 参数可根据需求自行调整
let enemyX = 0; // 敌人初始X坐标
const enemySpeed = 2; // 移动速度
let enemyDirection = 1; // 1代表向右移动，-1代表向左移动
const leftBoundary = -100; // 移动范围左边界
const rightBoundary = 0; // 移动范围右边界

再替换原有每帧的更新、绘制逻辑：

// 更新坐标
enemyX += enemySpeed * enemyDirection;
// 碰到边界翻转方向
if (enemyX <= leftBoundary || enemyX >= rightBoundary) {
  enemyDirection *= -1;
}
// 根据方向选择对应朝向的精灵绘制
if (enemyDirection < 0) {
  image(zombieL[frameCount % 10], enemyX, floorPos_y - 58, 60, 60); 
} else {
  image(zombie[frameCount % 10], enemyX, floorPos_y - 58, 60, 60);
}

双敌人分别移动实现 #

如果你原本的逻辑是要做两个独立的敌人分别移动，直接把原有代码里的else if改成if即可，两个分支独立判断，不会互相跳过：

if(enemystart <= 0 && enemystart >= -100) {
  enemystart = enemystart + (enemyspeed * enemydirection * -1);
  image(zombieL[frameCount % 10], enemystart, floorPos_y - 58, 60, 60); 
}
// 去掉else，两个分支独立执行
if(enemyp1 >= -100 && enemyp1 <= 0) {
  enemyp1 = enemyp1 + (enemyspeed * enemydirection);
  image(zombie[frameCount % 10], enemyp1, floorPos_y - 58, 60, 60);
}

内容的提问来源于stack exchange，提问作者felix chombe