Space Invaders non si muove all'unisono (Javascript)

Question

In primo luogo, sono nuovo alla programmazione e Stackoverflow mi spaventa, ma ho cercato di contenere tutto il codice pertinente e di spiegare bene il mio problema. Ho visto molti altri post riguardanti persone che tentano di creare cloni di Space Invaders e, in particolare, gli "invasori" che non si muovono all'unisono. Tuttavia, questi post non hanno risolto il mio problema e sarei davvero grato se qualcuno potesse indicare dove potrei aver sbagliato.

Il prototipo è disponibile here. Codice completo here

Il codice contiene commenti su di me che cercano di sminuire il codice :). Sto usando la libreria "processing.js" ma questo non dovrebbe impedire a nessuno di capire il mio codice.

Il mio problema specifico è che il comportamento degli invasori durante lo spostamento sull'asse X non è coerente e non si spostano sempre nello stesso momento. All'inizio sembra che tutto vada bene (meno il primo invasore è un po 'lento) ma nel tempo il comportamento diventa irregolare e cominciano a muoversi fuori linea.

Capisco già la falla nella mia logica, ma non so come risolverlo. Tuttavia, prima di spiegare ..

passo per caricare gli invasori spaziali in una matrice 2D in questo modo:

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); 
    } 

Il mio nemico di classe è:

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); 
    }; 

Essi sono disegnati e si è trasferito nella " draw "(in pratica la versione di" update ") di elaborazione. In questo modo:

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(); 

    } 
} 

Poi (dove il problema più probabile è) mi occupo di movimento in questo modo:

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; 


}; 

Ora, io credo/sapere che il problema è che sto interating attraverso le matrici e controllo il primo e l'ultimo elemento per monitorare la posizione X. Pertanto, ci sarà un certo ritardo tra il programma che cambia direzione e con esso trovare un oggetto che soddisfi i criteri dell'istruzione if/else. (Spero che abbia un senso).

Ho pensato di creare in qualche modo un oggetto colonna con il proprio asse X e Y indipendente e di contenere gli invasori lì dentro. In questo modo non ho bisogno di affidarmi ai singoli "invasori" che attivano i criteri dell'istruzione if/else. Tuttavia, qualcuno conosce un altro/approccio più semplice o un divario diverso nella mia logica?

Answer 1

Prova qualcosa del genere - 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); 
};