Hilo 例子
羊渝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="full-screen" content="true">
<meta name="screen-orientation" content="portrait">
<meta name="x5-fullscreen" content="true">
<meta name="360-fullscreen" content="true">
<script src="hilo-standalone.min.js"></script>
<style type="text/css"></style>
</head>
<body style="background-color: #fff; margin: 0; padding: 0;" onload="init();">
<div class="gamepage" id="gamepage"></div>
<script type="text/javascript">
function init() {
this.stage = new Hilo.Stage({
container: document.body,
width: 375,
height: 667,
scaleX: 1,
scaleY: 1
});
//设定舞台刷新频率为60fps
this.ticker = new Hilo.Ticker(60);
//把舞台加入到tick队列
this.ticker.addTick(this.stage);
//启动ticker
this.ticker.start();
// this.initBackground();
// 层级：先创建的在下面，后创建在上面
this.ground = new Hilo.Bitmap({
id: 'ground',
image: 'http://xxxxx/home/2020-35/10000672/b0c78d21-4c2c-4f41-ad87-c01630a66688.jpg',
// rect: [0, 0, 375, 667], 不需要剪切。如一个大于舞台的图片 剪切了就只剩下剪切的范围
// x: 0,
// y: 0
}).addTo(this.stage);
this.startButton = new Hilo.Button({
image: 'http://xxxxx/home/2020-37/10000672/734d8f60-69e4-4e8a-a1aa-a433fea2f3d9.png',
upState: { rect: [0, 0, 64, 64] },
overState: { rect: [64, 0, 64, 64] },
downState: { rect: [128, 0, 64, 64] },
disabledState: { rect: [192, 0, 64, 64] }
}).addTo(this.stage);// 一定要addTo 舞台
this.ticker.addTick(Hilo.Tween); // 缓动无自动执行，需要addTick
// Hilo统一了事件的开始、移动和结束三个事件的映射名称，方便自动适配不同平台：
// Hilo.event.POINTER_START - mousedown / touchstart
// Hilo.event.POINTER_MOVE - mousemove / touchmove
// Hilo.event.POINTER_END - mouseup / touchend
// 让舞台stage能接受mousedown或touchstart事件
// stage.enableDOMEvent(Hilo.event.POINTER_START, true);
stage.enableDOMEvent([Hilo.event.POINTER_START, Hilo.event.POINTER_MOVE, Hilo.event.POINTER_END], true);
let y = 0;
// 监听按钮点击
this.startButton.on(Hilo.event.POINTER_START, function (e) {
y = y + 667;
this.moveBg(y);
}.bind(this));// bind(this) 否则里面无法用this
}
function moveBg(y) {
/* all previous code here */
//循环移动地面
Hilo.Tween.to(this.ground, { y: -y }, { duration: 2000, loop: false });
}
function initBackground() {
var bgWidth = 375;
var bgHeight = 1250;
document.body.insertBefore(Hilo.createElement('div', {
id: 'bg',
style: {
position: 'absolute',
background: 'url(images/gameBg.jpg) no-repeat',
backgroundSize: bgWidth + 'px, ' + bgHeight + 'px',
width: bgWidth + 'px',
height: bgHeight + 'px'
}
}), this.stage.canvas);
}
</script>
</body>
</html>
类似资料：