怎么用html5實現憤怒的小鳥

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

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

　　主要的類圖如下：

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

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

　　2.Sprite sheet和Animition

　　Sprite sheet就是精靈表。

　　主要原理簡述如下：

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

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

　　3.box2D

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

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

　　Seth Ladd寫過幾篇很經典的入門級文章：

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

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

　　4.Audio

　　在html5里，audio實現起來非常簡單

　　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平臺程序員，發現web在處理事件時與windows桌面應用有不同之處。桌面程序在處理鼠標或鍵盤事件時，注冊一個事件處理方法就可以了，當事件發生時，這個事件處理方法就會被調用執行。但是web有點不一樣，加入你的游戲時30FPS的，1/30秒你的程序才獲得一次執行機會，但是在這短短的1/30秒時間內，可能已經發生了好幾次鼠標鍵盤事件，所有需要在事件發生時記錄下事件類型及狀態，當程序獲得執行機會時，讀取剛才這些記錄，處理事件，刪除記錄。

關于“怎么用html5實現憤怒的小鳥”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。