Question

我正在尝试用帆布制作游戏，以提高我的技能。这个想法是屏幕上有两个由玩家控制的对象。我用玩家初始化游戏，然后开始一个听取玩家输入的游戏循环。

此刻，我可以在画布上绘制玩家（在此阶段只是矩形）。但是，我在游戏循环的每个“勾号”上移动这些对象时遇到了麻烦。目前，矩形刚刚绘制在前一帧中的矩形顶部;我想清除画布并在每个刻度中重新绘制“玩家”。

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

我发布了一个代码示例，但我的JavaScript文件非常详细，我希望上面的描述已经足够了。

Answer 1

如果玩家的外观不会在帧与帧之间发生变化，那么我会使用三个独立的canvas元素：一个用于背景，一个用于每个玩家。然后您不必重绘任何内容，只需更改每个播放器画布的CSS left和top值。

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

当然，如果背景改变或移动，你还是需要重新绘制它。在这种情况下，您可能只使用单个画布，或试验单独的画布。关于如何在重绘之前清除背景（或任何画布）的具体问题，这里是a couple of ways to clear a canvas。

无论哪种方式，请在支持它的浏览器中使用setTimeout()，而不是setInterval()或requestAnimationFrame polyfill。如果您搜索{{1}}，您会找到许多如何执行此操作并仍支持旧浏览器的示例。这是一个很好的requestAnimationFrame polyfill。

Answer 2

这是一个基本游戏循环的好教程。它呈现背景，怪物和玩家。

http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

    // The main game loop
    var main = function () {
       var now = Date.now();
       var delta = now - then;

       update(delta / 1000);
       render();

       then = now;
    };

您在更新中更新对象位置，然后调用渲染。

Answer 3

我很抱歉，但是对于场景中的每个元素都有一个单独的画布，因为另一个用户会消化，这是一个糟糕的主意。无论如何，这都不会提高你的技能。

是的，您必须在单个画布上重绘所有内容，甚至是不能从一个帧转换到另一个帧的对象。清除画布很简单，使用context.clearRect(0, 0, canvas.width, canvas.height)或使用fillRect使用某种颜色绘制背景，或者在整个画布上绘制图像以获得静态背景，覆盖整个画布的任何内容都将做。

因此，您更新对象，清除画布，然后重绘所有内容。因为你只有2个rects而且唯一改变的是他们的位置，这将非常容易实现。

当你开始制作更复杂的东西时，你可能想要更加面向对象的方法，我的意思是你的场景中的每个对象都需要“知道如何画自己”，如：

var player1 = new PlayerRect(position);
player1.draw(context);

这样你就可以在循环中更新它的位置：

player.position.x += 10;

如果您最终得到数百个对象，您只需要添加/删除这些对象的列表以及调用其绘制方法的循环。

我的意思是，这就是我这样做的方式。

在画布上移动对象

3 个答案: