PhaserJS
坑：
在config內(nèi)不要把 width 設(shè)為 window.innnerWidth
在config內(nèi)不要把 width 設(shè)為 window.innnerWidth
在config內(nèi)不要把 width 設(shè)為 window.innnerWidth
重要的事情得說三遍...
var game;
// once the window loads...
window.onload = function () {
// 接收 websocket;
// config of the game;
var config = {
type: Phaser.AUTO,
parent: 'bitgame',
width: 640, // don't window.innerWidth
height: 512,
physics: {
default: 'arcade',
arcade: {
gravity: {
y: 0
},
debug: false,
}
},
//*** scenes used by the game
scene: [BootScene,PlayGameScene,UIScene]
}
game = new Phaser.Game(config);
// game.scene.add('Boot', BootScene); //*** key,class */
// game.scene.add('PlayGame', PlayGameScene);
// game.scene.add('UI', UIScene);
// game.scene.start('Boot');
window.focus();
resize();
window.addEventListener('resize', resize, false);
}
function resize() {
var canvas = document.querySelector('canvas');
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var windowRatio = windowWidth / windowHeight;
var gameRatio = game.config.width / game.config.height;
if (windowRatio < gameRatio) {
canvas.style.width = windowWidth + 'px';
canvas.style.height = (windowWidth / gameRatio) + 'px';
} else {
canvas.style.width = (windowHeight * gameRatio) + 'px';
canvas.style.height = windowHeight + 'px';
}
}
更多游戲開源教學(xué)：www.iFIERO.com -- 為游戲開發(fā)深感自豪
