Javascript 游戏 - IIFE 之间的废物管理

Question

概述

大家好！ - 我正在创建一个横向卷轴太空射击游戏（类似于旧游戏，仍在学习中！） - 我想知道如何更好地管理我的对象以防止资源浪费！

所以，在我的代码中，我为播放器创建了一个 IIFE，并为射弹创建了一个构造函数。玩家聆听游戏画布上的点击，当它听到点击时，它会创建一个弹丸并将其附加到玩家内的一个对象上。但是，当弹丸到达屏幕的右侧时，我希望它被销毁，以便从玩家的弹丸对象中移除，并让弹丸的所有更新和绘制功能结束。到目前为止，我已经设法停止它的绘制和更新，但我还不能将它从 Players projectile 对象中删除。希望下面的代码能更好地展示我正在尝试做的事情。

示例

var Player = (function () {
    var width = 50;
    var height = 50;
    var x = 0;
    var y = 0;
    var projectiles = [];

    var update = function () {
        for (var p = 0; p < projectiles.length; p++) {
            if(!projectiles[p].destroyed)projectiles[p].update();
        }
    };

    var draw = function () {
        Canvas.context.fillStyle = 'white';
        Canvas.context.fillRect(x, y, width, height);

        for (var p = 0; p < projectiles.length; p++) {
            if(!projectiles[p].destroyed)projectiles[p].draw();
        }
    };

    Canvas.bindEvent('mousemove', function (e) {
        //x = e.pageX - Canvas.element.getBoundingClientRect().left;
        y = e.pageY - Canvas.element.getBoundingClientRect().top;
    });

    Canvas.bindEvent('click', function () {
        projectiles.push(new Projectile(width, y + (height / 2)));
    });

    return {
        draw: draw,
        update: update
    }
})();

var Projectile = function (x, y) {
    this.w = 10;
    this.h = 10;
    this.x = x;
    this.y = y;
    this.speed = 5;
    this.destroyed = false;

    this.update = function () {
        this.x += this.speed;

        if(this.x > Canvas.element.width){
            this.destroyed = true;
            this.x = 0;
            console.log('Projectile Destroyed!');
        }
    };

    this.draw = function(){
        Canvas.context.fillStyle = 'red';
        Canvas.context.fillRect(this.x, this.y, this.w, this.h);
    };
};

Js 小提琴

这是我当前在一个半工作的 JS fiddle 中的代码，因此可以在上下文中查看上面的代码。如果这个问题不清楚，请在 cmets 中告诉我，我会尽力澄清。谢谢大家！

https://jsfiddle.net/tzzgwr1w/

Answer 1

您可以在更新方法中删除已损坏的，但您需要从数组末尾循环。

var update = function () {
    for (var p = projectiles.length - 1; p >= 0; p--) {
        if(!projectiles[p].destroyed)projectiles[p].update();
        else projectiles.splice(p,1);
    }
};

假设您有一个从 0 到 X 的基本循环。 如果删除索引 0 处的元素，则数组将移动，这意味着索引 1 处的对象将位于索引 0 处。 但下一个循环将执行 i++，则不会检查位于索引 0 处的对象。

Answer 2

试试这个代码：

var update = function () {
    for (var p = arr.length-1; p >= 0; p--) {
        projectiles[p].update();
        if (projectiles[p].destroyed) projectiles.splice(p, 1);
    }
};

这应该是对播放器函数/类中更新函数的小修改。更新射弹后，它会检查射弹是否将自己声明为已销毁，如果是，则将其移除。 splice 删除索引 p 处的元素。

Answer 3

在这里使用拼接有点浪费资源。我建议对阵列进行线性扫描。下面的算法将就地过滤弹丸数组：

function removeDestroyeds(arr) {
  for (var i=0, j=0; j < arr.length; j++) {
    if (!arr[j].destroyed) {
      arr[i++] = arr[j];
    }
  }
  arr.length = i;
}

....

var update = function () {
    for (var p = 0; p < projectiles.length; p++) {
        projectiles[p].update();
    }
    removeDestroyeds(projectiles);
};

var draw = function () {
    Canvas.context.fillStyle = 'white';
    Canvas.context.fillRect(x, y, width, height);

    for (var p = 0; p < projectiles.length; p++) {
        projectiles[p].draw();
    }
};

....

更新：

@Haketo 和我做了一个快速基准测试：http://jsperf.com/splice-nosplice/11

Answer 4

在您的更新循环中，您可以使用.splice() 移除被摧毁的弹丸。为了不跳过 projectiles 数组中的项目，您需要反向迭代。

for (p = projectiles.length-1; p >= 0; p--) {
    if(projectiles[p].destroyed) {
        projectiles.splice(p, 1);
    } else {
        projectiles[p].update();
    }
}