javascript - 添加和删​​除数组

Question

我不知道如何表达这个问题，因为我实际上不知道到底是什么导致了这个错误。我正在尝试制作一个简单的小行星仿制品。

当玩家射击时，会使用 array.push(...) 创建一个新对象(子弹)。 。一旦该项目符号超出 Canvas (出界)，就会使用array.splice(...);将其删除。

问题在于子弹以不可预测的方式移动。我不知道如何表达，所以这是完整的代码(有效，包括 html/css):https://pastebin.com/tKiSnDzX按住空格键几秒钟(进行拍摄)，您就会清楚地看到问题。您还可以使用 A/D 转向，W 前进。

这就是我认为正在发生的事情。只要屏幕上(在数组中)只有一颗项目符号，代码就可以正常运行。这意味着要么删除了不正确的元素，要么进入对象构造函数的值在此过程中的某个地方发生了困惑。

图表 A(项目符号构造函数及其方法):

function Bullet(x,y,rot,vel) {
    this.x = x;
    this.y = y;
    this.rot = rot;
    this.vel = (vel+5);

    this.move = function() {
        this.x += this.vel*Math.cos(this.rot-Math.PI/2);
        this.y += this.vel*Math.sin(this.rot-Math.PI/2);
    }

    this.draw = function() {
        engine.circle(this.x, this.y, 4, "black");

        var c = engine.canvas.getContext('2d');
        c.translate(this.x, this.y);
        c.rotate(this.rot);
        c.beginPath();
        c.strokeStyle="#00FF00";
        c.strokeRect(-5, -5, 10, 10);
        c.closePath();
        c.stroke();
    }
}

附件 B(创建/删除项目符号的函数):

shoot: function() {
            if(engine.keyDown.sp == true) {
                if(this.fire > 20) {
                    engine.bullets.unshift(new Bullet(this.x, this.y, this.rot, this.velocity));
                    this.fire = 0;
                } else {
                    this.fire++
                }
            }
            for(i = 0; i < engine.bullets.length; i++) {
                engine.bullets[i].move();
                engine.bullets[i].draw();
                if(engine.bullets[i].x > engine.canvas.width+5 || engine.bullets[i].x < -5 
                || engine.bullets[i].y > engine.canvas.height+5  || engine.bullets[i].y < -5) {
                    console.log('bullet gone, '+i);
                    engine.bullets.splice(i, 1);
                }
            }
        }

数组声明如下:bullets: []

感谢您的回答。

Answer 1

当你在循环中遇到任何需要死亡的子弹时，用engine.bullets[i].dead = true;之类的东西来标记它们怎么样？然后，在循环外的最后，用 engine.bullets = engine.bullets.filter(b => !b.dead); 过滤掉死子弹。