在没有 JS 库的情况下在 <canvas> 上为 spritesheet 设置动画 [重复]

Question

下午好。正如标题所述，我正在尝试在画布元素上为我正在制作的简单 2d 游戏制作 2d spritesheet 动画。我浏览了近十几篇文章，但没有找到我要找的东西，这是关于如何在没有任何图书馆帮助的情况下进行此操作的说明。您可能会对我说，先生，如果您不打算利用这种可以让您的生活更轻松的免费技术，那么您就是疯了。我对此的回应是，我这样做是为了学习，因为我想成为一个更好的 javascript 开发人员，并成长为编写更大更好的游戏。话虽如此，我想我的问题是：如何为精灵表设置动画？ （我希望玩家能够用箭头键输入方向）不要搞错：我不是要求任何人为我编写代码，而是我在问我在哪里可以找到资源来教自己如何做到这一点我自己的。谢谢大家，非常感谢。

Answer 1

答案是：画布+RequestAnimationFrame。这里有一个很棒的教程：http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

几个月前我正在寻找一个 html5 + javascript 2d 游戏项目加入。如果您有兴趣，我想在这个项目上与您合作。让我知道并享受本教程

您可以创建一个简单的动画循环，在您的 html 文档中创建一个画布：

<canvas id="cvs"></canvas>

这将是你的“游戏板”

然后您可以在其中定义游戏引擎的地方创建一个 javascript 文件。 您可以像这样在图像元素中加载外部图像：

var myImage = new Image();
myImage.src = "my-sprite-animation.png";

并定义一个精灵：

var mySprite = sprite({
  context: canvas.getContext("2d"),
  width: 100,
  height: 100,
  image: coinImage
});

然后使用 requestAnimationFrame 方法创建动画循环：

function gameLoop () {
  window.requestAnimationFrame(gameLoop); 
  mySprite.update();
  mySprite.render();
}