更新時間:2017-06-15 來源:黑馬程序員web前端培訓學院 瀏覽量:
4、html 游戲進入循環(huán)
分析:既然圖形和動畫的先決條件已經(jīng)得到滿足,那么現(xiàn)在是時候讓 Snail Bait 動起來了。首先,我在游戲的 HTML 中讓 requestNextAnimationFrame()
包含 JavaScript。startGame() 函數(shù)由背景圖像的 onload 事件處理器調用,該函數(shù)通過調用 requestNextAnimationFrame() polyfill 啟動游戲。在繪制游戲的第一個動畫幀時,瀏覽器會調用 animate() 函數(shù)。
5、計算 fps 并更新 fps 元素及滾動背景并設置背景位移
分析:幀速率只是自上一個動畫幀開始計算的時間量,所以您也可以認為它是 frame per second(幀每秒)而不是 frames per second(每秒的幀數(shù)),這使得它不太像是一個速率。您可以采用更嚴格的方法,在幾個幀中保持平均幀速率,但我還沒有發(fā)現(xiàn)這樣做的必要性,事實上,自最后一個動畫幀起所用的時間就正是我在 基于時間的運動 中所需要的。
執(zhí)行任務的速率不同于動畫速率。如果我在每一個動畫幀都更新幀/秒值,則無法讀取速率,因為它總是在不斷變化;我將該設置改為每秒更新一次。設置好了游戲循環(huán)和幀速率之后,我現(xiàn)在就準備開始滾動背景了。setBackground() 函數(shù)在水平方向平移畫布上下文 -backgroundOffset 像素。如果 backgroundOffset 是正數(shù),那么背景會向右側滾動;如果它是負數(shù),那么背景會向左側滾動。
在平移背景之后,drawBackground() 繪制了兩次背景,然后將上下文平移回它在調用 drawBackground() 之前的位置。
一個看似瑣碎的計算仍然保留:計算 backgroundOffset,這決定了為每個動畫幀將畫布的坐標系統(tǒng)平移多遠。雖然該計算本身確實是瑣碎的,但它具有重要的意義,所以我接下來將會討論它。
6、設置背景位移、設置背景位移及draw() 函數(shù)
分析:draw() 函數(shù)設置了平臺速度,并為背景和平臺設置了位移。然后,它繪制背景、跑步者和平臺。Snail Bait 的游戲循環(huán)。該循環(huán)包括一個 animate() 函數(shù),在需要繪制游戲的下一個動畫幀時,瀏覽器會調用該函數(shù)。然后,該 animate() 函數(shù)調用一個 draw() 函數(shù)來繪制下一個動畫幀。
David Geary簡介 :他是 JSTL 1.0 和 JSF 1.0/2.0 專家組的成員,他還是 GWT Solutions 一書的作者。David 經(jīng)常在各大會議和用戶組發(fā)表演講。是作家、演講家以及顧問,也是 Clarity Training, Inc. 的總裁,他指導開發(fā)人員使用 JSF 和 Google Web Toolkit (GWT) 實現(xiàn) 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/