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

Question

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

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

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

当我使用纵向模式刷新页面时，我会看到 ok 对话框:

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

这是初始化移相器游戏的代码:

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/

谢谢

Answer 1

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

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

来自描述:

This fix works by listening to the device's accelerometer to predict when an orientation change is about to occur. When it deems an orientation change imminent, the script disables user zooming, allowing the orientation change to occur properly, with zooming disabled. The script restores zoom again once the device is either oriented close to upright, or after its orientation has changed. This way, user zooming is never disabled while the page is in use.

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