Phaser3 屏幕适配iPhoneX、iPhoneXs的坑 -- 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 -- 为游戏开发深感自豪