太空入侵者不能齐声移动(Javascript)

Question

首先,我是编程新手,Stackoverflow让我很害怕,但我试图包含所有相关代码并很好地解释我的问题.我已经看到很多其他关于试图制造太空入侵者克隆人的帖子,甚至还有特别是"入侵者"并没有齐声移动.然而,这些帖子并没有解决我的问题,如果有人能指出我可能出错的地方,我将非常感激.

原型可在此处获得.完整代码在这里

代码包含我试图愚弄代码:)的评论.我正在使用"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);
    };

它们在"绘制"(基本上是processing.js的"更新"版本)循环中绘制和移动.像这样:

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

尝试类似 \xe2\x80\x94 http://codepen.io/sergdenisov/pen/WvxwBE。

\n\n

var draw = function() {\n    background(0);\n    player.draw();\n    player.fire();\n\n    var isNeedToMove = nextAlienMove <= millis();\n    if (isNeedToMove) {\n        var speed;\n        if (maxX >= width - ENEMY_WIDTH) {\n            speed = -15;\n            maxX = 0;\n        } else if (minX <= 0) {\n            speed = 15;\n            minX = width;\n        }\n    }\n\n    for (var i = 0; i < enemies.length; i++) {\n        var enemy = enemies[i];\n        for (var y = 0; y < enemy.length; y++) {\n            if (isNeedToMove) {\n                enemy[y].move(speed);\n            }\n            enemy[y].draw();\n            enemy[y].fire();\n        }\n    }\n\n    if (isNeedToMove) {\n        nextAlienMove = millis() + alienDelay;\n    }\n\n    ...\n}\n\nEnemy.prototype.move = function(speed) {\n    if (speed) {\n        this.speed = speed;\n    }\n    this.x += this.speed;\n    minX = Math.min(minX, this.x);\n    maxX = Math.max(maxX, this.x);\n};\n

\n