對象速度不變（javascript，html canvas）

Question

我創建了一個敵方物體，所以我可以一次製作多個物體。我有對象的參數爲x，y，x的速度和y的速度。無論我在速度上如何放置紅色方塊（敵人）都不會移動。

var c, 
     ctx, 
     cWidth, 
     cHeight, 
     xCenter, 
     yCenter, 
     iBack, 
     Player, 
     enemy1, 
     scale = 40, 
     speed = scale/3; 

    // Controll initialization 
    var keyState = {}; 
    window.addEventListener('keydown',function(e){ 
     keyState[e.keyCode || e.which] = true; 
    },true); 
    window.addEventListener('keyup',function(e){ 
     keyState[e.keyCode || e.which] = false; 
    },true); 

    // Initial function to set canvas variables and start loop 
    function init() { 
     c = document.getElementById('canvas'); 
     ctx = c.getContext('2d'); 
     cWidth = c.width; 
     cHeight = c.height; 
     xCenter = cWidth/2; 
     yCenter = cHeight/2; 

     iBack = new Image(50, 50); 
     iBack.src = 'pics/background1.jpg'; 

     Player = 
     { 
     playerX: xCenter - (scale/2), 
     playerY: yCenter - (scale/2), 
     speed: speed, 
     draw: function() { 
      ctx.beginPath(); 
      ctx.rect(Player.playerX, Player.playerY, scale, scale); 
      ctx.fillStyle = 'blue'; 
      ctx.fill(); 
      ctx.closePath(); 
     }, 
     checkInput: function() { 
      if (keyState[65]) { 
      // A key 
      Player.playerX = Player.playerX - Player.speed; 
      } else if (keyState[68]) { 
      // D key 
      Player.playerX = Player.playerX + Player.speed; 
      } else if(keyState[87]) { 
      // W key 
      Player.playerY = Player.playerY - Player.speed; 
      } else if(keyState[83]) { 
      // S key 
      Player.playerY = Player.playerY + Player.speed; 
      } 
     } 
     }; 

     // Enemy object 
     function Enemy(x, y, speedX, speedY) 
     { 
     this.x = x; 
     this.y = y; 
     this.speedX = speedX; 
     this.speedY = speedY; 
     this.draw = function() { 
      ctx.beginPath(); 
      ctx.rect(this.x + this.speedX, this.y + this.speedY, scale, scale); 
      ctx.fillStyle = 'red'; 
      ctx.fill(); 
      ctx.closePath(); 
     }; 
     } 

     enemy1 = new Enemy(0, (cHeight/2) - (scale/2), 10, 10); 

     setInterval(draw, 60); 
    } 

    function draw() { 
     // Input 
     Player.checkInput(); 

     // Draw Background 
     //ctx.drawImage(iBack, 0, 0, cWidth, cHeight); 
     ctx.beginPath(); 
     ctx.rect(0, 0, cWidth, cHeight); 
     ctx.fillStyle = 'white'; 
     ctx.fill(); 
     ctx.stroke(); 
     ctx.closePath(); 

     // Draw Player 
     Player.draw(); 

     // Draw Enemy 
     enemy1.draw(); 

     // Collision 
     playerCollision(); 
    } 

    function playerCollision() { 
     // Collision with walls 
     if (Player.playerX <= 0) { 
     Player.playerX = 0; 
     } else if (Player.playerX + scale >= cWidth) { 
     Player.playerX = cWidth - scale; 
     } else if (Player.playerY <= 0) { 
     Player.playerY = 0; 
     } else if (Player.playerY + scale >= cHeight) { 
     Player.playerY = cHeight - scale; 
     } 

     // Collsion with enemys 

    } 

Answer 1

你沒有任何東西會導致敵人x值發生變化。你只是用x + speed圖紙，但不會讓它動。那總是會把它拉出來。

通常在你setInterval()，而不是直接調用draw()，做一個名字類似run()其調用draw()表現出與工作變動前，應做一些工作的功能。

在run()，你應該像enemy.x += enemy.speed每個敵人做一些事情。然後，當你畫畫時，每一幀他們會以速度移動。