2

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

目前，我可以在画布上绘制玩家（现阶段只是矩形）。但是，我无法在游戏循环的每个“滴答”上移动这些对象。目前，矩形只是在前一帧的矩形之上绘制；我想清除画布并在每个刻度中重新绘制“玩家”。

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

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

4

3 回答 3

3

如果玩家的外观在每一帧之间没有变化，那么我将使用三个独立canvas的元素：一个用于背景，一个用于每个玩家。然后您不必重绘任何东西，只需更改每个播放器画布的 CSSleft和top值。

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

当然，如果背景发生变化或移动，无论如何您都需要重新绘制它。在这种情况下，您可能只使用单个画布，或者尝试使用单独的画布。关于如何在重绘之前清除背景（或任何画布）的具体问题，这里有几种清除画布的方法。

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

于 2013-07-27T23:31:27.863 回答
0

这是一个带有基本游戏循环的好教程。它渲染了背景、怪物和玩家。

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;
    };

您在 update 中更新对象位置，然后调用 render。

于 2013-07-27T23:38:57.347 回答
0

很抱歉，但正如另一位用户所建议的那样，为场景中的每个元素设置单独的画布是一个糟糕的主意。无论如何，这不会提高你的技能。

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

因此，您更新对象，清除画布，然后重绘所有内容。由于您只有 2 个矩形，唯一改变的是它们的位置，这将非常容易实现。

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

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

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

player.position.x += 10;

如果您最终得到数百个对象，您所要做的就是一个可以添加/删除这些对象的列表以及一个调用它们的 draw 方法的循环。

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

于 2013-07-28T19:54:39.180 回答