前言

开发基于Html5的小游戏并不困难，基本思路就是使用Html5的canvas进行游戏图像绘制，通过监听Dom元素的touch事件并触发相应的动画，来实现游戏的交互。难在于解决开发后面临的不同设备游戏画面、音效等兼容性问题。

使用Hilo可以帮助我们解决开发过程遇到的一些常见的坑。在Hilo中，所有元素包括舞台、舞台里的人物物品都是一个对象，有着一些相似的属性，如宽度、高度等。一个对象可以包括另一个子对象，如舞台对象可以有人物等子对象。所有元素类对象都是Hilo.View类的子类。

下面通过一个手指触摸抛球动画的例子为大家介绍一下怎么使用Hilo来开发一个H5小游戏。

如何用java开发小游戏（阿里开源HTML5小游戏开发框架Hilo实战教程）(1)

一、 安装

引入Hilo类库。

<script type="javascript" src="http://img.studyofnet.comhilo-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，不过它是一个顶级容器。它除开拥有普通容器的功能，它还拥有一些特殊属性和方法。

<div id="game-container"></div>

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() { });

参考文档

,