在一些時間以前，比如2012年之前，做web遊戲的人還不是很多（就是用javascript寫遊戲的人）。
當時也沒想那麼多，就是為了製作一個「不需要下載，點開就能玩的遊戲」，所以就投入到web遊戲製作的大海中。
但那時很多人都說，「你這些東西看著蠻好玩的，但感覺沒什麼用啊」。
其實我不是很理解「沒什麼用」是什麼概念，「好玩」難道不夠嗎？
然後時間來到2018年，微信推出了小遊戲。於是web遊戲製作技術忽然從一個「沒什麼用的技術」一躍變成了時下最潮流的技術。
——————————————分割線————————————————
其實我只喜歡一個title，遊戲製作人。但因為一直沒有一款具有代表性的遊戲，所以我一直不知道怎麼做自我介紹。
真希望哪天可以自豪的介紹：我是 xx 遊戲的製作人。
我所在團隊是騰訊互娛的TGideas，會議上稍微吹了會，感興趣的同學自行搜尋。
——————————————分割線————————————————
接下來是正題：
主題分為4個部分（忽略旁邊那個表情包）：
基礎概念
架構設計
部分演算法
微信API
遊戲的驅動由開發編寫遊戲邏輯，然後在渲染器中實時渲染到畫布上。
微信小遊戲和傳統web遊戲（canvas類）最大的區別在於API。
小遊戲的表現既可以像跳一跳那樣休閒，也可以像街機的格鬥遊戲一樣熱血，不要被想象力所限制，認為「小遊戲就應該有小遊戲的樣子」。
當然，一般會有「小遊戲就該是什麼樣」的想法的人，多少是對遊戲有所瞭解的人才會發出的感慨，因為我們需要戴上名為「現實」的技術枷鎖。
這種想法並沒有錯，反而比那些沒有套上枷鎖，而要求他人根據手機殼的顏色改變手機背景顏色的人要好很多。
但是，在戴上了技術枷鎖以後還能保持天馬行空的想象力，那才是最難能可貴的。
微信小遊戲的檔案結構
game.js以及game.json分別是小遊戲的入口檔案及配置檔案。
res是遊戲資源，也是遊戲佔用體積最大的地方。
adapter是利用微信API模擬瀏覽器API的庫。
而src部分就是本次分享的重點內容。
我個人製作的小遊戲目前畫風都比較奔放，所以分享時借用團隊製作的小遊戲來介紹了。
遊戲結構分為3個大的模組：
Base 模組管理指令碼，用來組織起整個遊戲的部分。負責遊戲的開始，暫停，決定遊戲該呼叫哪個場景。
Scene 場景模組，類似於不同的關卡，每個關卡里需要載入什麼樣的角色，什麼樣的敵人，播放什麼樣的音樂都由場景模組決定。
Role 角色模組，遊戲邏輯中最重要的一個部分。不論是主角還是敵人，甚至場景裡的一個寶箱，一顆子彈，都屬於角色。
剩下的模組都是對不同遊戲進行補完，因為一個格鬥遊戲和一個休閒遊戲所需要的模組差別是非常大的。
角色模組可以大致分為4個部分：屬性、動畫、指令、行為。
屬性：我們可以把一個object叫做實體，這個實體裡的屬性就是角色的屬性，比如座標，hp，speed等等。
動畫：角色的動畫一般有屬性動畫，序列幀動畫，骨骼動畫這幾種，這些動畫中部分還有2d和3d的區別。
動畫這一部分屬於「跨領域」作業，因為要把一些「感性」的影象轉化成「理性」的程式碼。這部分的介紹以後會陸續放出。
指令：指令是玩家輸入手段的一種封裝。
例如，「水果忍者」的滑動切水果的指令就是通過「觸控」的API進行實現，而一些「連續技」，「虛擬搖桿」也需要對應的API組合來實現。
行為：角色的行為就是通過調整角色的屬性而產生的一種結果。
如移動就是座標
x+=speed;
sprite.play(move);
複製程式碼角色行為是遊戲邏輯中最重要的一環，而角色之間的行為互動又伴隨著大量的演算法。
每種遊戲所需要的演算法都不相同，但是遊戲裡執行演算法的計算方式是一致的。
如加速度方程，在程式碼中的實現實際上如就是
v+=a；
s+=v；
複製程式碼瞭解遊戲演算法的基本機制後，可以稍微擴充套件下，比如碰撞演算法：
基本上每個演算法的推導過程都可以單獨作為一篇文章來講了，感興趣的同學可以自行搜尋演算法名稱。
另外一些比較常用的遊戲演算法也可以瞭解下，比如：狀態機，字典樹，尋路，排序……
當然，遊戲基於專業的遊戲引擎去製作，可以達到事半功倍的效果。瞭解遊戲執行機制可以幫你更快速的上手遊戲引擎。
微信小遊戲與傳統web遊戲最大的區別在於API。
微信小遊戲有一部分與微信小程式不一樣的API。
其中最特別的就是「開放資料」。
主域可以傳資料到微信後臺，但是卻無法從微信後臺獲取資料。而開放資料域可以從微信後臺獲取資料，但是卻無法現實以及將資料傳入主域。
所以主域想要顯示微信後臺資料，必須在開放資料域繪製好資料，然後將開放資料域的sharedCanvas當作image通過drawImage函式繪製到主域的canvas中。
開放資料的一些注意事項
sharedCanvas 只能被繪製到上屏 canvas 上。
上屏 canvas 不能呼叫 toDataURL，其 context 不能呼叫 getImageData。
sharedCanvas 不能呼叫 toDataURL 和 getContext。
不能將上屏 canvas 和 sharedCanvas 以任意形式繪製到其他 canvas 上，包括 drawImage、createPattern、texImage2D、texSubImage2D。
sharedCanvas 的寬高只能在主域設定
其中第5條常常容易被忽略，然後出現各種適配問題。
最後總結一下小遊戲的執行機制。
遊戲從入口檔案進入以後，開始執行渲染器。
然後遊戲的主邏輯會呼叫遊戲下一步需要的場景模組。
場景模組中呼叫當前場景所需要的角色模組。
角色模組在接收到不同的指令後會產生不同的行為。
角色行為之間通過大量演算法進行互動，最終產生完整的遊戲效果。
「現場演講的時候，你好像不是這麼說的」
