Spritesheet没有动画化HTML5画布

Question

我一直在尝试让我的播放器制作动画，现在已经有一段时间了，我已经阅读了多个教程，但我似乎无法实现这个目标。我所遵循的教程是在: https:/www.simplifiedcoding.netjavascript-sprite-animation-tutorial-html5-canvas

我创建了一个组件类的播放器。

 mySprite = new component(168, 33, "Images/Run/character.png", 0, 0, "sprite");

然后我创建一个带有更新函数的组件类。

function component(width, height, color, x, y,type) 
{
  this.width = width;
  this.height = height;
  this.type = type;
  if (type == "image" || type == "background" || type == "sprite" ) {
    this.image = new Image();
    this.image.src = color;
  }
  this.x = x;
  this.y = y;


  this.update = function()
  {
  ctx = myGameArea.context;
  if (this.type == "sprite") 
    { 
     var curFrame = 0;
     curFrame = ++curFrame % 8; 
     var srcX =0;       
     srcX = curFrame * this.width /8; 
     ctx.drawImage(this.image,srcX,y,this.width/8,this.height,x,y,this.width/8,this.height);
    } 

  }
  this.newPos = function() 
  {
    this.gravitySpeed += this.gravity;
    this.x += this.speedX;
    this.y += this.speedY + this.gravitySpeed;
    this.hitBottom();
    this.jumpGravity();
    if (this.type == "background") {
      if (this.x == -(this.width)) {
        this.x = 0;
      }
    } 
}
}

然后我在游戏循环中同时调用update和newPos函数。

mySprite.newPos();
  mySprite.update();

我希望有人能告诉我，我做错了什么。

Answer 1

在调试curFrame变量时，我注意到它没有递增。 我把curframe变成了组件类的一个变量，然后直接用下面的方法来增加它。this.curFrame +=1; 在游戏循环中。