JS Game 使用 CSS 而不是 JS 将响应的高度和宽度设置为画布

Posted

技术标签:

【中文标题】JS Game 使用 CSS 而不是 JS 将响应的高度和宽度设置为画布【英文标题】:JS Game set responsive height and width to canvas using CSS instead of JS 【发布时间】:2016-10-27 01:01:10 【问题描述】:

我有一个由其他人编写的示例游戏脚本,用于使用 phaser.js。我主要是 html/CSS 人,我的 JS 知识非常基础。现在游戏使用JS在画布上指定高度和宽度“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”选择器设置宽度和高度,但没有成功。让我知道这怎么可能。

非常感谢。

【问题讨论】:

这与 canvas 具有 width 和 height 属性有关。改用 sytle.width 所以我应该改变 background.width = 832;到 background.style.width = 832 和 background.height = 508;到 background.style.height=508?还有什么需要修改的地方吗? 没错。 canvas 具有控制点矩阵的属性。不幸的是,这些被称为宽度和高度,这是您的困惑的来源。 【参考方案1】:

您也可以使用$(HTMLElement).height()$(HTMLElement).width()来接收元素的高度和宽度,以便做出相应的响应。这使您可以避免使用静态值(像素),而是使用灵活的布局(以 % 或 vw 定义尺寸)。

【讨论】:

您能否对我在问题中编写的 JS 代码进行更改,因为我是一名 HTML/CSS 人员,并且我的 javascript 知识非常基础。非常感谢!

以上是关于JS Game 使用 CSS 而不是 JS 将响应的高度和宽度设置为画布的主要内容,如果未能解决你的问题,请参考以下文章

将css和js缓存到localStorage缓存,提高网页响应速度

如何在 vue.js 欢迎组件中使用引导程序而不是尾风 CSS

如何将我的 Html/JS/CSS 知识用于 iO、Android 等?

SPDY/HTTP2 是不是连接响应?

仅使用 CSS3/HTML5 的响应式等高列

Express.JS:如何按名称而不是数字设置响应状态?