离子应用程序中的Phaser游戏

Question

我有一个相位器游戏，我想在离子应用程序中实现。我的想法是从外部链接运行移相器游戏并在离子应用程序内创建一个按钮，该按钮链接到游戏并从InAppBrowser或Cordova Web视图启动，如here所述。

我在移动浏览器（chrome）中运行移相器游戏没有问题，但是当它使用InAppBrowser或Cordova Web视图从应用程序启动时游戏很小。

另外，我无法点击按钮。

任何想法可能是什么问题？在移相器游戏中，或在应用程序中......

它在浏览器中运行良好。

链接到游戏：works on firefox and on mobile。

(function() {
   var game = new Phaser.Game(JOGO.area.width, JOGO.area.height, Phaser.CANVAS, 'game');     

           // -- gamestates
           game.state.add('loading', JOGO.loading);
           game.state.add('preload', JOGO.preload);
           game.state.add('menu', JOGO.menu);
           game.state.add('levelSelect', JOGO.levelSelect);
           game.state.add('jogo', JOGO.jogo);
           game.state.add('fim', JOGO.fim);

           game.state.start('loading');
})();

播放按钮：

var jogar = this.game.add.button(this.game.width / 2, this.game.height - this.game.height/4, "jogar");
        jogar.anchor.set(0.5);
        menuGroup.add(jogar);
        jogar.state = "levelSelect";
        jogar.events.onInputDown.add(this.onSpriteDown, this);
        jogar.events.onInputOver.add(this.onSpriteOver, this);

Answer 1

修改

当我第一次在浏览器中加载游戏时，它在menu.js中给了我一个错误：

onSpriteOver : function (sprite, pointer) {
    JOGO.somButton.play(); //Error on this line!!!!!
    var xpos = sprite.x;
    if(!animate)
    var tween = this.game.add.tween(sprite)
            .to({ x: xpos + 6 }, 100, Phaser.Easing.Linear.None)
            .to({ x: xpos - 5 }, 100, Phaser.Easing.Linear.None)
            .to({ x: xpos + 4 }, 100, Phaser.Easing.Linear.None)
            .to({ x: xpos - 3 }, 100, Phaser.Easing.Linear.None)
            .to({ x: xpos }, 100, Phaser.Easing.Linear.None)
            .start();
},

我认为somButton未定义。我重新加载，它在浏览器和移动设备上运行正常。它并不总是给出错误。它只在浏览器和移动设备上首次加载时出错。

<强>原始

您的移相器游戏是否具有固定的宽度和高度，或者它是否填充了视口：

game = new Phaser.Game(window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio, Phaser.CANVAS, 'gameArea');

这取自这里：

https://www.joshmorony.com/how-to-scale-a-game-for-all-device-sizes-in-phaser/