检查项目符号对象是否离开屏幕并从数组中移除

Question

我有一个子弹系统，可以沿 y 轴创建和发射子弹（椭圆）。我想检查子弹是否已经离开屏幕，以便我可以将它从子弹数组中删除，但我不确定如何检查。函数 edges() 用于检查子弹是否已经离开屏幕。这个 class 在另一个 main class 中被引用，所以这里没有函数 setup()。

class BulletSystem {

  constructor(){
    this.bullets = [];
    this.velocity = new createVector(0, -5);
    this.diam = 10;
  }

  run(){
      this.move();
      this.draw();
      this.edges();
  }

  fire(x, y){
    this.bullets.push(createVector(x,y));
  }

  //draws all bullets
  draw(){
    fill(255);
    for (var i=0; i<this.bullets.length; i++){
      ellipse(this.bullets[i].x, this.bullets[i].y, this.diam, this.diam);
    }
  }

  //updates the location of all bullets
  move(){
    for (var i=0; i<this.bullets.length; i++){
      this.bullets[i].y += this.velocity.y;
    }
  }

  //check if bullets leave the screen and remove them from the array
  edges(){
    if(this.bullets.y > window.innerHeight){
        this.bullets.splice(0, 1);  
    }
  }
}

Answer 1

所以首先您可能想使用 height 而不是 window.innerHeight。变量 height 由 p5js 提供并为您提供 canvas 的高度，这可能与 window.innerHeight.

不同

其次，您的条件 if(this.bullets.y > window.innerHeight) 没有意义，因为 this.bullets 是一个数组：它没有 y 属性.

在所有其他函数中，您遍历 this.bullets 数组以作用于每个项目符号对象：在这里您想要做同样的事情，例如像这样：

//check if bullets leave the screen and remove them from the array
edges(){
  let i=this.bullets.length - 1;
  while (i>=0) {
      if(this.bullets[i].y > height){
          this.bullets.splice(i, 1);  
      }
      i--;
  }
}

这将从末尾开始遍历数组，对于每个索引检查项目符号是否仍在 canvas 中，如果需要则将其删除并递减下一个索引 i 以进行评估。

Answer 2

您可以参考以下版本：

let bull = [];
let obs;

function setup() {
  createCanvas(400, 400);
 obs = 300;
}

function draw() {
  background(220);
  
  line(0,obs,width,obs);
  
  for (i = 0; i < bull.length; i++) {
    bull[i].show();
    bull[i].move();    
    if(bull[i].y < 0 || bull[i].y + bull[i].w>= obs)
      bull.splice(i,1);
  }
}

function keyTyped() {
  append(bull, new Bullets(mouseX, mouseY, 0, 1));
}


class Bullets {

  constructor(x, y, xdir, ydir) {
    this.x = x;
    this.y = y;
    this.w = 10;
    this.xdir = xdir;
    this.ydir = ydir;
    this.speed = 3;
  }

  show() {
    ellipse(this.x, this.y, this.w, this.w);
  }

  move() {
    this.x += this.xdir * this.speed;
    this.y += this.ydir * this.speed;
  }
}

子弹一旦击中障碍物就会从阵列中移除，在本例中就是直线。

检查项目符号对象是否离开屏幕并从数组中移除

Check if bullet object has left the screen and remove from array

javascript

p5.js