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;  
}

我希望它能帮到你！

如何使用Phaser使画布响应？

1 个答案: