Question

对于大学项目，我的任务是创建Flappy Bird克隆。它是使用HTML5画布完成的。

这个问题并不经常发生，但似乎每隔6秒左右，草就会闪烁。我不确定是什么导致这种情况，这可能是性能问题。

以下链接可让您看到问题：http://canvas.pixcelstudios.uk

这是我用来画草的功能：

var drawGrass = function(cWidth, ctx, minusX)
{
	var x = bg_grass.x;
	var y = bg_grass.y;
	var w = bg_grass.w;
	var h = bg_grass.h;
	var img = bg_grass.img;

	if (minusX[0] >= cWidth)
	{
		bg_grass.x = 0;
		minusX[0] = 0;
	}

	ctx.drawImage(img, x, y, w, h);

	if (minusX[0] > 0)
	{
		ctx.drawImage(img, w-minusX[0], y, w, h);
	}
};

基本上，我正在绘制两个草精灵，每个都占据画布宽度。一个以X为0开始，另一个从画布末尾开始。两者都在每帧递减，然后一个完全关闭屏幕，它完全重置以保持循环。

我认为这与我的更新循环无关，如下所示：

this.update = function()
	{
		clearScreen();
		updateBackground();
		updatePositions();
		checkCollisions();
		render();
		requestAnimFrame(gameSpace.update);
	};

我已经完成了一些阅读，我已经阅读了第二个画布作为缓冲区。显然，这可以停止闪烁并提高性能？但是我所看到的所有例子都显示了部分被画布从画布中拉出来并且我无法真正看到在游戏循环中如何做到这一点（移动部件和所有部件）会提高性能而不是降低性能。当然正在执行相同的操作，除了现在您还必须将第二个画布绘制到第一个？

如果您需要更多信息，请与我们联系（尽管您应该能够通过网络链接查看完整来源）。

谢谢！

Answer 1

好的，我发现了这个问题！在我的drawGrass函数中只是一个简单的错误。

由于排序，我只需要一个框架，我将速记X变量设置为bg_grass.x，然后将bg_grass.x设置为其他东西，因此绘制错误的值。 / p>

我现在在第一个if语句之后设置我的速记变量。

但是，如果有人能够提供有关缓冲画布问题的第二部分的任何见解，我仍然非常欣赏。

图像在画布游戏中闪烁

1 个答案: