Hilo/examples/Resize.html
2017-05-22 13:34:32 +08:00

65 lines
2.0 KiB
HTML

<!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>resize - Hilo Example</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="../build/standalone/hilo-standalone.min.js"></script>
<script type="text/javascript" src="../build/flash/hilo-flash.min.js" data-auto="true"></script>
<style>
#header{
position: absolute;
left: 0px;
top:0px;
z-index: 999;
background: none;
width: 100%;
pointer-events: none;
}
#header div{
display: none;
}
</style>
</head>
<body onload="init();">
<div id="header">
<p>屏幕自适应例子,通过缩放舞台宽高来实现</p>
</div>
<div id="game-container"></div>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
function init(){
var gameWidth = 1440;
var gameHeight = 900;
//init stage
var stage = new Hilo.Stage({
renderType:renderType,
container: gameContainer,
width: gameWidth,
height: gameHeight,
scaleX:innerWidth/gameWidth,
scaleY:innerHeight/gameHeight
});
//start stage ticker
var ticker = new Hilo.Ticker(20);
ticker.addTick(stage);
ticker.start();
//create a bitmap
var bmp = new Hilo.Bitmap({
image: 'images/map.jpg',
}).addTo(stage);
window.onresize = function(){
stage.scaleX = innerWidth/gameWidth;
stage.scaleY = innerHeight/gameHeight;
stage.resize(gameWidth, gameHeight, true);
};
}
</script>
</body>
</html>