今日終於得空，補一篇html5做的山寨版憤怒小鳥的技術貼，共入門級參考。
主要有以下幾點，主要是一些鏈接，供大家學習
1.游戲框架
2.Sprite sheet和Animition
3.box2D
4.Audio
1.游戲框架
http://www.brighthub.com/internet/web-development/articles/40512.aspx
http://www.brighthub.com/internet/web-development/articles/40513.aspx
簡單而是用的小游戲框架，為你創建好了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就是精靈表。
http://codeutopia.net/blog/2009/08/21/using-canvas-to-do-bitmap-sprite-animation-in-javascript/
這篇文章講解了如何自己實現Animation，主要原理簡述如下：
定義SpriteSheet類，它負責從一張大圖中剪切出我們需要的一個個小圖。把所有你游戲重要到的圖片做成一張大圖，提高性能，多個小圖意味着客戶端需要發起多次web request，每個http request含有head，tcp，ip等都含有head，減少請求次數意味着較少數據流量，這個好處你懂的。貌似html5中的websocket就是用的這個原理，來提高系統吞吐量的，將http連接upgrade成websocket，之后所有的雙向通信都直接傳數據，最少只需要兩個字節的表頭。
Animation類負責將各個剪切出來的小圖拼接成動畫，每一個小圖是一幀，每一幀定義一個duration，每一幀顯示的duration完了，就顯示下一幀，然后循環，看起來就是連續的動畫了，其實是欺騙了你的眼睛。
3.box2D
隨着AngryBird的火爆，這個庫也進入了廣大開發者的視野，現在介紹這個庫的文章太多了，我就不啰嗦了，只寫幾個關鍵點：
box2D源代碼使用c++開發，可以從http://box2d.org/下載到最新版本和文檔，它port到了各種平台，如java，c#，flash，javascript。我是用的是box2Dweb，這個javascript庫是從actionacript庫port過來的，可以從http://code.google.com/p/box2dweb/下載。
Seth Ladd寫過幾篇很經典的入門級文章：http://creativejs.com/2011/09/box2d-javascript-tutorial-series-by-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 = "music/"+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秒時間內，可能已經發生了好幾次鼠標鍵盤事件，所有需要在事件發生時記錄下事件類型及狀態，當程序獲得執行機會時，讀取剛才這些記錄，處理事件，刪除記錄。
介紹及源代碼下載：
http://www.cnblogs.com/piyeyong/archive/2011/12/30/2307366.html