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