为什么我的HTML5画布在短暂暂停期间没有清除?
问题描述:
我有一个游戏循环,在draw()中渲染以下内容。期望的目标是让游戏清除画布,说“游戏结束”,然后暂停3秒钟,然后重置并继续新游戏。然而,它看起来只是暂停现有的游戏3秒,而不是清理和绘制“游戏结束”。它有什么问题?为什么我的HTML5画布在短暂暂停期间没有清除?
// check for game over - failed
if (ball_y + ball_dy + ball_radius> HEIGHT-20)
{
game_end_start_time = new Date().getTime();
while (new Date().getTime() - game_end_start_time < 3000)
{
clear(); // calls ctx.clearRect(0, 0, WIDTH, HEIGHT);
fillColorValue(COLOR_GREEN);
drawFont("G A M E O V E R", WIDTH/2-80, HEIGHT/2);
}
resetGame();
return;
}
答
你的JavaScript代码在UI线程上运行。所以基本上,只有在代码执行完毕后,浏览器才能绘制。因为你只是循环3秒,所以你所做的就是阻止浏览器做任何事情。
尝试在屏幕上绘制游戏并使用setTimeout(function(){resetGame();}, 3000);
在3秒后重新启动新游戏。
答
如何写循环渲染(动画循环)在Javascript: