Space Invaders không di chuyển trong unison (Javascript)

Question

Thứ nhất, tôi mới lập trình và Stackoverflow làm tôi sợ, nhưng tôi đã cố gắng chứa tất cả các mã có liên quan và giải thích tốt vấn đề của tôi. Tôi đã thấy nhiều bài viết khác liên quan đến những người cố gắng để làm cho Space Invaders nhái và thậm chí đặc biệt là "kẻ xâm lược" không di chuyển đồng loạt. Tuy nhiên, những bài viết này đã không giải quyết được vấn đề của tôi và tôi sẽ rất biết ơn nếu ai đó có thể chỉ ra nơi tôi có thể đã đi sai.

Nguyên mẫu có sẵn here. Toàn bộ mã here

Mã có chứa các nhận xét của tôi đang cố gắng tắt mã :). Tôi đang sử dụng thư viện "processing.js" nhưng điều này không nên cản trở bất kỳ ai hiểu mã của tôi.

Vấn đề cụ thể của tôi là hành vi của kẻ xâm lược khi di chuyển trên trục X không nhất quán và chúng không phải lúc nào cũng di chuyển cùng một lúc. Lúc đầu, có vẻ như mọi thứ đều tốt (trừ khi kẻ xâm lược đầu tiên bị lag một chút) nhưng theo thời gian thì hành vi trở nên thất thường và họ bắt đầu di chuyển ra khỏi hàng.

Tôi thực sự hiểu được lỗ hổng trong logic của tôi, nhưng tôi không biết cách giải quyết nó. Tuy nhiên, trước khi tôi giải thích ..

tôi nạp những kẻ xâm lược không gian thành một mảng 2ngày như vậy:

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

lớp kẻ thù của tôi là:

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

Chúng được rút ra và được chuyển vào " vẽ "(về cơ bản là phiên bản" cập nhật ") của processing.js). Cũng giống như vậy:

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

    } 
} 

Sau đó (nơi mà vấn đề rất có thể là) tôi xử lý phong trào như vậy:

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; 


}; 

Bây giờ, tôi tin/biết rằng vấn đề là tôi đang interating qua mảng và kiểm tra mục đầu tiên và cuối cùng để theo dõi vị trí X. Do đó, sẽ có một số độ trễ giữa chương trình thay đổi hướng và với nó tìm một đối tượng đáp ứng các tiêu chí của câu lệnh if/else. (Tôi hy vọng điều đó đúng).

Tôi đã nghĩ bằng cách nào đó tạo ra một đối tượng cột với trục X và Y độc lập của riêng nó và để chứa các kẻ xâm lược trong đó. Bằng cách đó tôi không cần phải dựa vào "kẻ xâm lược" cá nhân kích hoạt tiêu chí của tuyên bố if/else. Tuy nhiên, không ai biết một cách tiếp cận khác/dễ dàng hơn hoặc một khoảng cách khác nhau trong logic của tôi?

Answer 1

Hãy thử một cái gì đó như thế này - 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); 
};