使用p5.play开发太空侵略者时敌人精灵触边消失问题求助

我用学校指定的p5.play开发《太空侵略者》，把无类结构的教程代码改成类结构后，敌人精灵碰到屏幕右边缘就全部消失，查不出原因。刚接触这个开发环境，卡壳了。期望效果是敌人触边后下移并改变移动方向，相关问题分析及修复方案如下：

核心错误点 #

• 边缘检测逻辑失效：用enemies[i].position.x == windowWidth判断右边缘，精灵的position是中心坐标，且精确匹配几乎无法触发（精灵逐帧移动会跳过该值），导致逻辑异常。需基于精灵的实际边缘位置判断。
• 无效属性调用：enemies.h是错误用法——enemies是Group对象，没有h属性，赋值NaN会导致精灵位置异常消失，应使用单个精灵的height属性。
• 非标准属性引用：Enemy类move方法中使用this.sprite.pos.x，建议改用p5.play标准的this.sprite.position.x（或简写this.sprite.x）。

修复后的完整代码 #

let stars;
let star;
let numStars;

let players;
let player; 
let playerWidth;
let playerHeight;

let alienImg;
let enemies;
let enemy;

let left;
let right;

let rows;
let cols;

function preload() {
  alienImg = loadImage('images/alien11s.png');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  stars = new Group();
  players = new Group();
  enemies = new Group();

  numStars = random(100, 250);
  for(let x = 0; x < numStars; x++) {
    star = new Star();
    stars.add(star.sprite);
  }

  playerWidth = 50;
  playerHeight = 20;
  player = new Player();
  players.add(player.sprite);

  rows = 5;
  cols = 10;

  for(let x = 1; x < cols + 1; x++) {
    for(let y = 1; y < rows + 1; y++) {
      enemy = new Enemy(x, y);
      enemies.add(enemy.sprite);
    }
  }
  
}

function draw() {
  background('black');
  left = false;
  right = false;

  // 修正边缘检测：基于精灵左右边界判断
  for(let i = 0; i < enemies.length; i++) {
    const enemySprite = enemies[i];
    if(enemySprite.position.x - enemySprite.width/2 <= 0){
      right = true;
    } else if(enemySprite.position.x + enemySprite.width/2 >= windowWidth) {
      left = true;
    }
  }

  if(right) {
    for(let i = 0; i < enemies.length; i++) {
      enemies[i].position.y += enemies[i].height;
      enemies[i].vel.x *= -1;
    }
  }else if(left) {
    for(let i = 0; i < enemies.length; i++) {
      enemies[i].position.y += enemies[i].height;
      enemies[i].vel.x *= -1;
    }
  }

  stars.draw();
  player.playerMove();
  players.draw();
  for(let i = 0; i < enemies.length; i++) {
    enemies[i].move();
  }
  enemies.draw();
}


class Star {
  constructor() {
    this.posX = random(5, windowWidth - 5);
    this.posY = random(5, windowHeight - 5);
    this.sprite = createSprite(this.posX, this.posY);
    this.sprite.diameter = 2;
    this.sprite.collider = 'n';
    this.sprite.shapeColor = color('yellow');
  }
}

class Player {
  constructor() {
    this.sprite = createSprite(windowWidth / 2, windowHeight - playerHeight, playerWidth, playerHeight)
  }

  playerMove() {
    if(kb.pressing('left')) {
      this.sprite.move(5, 'left', 5);
    }else if(kb.pressing('right')) {
      this.sprite.move(5, 'right', 5);
    }
  }
}

class Enemy {
  constructor(posX, posY) {
    this.w = 40;
    this.h = 40;
    this.speed = 5;
    this.sprite = createSprite(posX * this.w * 2, posY * this.h * 2, this.w, this.h);
    this.sprite.vel.x = 3;
    this.sprite.image = alienImg;
    this.sprite.scale = 0.5;
    this.sprite.collider = 'n';
  }

  move() {
    this.sprite.position.x += this.sprite.vel.x;
  }
}

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