阿里开源HTML5小游戏开发框架Hilo实战教程

前言

开发基于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

转载于:https://juejin.im/post/5caf29c5e51d456e3f2fb6dc