Question

我有一个HTML画布游戏，我希望通过使用CSS3设置其宽度和高度来做出响应。

JS画布游戏的代码是：

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

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



    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/phaser.min.js"></script>
    <script>
        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();

}
    </script>

直播链接：
http://revolutionarydeveloper.com/project-games/index.html

我尝试设置类似＃phaser-div canvas {width：100％;身高：470px;}但它似乎无法奏效。如何使用CSS3使其响应并使用媒体查询修改宽度和高度？

非常感谢

注意：此游戏使用Phaser.JS。如果相关，请包括其链接。
https://cdn.jsdelivr.net/phaser/2.6.2/phaser.js

Answer 1

phaser有自己的游戏响应代码

Phaser.ScaleManager.SHOW_ALL;

查看http://phaser.io/news/2015/02/responsive-games-basics

使用CSS3使JavaScript Canvas游戏响应

2 个答案: