SetInterval在JavaScript對象中表現怪異

我一直在做一個畫布遊戲，我一直在嘗試使用對象和方法來實現這一點。現在我遇到了一個問題。這很難解釋。基本上有一堆正方形應該隨機移動。方形對象內部的方法使用setInterval方法每1/10秒移動一次方形。每10秒添加一個新的方形。一旦新廣場被添加，就會出現問題。除1平方以外的所有移動。其他人被凍結（他們不應該）。我希望我能夠解釋它夠好，這裏是問題領域。SetInterval在JavaScript對象中表現怪異

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

和方創作者：

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

你可以看看它在行動here

來源

2016-05-14 Squirrel

注意運動如何得到越來越多的不穩定添加了每平方？

您在this.move函數中忘記了var color, cordX, cordY，這意味着這些變量現在是全局變量，每個正方形只針對任何正方形而不是其本身。這就是爲什麼只有一個方塊移動。

來源

2016-05-14 09:08:33

SetInterval在JavaScript對象中表現怪異

回答

相關問題