如何使用 Phaser 库创建完全响应的 html5 游戏？答案

【问题标题】：How create fully responsive html5 game using Phaser library?如何使用 Phaser 库创建完全响应的 html5 游戏？
【发布时间】：2016-06-23 11:11:48
【问题描述】：

我正在使用 Phaser 2.5.0（也尝试过 2.4.8）并且我正在尝试使用 Phaser 库创建完全响应的游戏。

刷新页面后一切正常，图片如下：

但是当我将旋转更改为纵向对话框消息时，图像：

当我使用纵向模式刷新页面时，我得到了确定对话框：

所以问题是当我调整浏览器窗口大小时。

这是初始化相位游戏的代码：

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO);

也试过了：

var game = new Phaser.Game("100%", "100%", Phaser.AUTO);

这是位于 main.js 中的创建函数：

    create: function(){
        console.log('create');

        this.game.antialias = true;
        this.game.stage.smoothed = true;
        this.input.maxPointers = 1;
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        this.scale.minHeight = 0;
        this.game.time.advancedTiming = true;
   },

所以要再次说明问题是当我调整浏览器窗口的大小时，但当我刷新时，它就无法正常工作。游戏必须支持调整大小。

这是一个简单的例子，它给出了几乎相同的结果，刷新时可以，但调整大小时就不行了：https://jsfiddle.net/CroDac/tv010u0t/

谢谢

【问题讨论】：

你在使用 Interface Builder。如果你确定你的约束是正确的。有时他们不是，你会得到畸形。
@MNM - 不，我正在通过编辑器手动创建游戏
我会是你硬编码了内部窗口的大小，当你旋转它时，窗口会变得一团糟，也许
@MNM - 宽度和高度在 css 中为 100%
我敢打赌，当您转动手机时，会出现更新和重绘问题。我敢打赌，每次转动手机时，您都必须手动调用重绘方法才能正确显示

标签： html phaser-framework

【解决方案1】：

iOS 中有一个旧的但显然没有修复的错误导致（原因？）这个。网上有几种解决方法，其中一个在这里：

https://github.com/scottjehl/iOS-Orientationchange-Fix

来自描述：

此修复通过监听设备的加速度计来预测当方向改变即将发生时。当它认为一个方向改变迫在眉睫，脚本禁用用户缩放，允许通过缩放正确地改变方向禁用。一旦设备恢复，脚本将再次恢复缩放接近直立的方向，或在其方向改变之后。这个这样，用户缩放在页面使用时永远不会被禁用。

也许这可以帮助你....

【讨论】：

问题不仅在于我改变方向，还在于我在桌面浏览器和移动浏览器上调整浏览器窗口大小和/或改变方向