使CSS5響應CSS Canvas遊戲

我有一個HTML帆布遊戲，我想使用CSS3設置其寬度和高度作出響應。使CSS5響應CSS Canvas遊戲

的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％;身高：470px;}但它似乎沒有工作。如何使用CSS3使其響應，並使用媒體查詢修改寬度和高度？

很多謝謝

注意：這個遊戲利用Phaser.JS。包括其相關鏈接。
https://cdn.jsdelivr.net/phaser/2.6.2/phaser.js

來源

2016-10-27 Alex Zahir

移相器都有自己的製作遊戲，以響應

Phaser.ScaleManager.SHOW_ALL;

看代碼在http://phaser.io/news/2015/02/responsive-games-basics

來源

2016-10-27 11:39:16 anshuVersatile

這是好事，但有一個問題吧。我必須刷新相位器的頁面才能正確縮放，即它在頁面加載時有響應。但是，如果我調整頁面大小，它不能正確縮放。有沒有一種方法可以在每次調整頁面時更新？如果不是，我可以使用CSS控制寬度和高度嗎？ –

您必須對其進行編碼，例如將resize事件附加到body並決定調整大小的屬性的基礎，因爲當涉及phaser時，它會頻繁地繪製canvas，因此它不能像bootstrap那樣響應（phaser canvas不僅僅是我們可以說的元素它是動畫繪圖）。 – anshuVersatile

感謝您的解釋anshu。如果您可以引導我如何編寫Phaser畫布的代碼來根據頁面寬度調整大小，我將非常感激，因爲我的JavaScript技能級別非常中等。 –

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

}

來源

2016-10-27 12:09:34 anshuVersatile

jQuery方法不起作用。我在函數預加載中添加了相位器方法，也沒有工作。這可能是什麼原因？ –

看看https://github.com/EnclaveGames/Enclave-Phaser-Template/是完全響應 – anshuVersatile

使CSS5響應CSS Canvas遊戲

回答

相關問題