SetInterval wirkt seltsam in JavaScript-Objekt

Question

Ich habe an einem Leinwandspiel gearbeitet, und ich habe versucht, Objekte und Methoden zu verwenden, um dies zu erreichen. Im Moment habe ich ein Problem damit. Es ist schwer zu erklären. Grundsätzlich gibt es eine Menge Quadrate, die sich zufällig bewegen sollen. Die Methode innerhalb des quadratischen Objekts verwendet die setInterval-Methode, um das Quadrat alle 1/10 Sekunden zu verschieben. Alle 10 Sekunden wird ein neues Quadrat hinzugefügt. Sobald das neue Quadrat hinzugefügt wird, treten die Probleme auf. Alle außer 1 Quadratzug. Die anderen werden eingefroren (was sie nicht sollten). Ich hoffe ich kann es gut genug erklären, hier sind die Problembereiche.

function enemy(clr, cx, cy) { 
    this.color = clr; 
    this.cordX = cx; 
    this.cordY = cy; 
    this.move = function() { 
     color = this.color; 
     cordX = this.cordX; 
     cordY = this.cordY; 
     setInterval(function() { 
      var direction = Math.floor(Math.random() * 4); 
      switch (direction) { 
       case 0: 
        if (cordX + 20 <= 480) { 
         context.clearRect(cordX, cordY, 20, 20); 
         cordX = cordX + 20; 
         context.fillStyle = color; 
         context.fillRect(cordX, cordY, 20, 20); 
        } 

        break; 
       case 1: 
        if (cordX - 20 >= 0) { 
         context.clearRect(cordX, cordY, 20, 20); 
         cordX = cordX - 20; 
         context.fillStyle = color; 
         context.fillRect(cordX, cordY, 20, 20); 
        } 
        break; 
       case 2: 
        if (cordY + 20 <= 480) { 
         context.clearRect(cordX, cordY, 20, 20); 
         cordY = cordY + 20; 
         context.fillStyle = color; 
         context.fillRect(cordX, cordY, 20, 20); 
        } 
        break; 
       case 3: 
        if (cordY - 20 >= 0) { 
         context.clearRect(cordX, cordY, 20, 20); 
         cordY = cordY - 20; 
         context.fillStyle = color; 
         context.fillRect(cordX, cordY, 20, 20); 
        } 
        break; 
      } 

     }, 100); 
    } 
} 

und der Platz Schöpfer:

var newEnemy = new enemy("rgb(" + Math.floor(Math.random() * 200) + "," + Math.floor(Math.random() * 200) + "," + Math.floor(Math.random() * 200) + ")", Math.floor(Math.random() * ((500 - 0)/20)) * 20 + 0, Math.floor(Math.random() * ((500 - 0)/20)) * 20 + 0); 
newEnemy.move(); 
enemyNum = enemyNum + 1; 
}, 10000); 

Sie es in Aktion sehen können here

Answer 1

Beachten Sie, wie die Bewegung mit jedem Quadrat hinzugefügt zunehmend unberechenbarer wird?

Sie haben var color, cordX, cordY in Ihrer Funktion vergessen, was bedeutet, dass diese Variablen jetzt global sind und jedes Quadrat nur an dem Quadrat arbeitet, das zuletzt an seiner Stelle war. Deshalb bewegt sich nur ein Quadrat.