Sprite工作表不會工作

所以我用一個在線教程（僅限WebPro.com）來讓我的聖誕老人在我的屏幕上運行。但它不會移動。我正在使用frameCount，所以我不明白爲什麼它沒有移動。誰能幫我？請容易對我，我是一名學生。Sprite工作表不會工作

<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Santa</title> 
</head> 
<body> 
    <canvas id="myCanvas" width="1000" height="1000"> 
     Sorry, your browser doesn't support canvas technology 
    </canvas> 
<script> 
    var width = 100, 
      height = 100, 
      frames = 5, 

      currentFrame = 0, 

      canvas = document.getElementById("myCanvas"); 
      ctx = canvas.getContext("2d"); 
      image = new Image() 
      image.src = 'img/santa-run-sequence.png'; 

    var draw = function(){ 
      ctx.clearRect(0, 0, width, height); 
      ctx.drawImage(image, 390, 1, 128.333, 210, 100, 500, 128.333, 210); 

      if (currentFrame == frames) { 
       currentFrame = 0; 
      } else { 
       currentFrame++; 
      } 
    } 

    setInterval(draw, 100);

</body> 
</html>

來源

2016-10-30 M.MFG

你有硬編碼值在此行中圖像的顯示位置：您可以添加x和y變量

ctx.drawImage(image, 390, 1, 128.333, 210, 100, 500, 128.333, 210);

相反，這將在增加每一幀。讓我們來修改你的draw功能做到以下幾點：

ctx.drawImage(image, x, y, 128.333, 210); 

if (currentFrame == frames) { 
    currentFrame = 0; 
} else { 
    x += 5 
    y += 5 
    currentFrame++; 
}

也不要忘了在你的腳本標籤的頂部定義x和y：

var x = 10; // start X position 
var y = 10; // start Y position

來源

2016-10-30 22:06:36 Selenir

Sprite工作表不會工作

回答

相關問題