javascript - 太空入侵者没有一致移动(Javascript)

Question

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

样机可用here . 完整代码 here

代码包含我试图简化代码的评论:)。我正在使用“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);
};