javascript - 在 Canvas 上移动对象

Question

我正在尝试在 canvas 中构建游戏，只是为了提高我的技能。这个想法是屏幕上有两个由玩家控制的对象。我与玩家一起初始化游戏，然后启动一个游戏循环来监听玩家输入。

目前，我可以在 Canvas 上绘制玩家(在这个阶段只是矩形)。但是，在游戏循环的每个“滴答声”中，我都无法移动这些对象。目前，矩形只是绘制在前一帧矩形的顶部；我想清除 Canvas 并在每个刻度中重新绘制“玩家”。

我该怎么做？这是最好的方法，还是有更好的方法？

我会发布一个代码示例，但我的 JavaScript 文件非常冗长，我希望上面的描述足够了。

Answer 1

如果玩家的外观在帧与帧之间没有变化，那么我将使用三个单独的 canvas 元素:一个用于背景，一个用于每个玩家。然后您不必重新绘制任何东西，只需更改每个播放器 Canvas 的 CSS left 和 top 值即可。

如果玩家的外观确实发生变化，那么您需要重新绘制它们。但是您仍然可能希望为每个使用单独的 canvas。这样你就不必重新绘制背景。您可以只绘制和定位每个玩家。

当然，如果背景发生变化或移动，您无论如何都需要重新绘制它。在那种情况下，您可能只使用一个 Canvas ，或者尝试使用单独的 Canvas 。关于重绘前如何清除背景(或任何 Canvas )的具体问题，这里是a couple of ways to clear a canvas .

无论哪种方式，在支持它的浏览器中使用 requestAnimationFrame()，而不是 setTimeout() 或 setInterval()。如果您搜索 requestAnimationFrame polyfill，您会发现许多有关如何执行此操作且仍支持旧浏览器的示例。这里有个好requestAnimationFrame polyfill .