小編初次編寫遊戲，內心難免有些緊張，拋開技術的具體實現，光是製作一個遊戲的基本思路小編也是完全小白，剛開始拿到需求着實一頭霧水，別的先不說，先給大家看下目前的實現效果（錄屏軟件的緣故，會顯得有些卡頓，這個大家不要在意）：
左邊的是日常版，右邊的是新年元旦版
接下來小編將從以下幾個方面來對這次的H5遊戲的製作做一些總結
1、使用到的技術棧
我們的H5運營頁面主要使用到的技術棧是vue，打包工具是webpack，關於這塊的技術，小編就不贅述了，相信網上的資料一定會更加詳細，這次主要是想重點說說使用到的遊戲引擎，就是Hilo！
2、Hilo的簡單介紹
Hilo 是阿里巴巴集團開發的一款HTML5跨終端遊戲解決方案，ta可以幫助開發者快速創建HTML5遊戲
它具有以下幾種特性：
- Hilo 支持多種模塊範式的包裝版本，包括AMD，CMD，COMMONJS，Standalone多種方式接入。另外，你可以根據需要新增和擴展模塊和類型；
- 極精簡的模塊設計，完全面向對象；
- 多種渲染方式, 提供DOM，Canvas，Flash，WebGL等多種渲染方案（目前已經申請專利）；
- 全端瀏覽器的支持和高性能方案，獨有的Flash渲染方案，即使在低版本IE瀏覽器下也可以跑起來“酷炫”遊戲； DOM渲染方案能顯著解決低性能手機瀏覽器遇到的性能問題；
- 物理引擎支持——Chipmunk，支持自擴展物理實現；骨骼動畫支持——DragonBones，同時內建骨骼動畫系統——Tahiti（目前內部使用）；
- 案例豐富，框架成熟，已經經歷多屆阿里巴巴雙十一，年中大促互動營銷活動考驗；
尤其是他的補間動畫，要知道CSS3的過渡（transition）接口簡單，在做一些簡單的動畫時比較實用。但是在需要一些邏輯控制的場景下，腳本控制更適合遊戲動畫的邏輯設計，這裏我們也可以看一個示例：
在做過渡動畫時，Hilo需找指定一個補間對象，這個對象可以是Hilo的遊戲對象，如View類型對象。也可以是普通對象，通過修改普通對象的屬性值在onUpdate中間接修改遊戲本體對象，另外，Hilo的過渡動畫可以進行過渡動畫組合調用， 使用link就能將一組過渡動畫關聯起來，實現如下的效果，也是非常簡單：
這裏是Hilo的地址：
https://github.com/hiloteam/Hilo
3、淘金小鎮的構建思路
3.1 舞臺初始化
這裏我們採用背景圖層的寬高作爲遊戲舞臺的寬高，渲染的方式使用DOM渲染，這也是爲了能夠儘可能的去兼容不同的webview，60ms作爲舞臺刷新的週期，由於這裏會使用到大量的動畫效果，因此我們需要開啓Hilo的緩動效果，最後我們需要開啓Hilo的DOM事件響應！
3.2 相對單位
爲了保證適配客戶端的不同大小，這裏小編採用設備的寬度作爲容器內所有元素的移動和座標位置單位，其實這和REM的思想是大同小異的，看下代碼：
比如小編聲明瞭一個雲朵，這裏它的位置是(0.6, 0.3)，這裏的橫縱座標都是以當前的設備寬度來計算的！
3.3 圖層的設計
面對這樣一個相對來說比較複雜的2.5D的小遊戲，傳統的開發思路相對來說會顯得成本有些偏高，合理的將遊戲中的圖層分離，能夠很好的提高我們模塊的複用性，也能夠使我們更專注的去開發構建每個層上的交互，管理每一層上的圖片結構，在這裏，小編將這個遊戲分離成了三層，即一下三層：
天空背景層，道路層，建築層
各層的分工如下：
天空背景層：繪製雲彩
道路層：繪製人物，車輛
還有一個建築物層：建築物層包含不同的建築物，各建築物都是獨立的容器，用於承載在當前建築物上的動畫效果！
從代碼層面上看，我們也能夠將各個層的構建行爲分離開：
當然，我們也可以將每一層網格化，比如道路層，可以把各個建築的槽位分離，做成單獨的容器，從而能夠更靈活的佈局，之後大家也可以看下下面小編補充的皮膚設計的代碼，小編通過繼承的方式儘可能的拆分不同的層！
3.4 人物、車輛的動效設計
仔細觀察我們可以看到人物的走路還是稍顯僵硬，因爲目前的設計同事將人物的運動一共畫成了5幀，這裏的2.5D其實對於我們來說人物的運動軌跡呈現兩個方向足矣，因此這裏的人物只要有10張圖即可，即兩個方向各5幀就好，車輛的話，同理，這裏我們可以先看下人物的幀數圖：
當然這裏人物的幀數越多，人物運動起來給人的感覺越流暢
在這裏可以看下小編對人物運行的處理：
幀數的切換週期是300毫秒，人物每一幀移動的距離是0.3個像素，至於人物運動的直線是如何計算出來的，其實也十分簡單，這是一個簡單的一次函數，即Y = aX + b，因此只要我們能夠在地圖上找到人物的在一條線上的兩個位置的橫縱座標，自然能夠推導出我們希望的人物運行軌跡，即如下這樣：
這兩點的位置，我們是能夠移動人物從而獲得的，因此，解一個簡單的二元一次方程，我們能夠就能夠推導出這個人物的運行軌跡，即：
Y1 = aX1 + b
Y2 = aX2 + b
既然已經獲得了a和b的值，我們就能夠在人物運行動畫的onUpdate回調函數中，構建人物的橫縱座標關係
其實車輛的運行是同樣的，在這裏，小編制作了車輛的拐彎動效，其實也很簡單，無非就是一輛車輛模型，經過一個拐點後執行另一個方程同時切換成另一個方向的幀動畫罷了，看下代碼會比較清晰：
這裏小編聲明瞭一個臨時變量flag，這個flag並不是精靈函數中的自有變量，通過對象構建的方法將這個變量傳遞至函數內部，當車輛運行到小編指定的橫座標的位置時，方法能將這個flag置爲!flag，從而使得車輛模型執行另一個一次函數，從而達到改變車輛運行軌跡的目的！
3.5 皮膚設計思路
大家可以看到，目前的小鎮，有兩個版本，一個是日常版，一個是新年元旦版，大致看下來，其實是一些基本的圖片替換，和添加了一些特別樣式的元素，小編嘗試將皮膚的基本元素拆分出來，通過繼承的方式，來處理多皮膚的情況，這裏也是參考了JAVA多態的編程思想開發，以方便能夠更靈活的開發不同節日對應的皮膚效果！
可以先看下小編的繼承思路：
其實像基礎建築物，金幣禮品以及人物，目前都是不同的皮膚所共有的，因此如果有一個新的皮膚需要開發，小編只需要在建築物這一層之上新建一個或多個圖層，從在聚焦在新圖層上開發效果即可，當然這也會要求設計儘可能的保留原有的設計結構，嘗試在新的圖層之上進行設計，不過，即使沒有這樣設計，我們依舊可以保留這樣的設計模式去開發我們新的皮膚
這裏我們也可以看下小編的基礎皮膚的代碼，這裏還是使用ES6的Class編寫能夠更好的靠近OOP的思想
我在類中嘗試把接下來用於初始化共用圖層的變量包含了進來，以方便接下來的使用，那麼初始化基礎圖層的代碼也會顯的相對簡潔：
接下來看下小編的新年元旦的類，這是一個繼承於普通皮膚的類
ES6的語法小編不想多說，阮一峯大神的網站已經說得很透徹了，大家也可以多去參考：
http://es6.ruanyifeng.com/#README
這裏我們也可以看到，新的皮膚通過super初始化了通用圖層上的元素，那麼新圖層的初始化在哪裏呢，其實也很簡單，子類是存在這樣的一個方法：
這個方法也是專門用於聲明新的圖層，以便於能夠在新圖層上開發當前皮膚的特殊元素，父類也是有這樣的一個方法，只不過父類直接return了，沒有任何作用，這樣也是方便在調用的時候，代碼可以統一，這裏也是借鑑了JAVA多態的方式，因此，我們看下最上層的調用，便會一目瞭然：
其實Hilo的源碼也是通過繼承的方式來構建不同的組件，這樣的場景下使得OOP的思想凸顯的更加重要，這裏也是Hilo組件繼承的基本示意圖：
總結也是爲了更好的提高自己，最後也是鳴謝來自快手的遊戲引擎研發大神和Hilo官網羣中的各位大神解答小弟的疑惑，小編才能夠一步一步構建出來這個遊戲，最後如有紕漏和技術問題，大家多多交流，不對的地方歡迎大家指正~
郵箱還是那個郵箱：[email protected]