HTML5技術為現今Web應用程式在瀏覽器中提供了非常廣闊的發揮空間，其強大的功能讓我們在瀏覽器上開發遊戲和玩遊戲不再是難事。利用Canvas和強大的JavaScript引擎，我們可以輕鬆地完成休閒遊戲的開發。玩家只需開啟瀏覽器，不用安裝外掛便可以享受到遊戲帶來的樂趣。
本文由NTFusion團隊所作，結合了他們在Google Chrome Web Store上釋出的《拯救PAPA》和大家分享一下使用HTML5開發物理遊戲的心得。
在閱讀本文之前，您可以從Chrome Web Store安裝《拯救PAPA》來嚐個鮮兒。
搭建物理世界
物理遊戲當中的一切物體，都是在一個設定好的物理世界中運作的。建立物理世界，我們現在使用的是Box2D物理引擎的JavaScript版本。Box2D引擎裡面有一個很好的功能DebugDraw，可以模擬出我們預設的物理世界並展示給我們看，非常適合我們做快速遊戲原型開發。
下圖就是使用DebugDraw繪製出來的《拯救PAPA》中的物理世界例項：
構建物理世界的時候，首先我們需要定義相關的物理物體，然後根據遊戲的特性所需，設定相關的物理引數。
檢視原始程式碼 物理世界構建完畢後，通過DebugDraw功能我們就可以看到遊戲的原型，這樣我們就可以在這個基礎上調整物體的引數、製作關卡等等。這些工作完成以後，下一步我們需要在物理物體上“貼”上圖片，這樣玩家才可以看到真實的遊戲畫面。
同步顯示物件
sp; 首先，我們需要建立一個DisplayObject類，其類似於Flash顯示列表機制中的顯示類，該類有x、y和rotation等相應屬性，並且有自身的繪圖方法，再通過陣列形式來實現顯示列表。
下一步，我們將需要顯示的DisplayObject加入顯示列表，再將其與Box2D中對應的物體的位置，自身旋轉角度進行同步：
檢視原始程式碼根據圖1中的物理世界，我們畫上圖片之後，就可以見到下圖的畫面：
動畫
DisplayObject與物理物體的同步處理好之後，我們便可以往它裡面填充需要顯示的圖片，然後通過一定的時間間隔更換圖片，即可達到動畫的效果。通常，動畫是由很多張圖片組成的，為了減少讀取次數，我們將動畫中的所有的圖片合成為一張大圖，稱為SpriteSheet。圖3為《拯救PAPA》中1號工具的動畫SpriteSheet：
然後，我們便可以在SpriteSheet中根據座標獲取當前幀所需要顯示的圖片：
檢視原始程式碼
總結
an>HTML5技術還在逐步自身完善當中，我們的程式設計師也正在不斷的努力，創作更多的好作品。而本文所談及的物理世界的構建，顯示物件以及對動畫播放等技術，對於我們製作HTML5的遊戲中是非常有用的。我們期待看到HTML5技術的不斷髮展和更多創新的HTML5網頁遊戲。