WEB前端培訓之David Geary對HTML5 的 2D 視頻游戲詳細剖析思路三

4、html 游戲進入循環(huán)

分析：既然圖形和動畫的先決條件已經得到滿足，那么現在是時候讓 Snail Bait 動起來了。首先，我在游戲的 HTML 中讓 requestNextAnimationFrame() 包含 JavaScript。startGame() 函數由背景圖像的 onload 事件處理器調用，該函數通過調用 requestNextAnimationFrame() polyfill 啟動游戲。在繪制游戲的第一個動畫幀時，瀏覽器會調用 animate() 函數。

           5、計算 fps 并更新 fps 元素及滾動背景并設置背景位移

分析：幀速率只是自上一個動畫幀開始計算的時間量，所以您也可以認為它是 frame per second（幀每秒）而不是 frames per second（每秒的幀數），這使得它不太像是一個速率。您可以采用更嚴格的方法，在幾個幀中保持平均幀速率，但我還沒有發(fā)現這樣做的必要性，事實上，自最后一個動畫幀起所用的時間就正是我在 基于時間的運動 中所需要的。
           執(zhí)行任務的速率不同于動畫速率。如果我在每一個動畫幀都更新幀/秒值，則無法讀取速率，因為它總是在不斷變化；我將該設置改為每秒更新一次。設置好了游戲循環(huán)和幀速率之后，我現在就準備開始滾動背景了。setBackground() 函數在水平方向平移畫布上下文 -backgroundOffset 像素。如果 backgroundOffset 是正數，那么背景會向右側滾動；如果它是負數，那么背景會向左側滾動。
           在平移背景之后，drawBackground() 繪制了兩次背景，然后將上下文平移回它在調用 drawBackground() 之前的位置。
            一個看似瑣碎的計算仍然保留：計算 backgroundOffset，這決定了為每個動畫幀將畫布的坐標系統(tǒng)平移多遠。雖然該計算本身確實是瑣碎的，但它具有重要的意義，所以我接下來將會討論它。

           6、設置背景位移、設置背景位移及draw() 函數

      分析：draw() 函數設置了平臺速度，并為背景和平臺設置了位移。然后，它繪制背景、跑步者和平臺。Snail Bait 的游戲循環(huán)。該循環(huán)包括一個 animate() 函數，在需要繪制游戲的下一個動畫幀時，瀏覽器會調用該函數。然后，該 animate() 函數調用一個 draw() 函數來繪制下一個動畫幀。

             David Geary簡介 ：他是 JSTL 1.0 和 JSF 1.0/2.0 專家組的成員，他還是 GWT Solutions 一書的作者。David 經常在各大會議和用戶組發(fā)表演講。是作家、演講家以及顧問，也是 Clarity Training, Inc. 的總裁，他指導開發(fā)人員使用 JSF 和 Google Web Toolkit (GWT) 實現 Web 應用程序。與人合作編寫了 Sun 的 Web Developer 認證考試的內容，并且為多個開源項目作出貢獻，包括 Apache Struts 和 Apache Shale。David 的 Graphic Java Swing 一直是關于 Java 的暢銷書籍，而 Core JSF（與 Cay Horstman 合著）是關于 JSF 的暢銷書。他從 2003 年開始就一直是 NFJS tour 的定期演講人，并且在 Java University 教授課程，三次當選為 JavaOne 之星

本文版權歸黑馬程序員web前端開發(fā)學院所有，歡迎轉載，轉載請注明作者出處，謝謝！
作者：黑馬程序員web前端培訓學院；
首發(fā)：http://web.itheima.com/