爲什麼我的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/