《HTML5 2D遊戲程式設計核心技術》——第3章，第3.6節制作基于時間的運動

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

3.6　制作基于時間的運動

遊戲幀速率是會變化的，但是不能允許變化的幀速率影響到遊戲中物體運動的速率，包括背景。可能幹擾到遊戲動畫的任何噪聲，都不應該成為影響生成平滑運動的原因。例如，不管潛在的動畫幀速率是多少，snail bait遊戲都會以每秒25個像素的速率滾動背景。運動必須是基于時間的，也即它僅僅依賴時間（例如，像素/秒），而不是動畫幀速率。

對于任何動畫幀來說，使用基于時間的運動來計算需要移動的像素數量都是簡單的：使用自上一動畫幀以來經過的時間（以秒為機關）乘以物體運動的速率。當你使用上一個動畫幀經過的時間（秒/幀）乘以速率（像素/秒）時，秒被約掉，得到的結果以像素/幀為機關，進而得到目前的時間幀裡需要移動的像素點數。

程式清單3.15顯示了snail bait遊戲如何通過使用基于時間的運動來計算背景的偏移量。

程式清單3.15　設定背景偏移量

為了計算目前幀内背景需要移動的像素數，setbackgroundoffset()函數使用前一個動畫幀到目前動畫幀的時間間隔，以秒為機關，乘以背景移動速率。然後将那個值加入到背景的偏移量中。

為了能夠持續地滾動背景，setbackgroundoffset()函數會在偏移量小于零或者大于背景的寬度時，重新将背景的偏移量置為零。

snail bait遊戲使用基于時間的運動來移動遊戲中的所有物體，不僅僅是背景。