WEB前端培訓(xùn)之David Geary對(duì)HTML5 的 2D 視頻游戲詳細(xì)剖析思路三

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

分析：既然圖形和動(dòng)畫(huà)的先決條件已經(jīng)得到滿足，那么現(xiàn)在是時(shí)候讓 Snail Bait 動(dòng)起來(lái)了。首先，我在游戲的 HTML 中讓 requestNextAnimationFrame() 包含 JavaScript。startGame() 函數(shù)由背景圖像的 onload 事件處理器調(diào)用，該函數(shù)通過(guò)調(diào)用 requestNextAnimationFrame() polyfill 啟動(dòng)游戲。在繪制游戲的第一個(gè)動(dòng)畫(huà)幀時(shí)，瀏覽器會(huì)調(diào)用 animate() 函數(shù)。

           5、計(jì)算 fps 并更新 fps 元素及滾動(dòng)背景并設(shè)置背景位移

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

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

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

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

本文版權(quán)歸黑馬程序員web前端開(kāi)發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處，謝謝！
作者：黑馬程序員web前端培訓(xùn)學(xué)院；
首發(fā)：http://web.itheima.com/