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(); 

}