Sprite Sheet funktioniert nicht

Also habe ich ein Online-Tutorial (onlyWebPro.com) verwendet, um meinen Weihnachtsmann über meinen Bildschirm laufen zu lassen. Aber es wird sich einfach nicht bewegen. Ich benutze ein frameCount, also verstehe ich nicht wirklich, warum es sich nicht bewegt. Kann mir jemand helfen? Bitte sei einfach zu mir, ich bin ein Student.Sprite Sheet funktioniert nicht

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

Quelle

2016-10-30 M.MFG

Sie haben in dieser Linie für die Position des Bildes fest codierte Werte bekommen:

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

Stattdessen könnten Sie x und y Variablen hinzufügen, was zu einem erhöhten würde jeder Rahmen. Lassen Sie uns Ihre draw Funktion ändern folgendes zu tun:

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

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

Vergessen Sie auch nicht x und y auf Ihre Script-Tag zu definieren:

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

Quelle

2016-10-30 22:06:36 Selenir

Sprite Sheet funktioniert nicht

Antwort

Verwandte Themen