Question

我在这里有一个游戏循环，它在draw（）中呈现以下内容。期望的目标是让游戏清除画布，说“游戏结束”，然后在重置和继续新游戏之前暂停3秒。然而，看起来它只是暂停现有游戏3秒，而不是清除和绘制“游戏结束”。它可能有什么问题？

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

Answer 1

您的JavaScript代码在UI线程上运行。所以基本上浏览器无法绘制，直到您的代码完成执行。当你只是循环3秒时，你所做的就是阻止浏览器做任何事情。

尝试在屏幕上绘制游戏并使用setTimeout(function(){resetGame();}, 3000);在3秒后重启新游戏。

Answer 2

如何在Javascript中编写渲染循环（动画循环）：

http://hacks.mozilla.org/2011/08/animating-with-javascript-from-setinterval-to-requestanimationframe/

为什么我的HTML5画布在短暂停顿期间没有清除？

2 个答案: