Question

我有一个脚本，用于由其他人编写的示例游戏，使用phaser.js工作。我主要是一个HTML / CSS人，我的JS知识非常基础。现在，游戏使用JS在画布上指定高度和宽度“832”和“508”。我希望游戏能够响应，即使用CSS设置高度和宽度。

这就是我称之为游戏的方式：

    <div class="game-box">
         <div class="game-container">
              <div id="phaser-div">

              </div>
         </div><!-- end game-container -->
    </div><!-- end game-box -->

这是游戏的剧本：

var game = new Phaser.Game(832, 508, Phaser.WEBGL, 'phaser-div', { preload: preload, create: create, update: update });

var background;
var filter;

function preload() {

    var urlBase = location.href.substring(0, location.href.lastIndexOf("/") + 1);
    game.load.image('phaser', urlBase + 'games/game001/game001-logo.png');
    game.load.script('filter', urlBase + 'games/game001/marble.js');

    this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.setShowAll(); window.addEventListener('resize', function () { this.game.scale.refresh(); }); this.game.scale.refresh();
}

function create() {

    var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
    logo.anchor.setTo(0.5, 0.5);

    background = game.add.sprite(0, 0);
    background.width = 832;
    background.height = 508;

    filter = game.add.filter('Marble', 832, 508);
    filter.alpha = 0.2;

    //  The following properties are available (shown at default values)

    //  filter.speed = 10.0;
    //  filter.intensity = 0.30;

    background.filters = [filter];

}

function update() {

    filter.update();

}

我尝试在CSS中使用“＃phaser-div canvas”选择器设置宽度和高度，但它不起作用。让我知道这是如何可能的。

非常感谢。

Answer 1

您还可以使用$(HTMLElement).height()和$(HTMLElement).width()来接收元素的高度和宽度，以便您可以做出相应的响应。这允许您避免使用静态值（像素）并使用灵活的布局（以％或vw定义尺寸）。

JS Game使用CSS而不是JS将响应高度和宽度设置为画布

1 个答案: