CANVAS遊戲開發思路
一、遊戲截圖
DEMO_1: 卷軸跑酷遊戲
DEMO_2: 格鬥遊戲
以下思路僅為我的一些個人觀點，讀【HTML5 2D遊戲程式設計核心技術】一書獲得的一些收穫，歡迎指正！！
二、用到的API
三、開發前的準備
開發一款遊戲都需要準備些什麼呢？這裡列出了簡單的一些東西。
1、圖片資源。 一款遊戲最主要的表現力之一就是圖片，遊戲的登陸，過場介面，地圖，人物序列幀，怪物，技能特效，都是基於圖片的
2、音效。 恰到好處的音效可以讓遊戲給玩家留的印象很深，比如仙劍3的迴夢遊仙。
3、一些數學基礎 和 對生活定律的理解。
4、一個開發方向。
5、程式的支援。對於我們程式設計師來說，這點可能是最拿手的一點了。開發遊戲也是很考驗自己的基本功的，需要設計出合理的資料結構，遊戲會出現很多很多不可預知的，甚至有趣的bug。如果程式碼結構不過關的話，維護起來是及其吃力的。
四、部分難點的開發思路
1、本遊戲為橫版卷軸滾動類的遊戲，類似天天酷跑。如何實現背景的無限滾動呢？
針對滾動，這裡用到的核心API為 translate()，該方法可以將當前畫布的原點平移到指定位置。 canvas畫布的初始原點為左上角，x座標向右增大，y座標向下增大。
此時我們原點座標以（0，0）的方式繪製一張圖片。在下一幀開始的時候，通過translate(-1, 0) 將原點座標向左移動一個畫素，還以上次的座標繪製圖片，就會出現滾動的效果了。
2、一個遊戲會有各種的物件，如何去整合管理呢？
一個遊戲，會有場景，ui層，主角，敵人，獎勵等各種物件。每個物件通常又會有不同的動作，我們該如何統一管理呢？這裡我們建立一個sprite物件，分為四步，指定型別，初始化繪製類，新增行為，初始化sprite。
• 初始化繪製類：初始化的繪製類用來繪製該sprite，內部會儲存當前sprite的動作狀態，第幾幀等和繪製相關的屬性。
• 新增行為：一個sprite可能會跑，會跳，會發射炸彈。 這些都需要將行為單獨新增給sprite
• 初始化：通過模版來初始化sprite屬性並生成。
通過以上的步驟，可以模版化的創建出一個sprite，這個流程足夠通用。
建立好了所有的sprite後，將它新增到一個list中進行整合，方便遊戲本身去遍歷訪問。
3、上個提到的行為是什麼？
行為就是每個sprite可以幹什麼，行為是讓一個sprite具有特色最好的方法。
• sprite物件的特定行為： 確定只被一個sprite物件使用的特定行為
• 輕量級（無狀態）行為： 不維持狀態的行為，可以被多個sprite同時使用。 輕量級的行為可以顯著的減少記憶體，尤其是像包含了上千個sprite物件的例子系統。
• 遊戲獨立行為：三分之一的行為為獨立行為，即通用行為。可以和任何精靈一起工作的行為。比如遊戲中通過迴圈顯示sprite物件的影象來實現的週期行為。你可以使用週期性為與任何artist物件是一個表單的sprite物件一起工作。而不用管這事哪種遊戲。
4、如何實現不同sprite的速度差呢？
sprite都會有自己不同的速度，我們會有一個sprite list來存放所有的sprite，在沒幀的時候，通過上一幀到這一幀的時候，來計算當前sprite需不需要去做一個移動，這樣就實現了速度差。
5、格鬥遊戲中的各種判定
demo2中比demo1中多了一些判定框。粗略講解一下為什麼。
在此之前，科普一些基本的判定框種類。
• 體積碰撞框
• 基本所有遊戲都會有，用來限制角色的位置。進行碰撞檢測。
• 攻擊判定框
• 舉例，當角色進行攻擊時，釋放的技能不同，攻擊生效的地方也不同。這是就需要一個或多個攻擊框來判定傷害觸發的範圍。
• 受傷範圍框
• 在2d遊戲中，很多都採用矩形框來進行判定，這是普遍會發有角色不會佔滿矩形框的情況。我們需要實現多個受傷框，來進行受傷判定。如圖。
• 防禦範圍框
• 角色進行防禦時候，會有一個防禦範圍。通常角色都是正面防禦，此時從背面攻擊就會破防。這裡就會有一個正面的防禦判定框。
• 當前幀佔位框
• 在這次格鬥遊戲中，由於素材限定，技能和角色整合在了一起，這就不可避免的出現了一些問題，某一幀中技能特效很華麗，佔位特別大，所以用到了此框。
•
6、碰撞體積檢測
這兩個demo中都使用的是矩形碰撞，所以這裡只講一下矩形碰撞檢測的方法。
1、canvas提供的原生api
isPointInPath()， 這個方法用來判定一個點在不在當前的路徑內。其實我們常用的圖示元件，點選某區域顯示什麼什麼資料，就會用到這個api。 這個api可以很方便的判定一個角色與另一個sprite物件碰撞。首先我們需要先給角色標記幾個關鍵點，如角色碰撞框的四個角點， 中心點。 標記的點越多，碰撞檢測越精準，效能也越差。 這個方法侷限性很大，很容易誤判～
2、邊界區域判定法
簡單的來講，就是判斷兩個矩形存不存在交點，如果存在，即為碰撞。
缺點: 當邊界區域太小時候，而兩個檢測物件速度又很快時候，會出現在一幀中直接穿過的情況。
3、光線投射法。
光線投射法在檢測面積小，速度快的sprite物件時候更可靠。其通過檢測兩個sprite的速度向量是否存在焦點來判斷。
4、分離軸定理。
分離軸定理是最可靠，同樣也是最複雜的碰撞檢測技術之一。 實戰中沒有用到~以後有機會細看一下。
這個用來檢測多邊形之間的碰撞很方便。
7、優化碰撞體積演算法。
碰撞計算可以說是每個遊戲中最耗費效能的地域了，處理不佳可能會造成效能崩塌。所以進行相關的碰撞檢測演算法優化是非常有必要的。
1、只對當前可視區域的sprite進行碰撞檢測。
一個遊戲往往不能一屏顯示完畢，會出現滾動螢幕的情況。這時未出現在螢幕中的sprite完全不必要進行檢測。
2、預測會發生碰撞的sprite進行檢測。
比如A，B賽跑，知道A永遠追不上B的情況下，就大可不必對這兩個人進行碰撞檢測。再比如AB背到而行，也不用進行碰撞檢測。
3、只對主角周圍特定空間內的sprite物件進行碰撞檢測。
這個方法可以極大的減少檢測次數。
DEMO_1中，我只對紅色矩形範圍內的sprite進行碰撞檢測，會有很好的效能表現。
五、總結一下
暫先寫這麼多吧~！！以後想到的話再補充。
獨立開發一款遊戲能學到很多東西，也能將平常自己的技能加以強化，綜合。
這兩款小的demo遊戲，就用到了繼承，閉包，設計模式，資料結構各種東西。這對於提升程式設計功力是一個很不錯的方法~