PhaserJS 3 屏幕适配时的小坑 -- JavaScript Html5 游戏开发

 

PhaserJS

巨坑：
在config内不要把 width 设为 window.innnerWidth
在config内不要把 width 设为 window.innnerWidth
在config内不要把 width 设为 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'; } } 

更多游戏开源教学：www.iFIERO.com -- 为游戏开发深感自豪