Лист спрайтов не работает

Итак, я использовал онлайн-учебник (onlyWebPro.com), чтобы мой Санта-Клаус пробежал мой экран. Но он просто не сдвинется с места. Я использую frameCount, поэтому я действительно не понимаю, почему он не движется. Может кто-нибудь мне помочь? Пожалуйста, успокойся, я студент.Лист спрайтов не работает

<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

Вы должны жестко закодированные значения для положения изображения в этой строке:

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

Вместо этого вы могли бы добавить x и y переменные, которые будут увеличены в каждый кадр. Давайте изменим вашу 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

ответ

Смежные вопросы