前言

開發基于Html5的小游戲并不困難，基本思路就是使用Html5的canvas進行游戲圖像繪制，通過監聽Dom元素的touch事件并觸發相應的動畫，來實現游戲的交互。難在于解決開發后面臨的不同設備游戲畫面、音效等兼容性問題。

使用Hilo可以幫助我們解決開發過程遇到的一些常見的坑。在Hilo中，所有元素包括舞臺、舞臺里的人物物品都是一個對象，有著一些相似的屬性，如寬度、高度等。一個對象可以包括另一個子對象，如舞臺對象可以有人物等子對象。所有元素類對象都是Hilo.View類的子類。

下面通過一個手指觸摸拋球動畫的例子為大家介紹一下怎么使用Hilo來開發一個H5小游戲。

一、 安裝

引入Hilo類庫。

<script type="javascript" src="hilo-standalone.js" ></script>
復制代碼

二、資源預加載

預先加載各種圖片資源，提升用戶體驗。

//這里可以加開始顯示loading動畫的邏輯
var queue = new Hilo.LoadQueue();
var resources = [{id:'ball',type:'png',src:_ball,noCache:false,crossOrigin:'anonymous'},{id:'ball2',type:'png',src:_ball2,noCache:false,crossOrigin:'anonymous'},
];
queue.add(resources);
queue.on('complete',function(e) {//資源加載完成后的邏輯，比如隱藏loading
});
queue.start();
復制代碼

三、創建舞臺

舞臺是一個各種圖形、精靈動畫等的總載體。所有用Hilo創建的可見的對象都必須添加到舞臺或其子容器后，才會被渲染和顯示出來。 舞臺實質上也是一個容器Container，不過它是一個頂級容器。它除開擁有普通容器的功能，它還擁有一些特殊屬性和方法。

• html代碼

<div id="game-container"></div>
復制代碼

• js代碼

var stage = new Hilo.Stage({renderType:'canvas',container: document.getElementById('game-container'),width: 480,height: 320
});
復制代碼

四、啟用事件交互

Hilo對象默認不允許觸發點擊等事件，需要先給舞臺對象啟用。下面這段代碼表示啟用對用戶手指開始觸摸、移動、停止觸摸等事件的事件監聽。

stage.enableDOMEvent(Hilo.event.POINTER_START, true);
stage.enableDOMEvent(Hilo.event.POINTER_MOVE, true);
stage.enableDOMEvent(Hilo.event.POINTER_END, true);
復制代碼

五、創建定時器

用于不斷刷新渲染頁面動畫

var ticker = new Hilo.Ticker(100);
ticker.addTick(stage);
ticker.addTick(Hilo.Tween);
ticker.start();
復制代碼

六、添加舞臺元素

給舞臺添加一個元素“球”。image是資源對象，可以從預加載隊列中獲取，x是球的起始橫坐標，y是球的起始縱坐標，width、height分別是寬度和高度。

var ballImg = queue.getContent('ball');
ball = new Hilo.Bitmap({image:ballImg,x:ballX,y:ballY,width:trueBallWidth,height:trueBallHeight
});
stage.addChild(ball);
復制代碼

七、監聽觸摸事件

用戶開始觸摸舞臺時記錄一下觸摸點的坐標，觸摸結束后再記錄一下此時觸摸點的坐標，通過這兩個坐標計算出手指滑動的方向，從而控制球往哪個方向拋出。

stage.on(Hilo.event.POINTER_START,function(e)e.preventDefault();currentEvent = e.changedTouches[0].identifier;startTouchXList[currentEvent] = e.changedTouches[0].clientX;startTouchYList[currentEvent] = e.changedTouches[0].clientY;endTouchXList[currentEvent] = e.changedTouches[0].clientX;endTouchYList[currentEvent] = e.changedTouches[0].clientY;
});stage.on(Hilo.event.POINTER_MOVE,function(e)e.preventDefault();currentEvent = e.changedTouches[0].identifier;endTouchXList[currentEvent] = e.changedTouches[0].clientX;endTouchYList[currentEvent] = e.changedTouches[0].clientY;
});stage.on(Hilo.event.POINTER_END,function(e)e.preventDefault();endTouchXList[currentEvent] = e.changedTouches[0].clientX;endTouchYList[currentEvent] = e.changedTouches[0].clientY;//拋球throwBall(startTouchXList[currentEvent],startTouchYList[currentEvent],endTouchXList[currentEvent],endTouchYList[currentEvent]);
})
復制代碼

八、動畫實現

實現球飛出的動畫，用Hilo.Tween.to方法來控制tmpBall對象移動。

var tmpBall = new Hilo.Bitmap({image:ballImg,x:ballX,y:ballY-5,width:trueBallWidth,height:trueBallHeight
});
stage.addChild(tmpBall);
//球飛出
Hilo.Tween.to(tmpBall,{x:endPoint.x,y:endPoint.y,width:trueBallWidth/percent,height:trueBallWidth/percent
},{duration:ballSpeed,delay:0,ease:Hilo.Ease.Linear.EaseNone,onComplete:function() {});
復制代碼

參考文檔

• 官網：hiloteam.github.io/index.html
• 官方演示：hiloteam.github.io/examples/in…

---

• 關注微信公眾號“全棧社區”，可獲取更多站長、開發者必備的前端、后端、運維技術干貨。

• 18元美國VPS、建站主機：www.salasolo.com