1. 程式人生 > >PhaserJS 3 螢幕適配時的小坑 -- JavaScript Html5 遊戲開發

PhaserJS 3 螢幕適配時的小坑 -- JavaScript Html5 遊戲開發

  PhaserJS
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 -- 為遊戲開發深感自豪