JavaScriptキャンバスゲームをCSS3に反応させる

Question

私はCSS3を使って幅と高さを設定して反応させるHTMLキャンバスゲームを持っています。

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

私は＃のような何か設定しようとしたフェイザーを-divのキャンバス{幅：100％;高さ：470ピクセル;}しかし、それは動作しないようです。 CSS3を使用して反応させる方法と、メディアクエリを使って幅と高さを変更する方法はありますか？

多くのおかげ

注：このゲームはPhaser.JSを利用しています。それが関連している場合には、そのリンクを含む。
https://cdn.jsdelivr.net/phaser/2.6.2/phaser.js

Answer 1

フェイザーがhttp://phaser.io/news/2015/02/responsive-games-basics

Answer 2

Phaser method 

this.time.events.add(200, function() { 
    MyGame.calculateDimensions();    
    this.scale.setGameSize(MyGame.canvasWidth, MyGame.canvasHeight);   
}, this); 


jQuery method 

$(window).resize(function() { resizeGame(); }); 
    function resizeGame() { 

    var innerWidth = window.innerWidth; 
    var innerHeight = window.innerHeight; 
    var gameRatio = innerWidth/innerHeight; 

    game.width = Math.ceil(320*gameRatio); 
    game.height = 320; 
    game.stage.bounds.width = Math.ceil(320*gameRatio); 
    game.stage.bounds.height = 320; 
    game.scale.refresh(); 

}