太空入侵者没有齐心协力（Javascript）

Question

首先，我是编程新手，Stackoverflow 让我害怕，但我尝试包含所有相关代码并很好地解释我的问题。我看过许多其他关于人们试图制作 Space Invaders 克隆的帖子，甚至特别是“入侵者”没有齐心协力。但是，这些帖子并没有解决我的问题，如果有人能指出我可能出错的地方，我将不胜感激。

原型可用here。 完整代码here

代码包含我试图简化代码的 cmets :)。我正在使用“processing.js”库，但这不应该妨碍任何人理解我的代码。

我的具体问题是入侵者在 X 轴上移动时的行为并不一致，它们并不总是同时移动。起初似乎一切都很好（除了第一个入侵者有点迟钝），但随着时间的推移，行为变得不稳定，他们开始变得不合时宜。

我其实已经明白我的逻辑缺陷，但我不知道如何解决它。但是，在我解释之前..

我将太空入侵者加载到一个二维数组中，如下所示：

var enemies = [];
    for(var i = 0; i < ROWS; i++) {
        var newRow = [];
        for(var y = 0; y < COLS; y++){
            newRow.push(new Enemy(y * 40 + 40, i * 30));
        }
        enemies.push(newRow);
    }

我的敌人是：

   var Enemy = function(x,y) {
        this.height = 30;
        this.width = 30;
        this.x = x;
        this.y = y;
        this.speed = 15;
    };

    Enemy.prototype.draw = function() {
         image(invader, this.x, this.y, this.width, this.height);
    };

它们在“draw”（基本上是 processing.js 的“update”版本）循环中被绘制和移动。像这样：

for(var i = 0; i < enemies.length; i++) {
     var enemy = enemies[i]
     for(var y = 0; y < enemy.length; y++){
         enemy[y].draw();
         enemy[y].move();
         enemy[y].fire();

     }
 }

然后（最有可能出现问题的地方）我像这样处理运动：

    Enemy.prototype.move = function(){
    if(nextAlienMove > millis()){
        return; 
    }
    for(var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i]
        for(var y = 0; y < enemy.length; y++){
            var len = enemies[i].length - 1;
            if(enemies[i][len].x >= width - enemies[i][len].width) {
                this.speed = -15;
            } else if(enemies[i][0].x <= 0) {
                this.speed = 15;
            }
            enemy[y].x += this.speed;      


        }
    }
     nextAlienMove = millis() + alienDelay;


};

现在，我相信/知道问题是我正在遍历数组并检查第一个和最后一个项目以监视 X 位置。因此，在程序改变方向和找到满足 if/else 语句标准的对象之间会有一些延迟。 （我希望这是有道理的）。

我想过以某种方式创建一个具有自己独立 X 和 Y 轴的列对象，并将入侵者包含在其中。这样我就不需要依赖触发 if/else 语句标准的个别“入侵者”。但是，有人知道我的逻辑中的另一种/更简单的方法或不同的差距吗？

Answer 1

试试这样的 - http://codepen.io/sergdenisov/pen/WvxwBE。

var draw = function() {
    background(0);
    player.draw();
    player.fire();

    var isNeedToMove = nextAlienMove <= millis();
    if (isNeedToMove) {
        var speed;
        if (maxX >= width - ENEMY_WIDTH) {
            speed = -15;
            maxX = 0;
        } else if (minX <= 0) {
            speed = 15;
            minX = width;
        }
    }

    for (var i = 0; i < enemies.length; i++) {
        var enemy = enemies[i];
        for (var y = 0; y < enemy.length; y++) {
            if (isNeedToMove) {
                enemy[y].move(speed);
            }
            enemy[y].draw();
            enemy[y].fire();
        }
    }

    if (isNeedToMove) {
        nextAlienMove = millis() + alienDelay;
    }

    ...
}

Enemy.prototype.move = function(speed) {
    if (speed) {
        this.speed = speed;
    }
    this.x += this.speed;
    minX = Math.min(minX, this.x);
    maxX = Math.max(maxX, this.x);
};