javascript - JS 游戏使用 CSS 而不是 JS 将响应式高度和宽度设置为 Canvas

Question

我有一个由其他人编写的示例游戏脚本，可以使用 phaser.js 运行。我主要是一个 HTML/CSS 的人，我的 JS 知识非常基础。现在游戏使用 JS 在 Canvas 上指定高度和宽度“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 定义尺寸)。