如何使用Phaser使畫布響應？

Question

我有一個帶div的空白頁，畫布在哪里。 我試圖使游戲具有響應能力，但是當我檢查元素時，我發現畫布沒有調整大小。 畫布沒有響應。 我希望通過Phaser中的CSS調整畫布的大小。 如果使用純JavaScript進行此操作，則必須縮放鼠標在畫布中的位置。 那么，如何使其具有響應性？

我試圖這樣做：

var game;

function create() {

    // Scaling options
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

    // Have the game centered horizontally
    game.scale.pageAlignHorizontally = true;

    // And vertically
    game.scale.pageAlignVertically = true;

    // Screen size will be set automatically
    game.scale.setScreenSize(true);

}

window.onload = function() {

    // Create game canvas and run some blocks
    game = new Phaser.Game(1280, 720, Phaser.AUTO, 'frame', { create: create });

}

Answer 1

如果要更改畫布的寬度和高度，這是我的方法。 我認為這是Phaser解決方案。 試試看，我從未使用過Phaser。

您的頁面：

var bSize = {
  bWidth: window.innerWidth ||
    root.clientWidth ||
    body.clientWidth,
  bHeight: window.innerHeight ||
    root.clientHeight ||
    body.clientHeight,
};

var game;

var canvas = document.getElementById("canvas");

function create() {

    // Scaling options
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

    // Have the game centered horizontally
    game.scale.pageAlignHorizontally = true;

    // And vertically
    game.scale.pageAlignVertically = true;

    // Screen size will be set automatically
    game.scale.setScreenSize(true);
}

window.onload = function() {

    // Create game canvas and run some blocks
    game = new Phaser.Game(
        bSize.bWidth, //is the width of your canvas i guess
        bSize.bHeight, //is the height of your canvas i guess
        Phaser.AUTO, 
        'frame', { create: create });

    canvas.style.position = "fixed";
    canvas.style.left = 0;
    canvas.style.top = 0;  
}

希望它對您有所幫助！