<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />
<title>Text - Hilo Example</title>
<link rel="stylesheet" type="text/css" href="./static/css/sytle.css">
<script type="text/javascript" src="./static/js/hilo-standalone.min.js"></script>
<img src="./static/images/fish.png" alt="" id="fish" style="display:none">
</head>
<body>
<div id="game-container"></div>
<div style="padding: 20px; text-align: center;">
<button onclick="reset()">重播</button>
</div>
<script type="text/javascript" src="./static/js/demo.js"></script>
<script type="text/javascript">
var stage = new Hilo.Stage({
renderType: renderType,
container: gameContainer,
width: stageWidth,
height: stageHeight
});
//start stage ticker
var ticker = new Hilo.Ticker(60);
ticker.addTick(stage);
ticker.start();
//添加背景
var bmp = new Hilo.Bitmap({
image: './static/images/map.jpg',
rect: [0, 0, stageWidth, stageHeight],
x: 0,
y: 0
}).addTo(stage);
var zidanImg = [];
var zidan = [];
var zidanStep = 0;
for (i = 0; i < 3; i++) {
zidanImg[i] = new Hilo.TextureAtlas({
image: './static/images/zidan.png',
width: 64,
height: 64,
frames: {
frameWidth: 64,
frameHeight: 64,
numFrames: 1
},
sprites: {
zidanImg: { from: 0, to: 0 }
}
});
zidan = new Hilo.Sprite({
frames: zidanImg[i].getSprite('zidanImg'),
x: 10 * (i + 1),
y: 100 + 10 * (i + 1),
interval: 10,
timeBased: true,
loop: true,
onUpdate: function () {
if (this.x < 200) {
// console.log("#debug#🚀 ~ file: index.html:84 ~ init ~ this:", this.style)
if (this.x > stage.width - this.pivotX) {
this.x = 0;
} else {
var paoWuXianRes = paoWuXian(this.x + 3);
// console.log("#debug#🚀 ~ file: index.html:88 ~ init ~ paoWuXianRes:", paoWuXianRes)
this.x = paoWuXianRes.x;
// this.y = paoWuXianRes.y;
//this.x += 3;
}
} else {
manStart = true;
}
}
}).addTo(stage);
//text wrapped in dom element
}
// 子弹
//init texture atlas
var atlas = new Hilo.TextureAtlas({
image: './static/images/man.png',
width: 100,
height: 88,
frames: {
frameWidth: 100,
frameHeight: 88,
numFrames: 1
},
sprites: {
fish: { from: 0, to: 0 }
}
});
var manStart = false;
var fish = new Hilo.Sprite({
frames: atlas.getSprite('fish'),
x: 0,
y: 300,
interval: 6,
timeBased: false,
loop: true,
onUpdate: function () {
if (manStart) {
if (this.x < 200) {
this.x += 3;
this.y -= 3;
}
}
}
}).addTo(stage);
function manStart() {
manStart = true;
}
function reset() {
manStart = false;
for (i = 0; i < zidanImg.length; i++) {
zidan[i].x = 10 * (i + 1);
zidan[i].y = 100 + 10 * (i + 1);
}
fish.x = 0;
fish.y = 300;
}
function paoWuXian(x) {
// var y = 1 * x * x + 1 * x + 2;
return {
x, y: 100
}
}
</script>
</body>
</html>