《HTML5 2D遊戲程式設計核心技術》——第3章，第3.8節繪制動畫幀

本節書摘來自華章出版社《html5 2d遊戲程式設計核心技術》一書中的第3章，第3.8節繪制動畫幀，作者［美］　戴維·吉爾裡，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。

3.8　繪制動畫幀

3.3節介紹了snail bait遊戲的主循環。該循環包含了一個animate()函數，浏覽器會在繪制下一個動畫幀時調用這個函數。animate()函數會依次調用draw()函數繪制下一個動畫幀。在本開發階段中，draw()函數的代碼如程式清單3.17所示。

程式清單3.17　draw()函數

draw()函數首先設定背景的偏移量，然後繪制背景、跑步小人和平台。draw()函數調用的所有方法都已經在本章中介紹過。

既然我們已經了解了snail bait遊戲是如何使用基于時間的運動來滾動背景的，接下來就讓我們看一看它如何滾動遊戲中的平台。