python小游戏开发案例，阿里开源HTML5小游戏开发框架Hilo实战教程
python小游戏开发案例，阿里开源HTML5小游戏开发框架Hilo实战教程var ticker = new Hilo.Ticker(100); ticker.addTick(stage); ticker.addTick(Hilo.Tween); ticker.start(); 六、添加舞台元素给舞台添加一个元素“球”。image是资源对象，可以从预加载队列中获取，x是球的起始横坐标，y是球的起始纵坐标，width、height分别是宽度和高度。stage.enableDOMEvent(Hilo.event.POINTER_START true); stage.enableDOMEvent(Hilo.event.POINTER_MOVE true); stage.enableDOMEvent(Hilo.event.POINTER_END true); 五、创建定时器用于不断刷新渲染页面动画<script type="javascript" src="h
前言开发基于Html5的小游戏并不困难，基本思路就是使用Html5的canvas进行游戏图像绘制，通过监听Dom元素的touch事件并触发相应的动画，来实现游戏的交互。难在于解决开发后面临的不同设备游戏画面、音效等兼容性问题。
使用Hilo可以帮助我们解决开发过程遇到的一些常见的坑。在Hilo中，所有元素包括舞台、舞台里的人物物品都是一个对象，有着一些相似的属性，如宽度、高度等。一个对象可以包括另一个子对象，如舞台对象可以有人物等子对象。所有元素类对象都是Hilo.View类的子类。
下面通过一个手指触摸抛球动画的例子为大家介绍一下怎么使用Hilo来开发一个H5小游戏。
引入Hilo类库。
<script type="javascript" src="https://img.aigexing.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，不过它是一个顶级容器。它除开拥有普通容器的功能，它还拥有一些特殊属性和方法。
- 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() { }); 参考文档
- 官网：http://hiloteam.github.io/index.html
- 官方演示：http://hiloteam.github.io/examples/index.html
- 关注微信公众号“全栈社区”，可获取更多站长、开发者必备的前端、后端、运维技术干货。
- 18元美国VPS、建站主机：https://www.salasolo.com
