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

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/