這篇文章主要介紹“怎么用html5實現(xiàn)憤怒的小鳥”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“怎么用html5實現(xiàn)憤怒的小鳥”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)公司成立10年來，這條路我們正越走越好，積累了技術與客戶資源，形成了良好的口碑。為客戶提供網(wǎng)站設計制作、成都網(wǎng)站設計、網(wǎng)站策劃、網(wǎng)頁設計、國際域名空間、網(wǎng)絡營銷、VI設計、網(wǎng)站改版、漏洞修補等服務。網(wǎng)站是否美觀、功能強大、用戶體驗好、性價比高、打開快等等，這些對于網(wǎng)站建設都非常重要，創(chuàng)新互聯(lián)公司通過對建站技術性的掌握、對創(chuàng)意設計的研究為客戶提供一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進步。

簡單而是用的小游戲框架，為你創(chuàng)建好了canvas，而且用了double buffer的canves

主要的類圖如下：

框架定義了GameObject基類，游戲中每一個可以活動的部件均可以繼承它，還定義了VisualGameObject類，它繼承自GameObject類，添加了draw方法，游戲中可見的部件可以從它繼承，實現(xiàn)自己的draw方法，draw方法帶有參數(shù)，就是canvas的context。所有GameObject由GameObjectManager管理，所有自定義的GameObject子類的對象都需要添加到GameObjectManager，它有一個draw方法會被定時調用，如果每1/30秒調用一次，那么你的游戲從設計上來說就是30FPS的。這個方法會把它管理的所有GameObject都調用一遍draw方法（如果有的話），實現(xiàn)所有GameObject的定時重繪，這個就是大家常看到的游戲設計里的主循環(huán)。它的功能好比windows編程里的消息循環(huán)一樣。

有了這個framework，你要做的就是繼承VisualGameObject，實現(xiàn)draw方法繪制知己，實例化并添加到GameObjectManager中即可。

2.Sprite sheet和Animition

Sprite sheet就是精靈表。

主要原理簡述如下：

定義SpriteSheet類，它負責從一張大圖中剪切出我們需要的一個個小圖。把所有你游戲重要到的圖片做成一張大圖，提高性能，多個小圖意味著客戶端需要發(fā)起多次web request，每個http request含有head，tcp，ip等都含有head，減少請求次數(shù)意味著較少數(shù)據(jù)流量，這個好處你懂的。貌似html5中的websocket就是用的這個原理，來提高系統(tǒng)吞吐量的，將http連接upgrade成websocket，之后所有的雙向通信都直接傳數(shù)據(jù)，最少只需要兩個字節(jié)的表頭。

Animation類負責將各個剪切出來的小圖拼接成動畫，每一個小圖是一幀，每一幀定義一個duration，每一幀顯示的duration完了，就顯示下一幀，然后循環(huán)，看起來就是連續(xù)的動畫了，其實是欺騙了你的眼睛。

3.box2D

隨著AngryBird的火爆，這個庫也進入了廣大開發(fā)者的視野，現(xiàn)在介紹這個庫的文章太多了，我就不啰嗦了，只寫幾個關鍵點：

box2D源代碼使用c++開發(fā)，可以從下載到最新版本和文檔，它port到了各種平臺，如java，c#，flash，javascript。我是用的是box2Dweb，這個javascript庫是從actionacript庫port過來的，可以從下載。

Seth Ladd寫過幾篇很經(jīng)典的入門級文章：

這個庫的適用范圍是幾米到幾十米之間，也就是牛頓定律的使用范圍（不含天體運動），對于微觀離子的運動，用這個庫是不合適的，太大的范圍也不精確。

速度太快是可以穿越的。這個是我測試過的，如果給小鳥太大的力，使其速度過快，它能夠穿越木頭。原因是box2D的庫每1/60秒（可配置）是一個step，它會計算每個step結束時各個剛體（Rigid body）應該在什么位置，如果發(fā)現(xiàn)有重疊的，就認定在這個step中會有碰撞發(fā)生，會觸發(fā)碰撞事件，并且修正剛體的位置，使其不重疊，但是如果某一個剛體速度太快，在這個step結束的時候已經(jīng)成功穿越的另一個剛體，則碰撞就無法被檢測到，實現(xiàn)了穿越。

4.Audio

在html5里，audio實現(xiàn)起來非常簡單

this.getAudio=function（id）{

if（this.audios[id]==undefined） {

this.audios[id]=new Audio（）;

this.audios[id].src=""+id;

this.audios[id].load（）;

}

return this.audios[id];

};

var audio=this.getAudio（"title_theme.mp3"）;

audio.loop=true;

audio.play（）;

作為一個windows平臺程序員，發(fā)現(xiàn)web在處理事件時與windows桌面應用有不同之處。桌面程序在處理鼠標或鍵盤事件時，注冊一個事件處理方法就可以了，當事件發(fā)生時，這個事件處理方法就會被調用執(zhí)行。但是web有點不一樣，加入你的游戲時30FPS的，1/30秒你的程序才獲得一次執(zhí)行機會，但是在這短短的1/30秒時間內，可能已經(jīng)發(fā)生了好幾次鼠標鍵盤事件，所有需要在事件發(fā)生時記錄下事件類型及狀態(tài)，當程序獲得執(zhí)行機會時，讀取剛才這些記錄，處理事件，刪除記錄。

關于“怎么用html5實現(xiàn)憤怒的小鳥”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。