前言
开发基于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() {
});
参考文档
关注微信公众号“全栈社区”，可获取更多站长、开发者必备的前端、后端、运维技术干货。
18元美国VPS、建站主机：https://www.salasolo.com
