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

巨坑：
在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 -- 为游戏开发深感自豪