【问题标题】:How to connect Phaser with Cordova如何将 Phaser 与 Cordova 连接
【发布时间】:2016-06-16 20:57:40
【问题描述】:

我正在使用 Visual Studio 2015 开发 html5 游戏,并已下载 Phaser 2.4.6 并正在尝试获取 apk。我可以取出但 Phaser 没有加载...

HTML

<body>
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/src/Phaser.js"></script>
<script src="scripts/index.js"></script>
</body>

index.js

document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

function onDeviceReady() 
{
    document.addEventListener( 'pause', onPause.bind( this ), false );
    document.addEventListener('resume', onResume.bind(this), false);
    var game = new Phaser.GAMES(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
    alert("Phaser Going Called...");
};

我没有收到启动 Phaser 的警报消息。

【问题讨论】:

  • 以上是两个不同的文件吗?或者那是你的 HTML 文件?我也试图清理你的问题,但我不确定你说“我可以取出但 Phaser 没有加载......”时的意思
  • 是的,上面我们有 2 个不同的文件 1) Html 2) Javascript 我在 HTML 页面中加载了 cordova、platformOverrides、Phaser、index,使用 index.js 我尝试使用上面的移相器代码启动移相器但它没有启动,并且在启动的下方我们有一个警告框,游戏中没有出现
  • 如果你只在浏览器中运行它会起作用吗?任何控制台错误?我认为您正在尝试将游戏附加到一个也不存在的 div。
  • 在浏览器中我们没有任何问题,它可以完美运行...但在 android 中我们面临这个问题...

标签: android html cordova phaser-framework


【解决方案1】:

我下载了 VS 2015 Update 1 并安装了 Visual Studio 中支持 Apache Cordova 的必要位。

使用新的项目模板,我最终得到了以下 index.html

<!DOCTYPE html>
<html>
    <head>
    <!--
        Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
        For details, see http://go.microsoft.com/fwlink/?LinkID=617521
    -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>SimplePhaserTest</title>
    </head>
    <body>
        <div class="app">
            <p id="deviceready" class="event">Connecting to Device</p>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="scripts/platformOverrides.js"></script>
        <script src="scripts/phaser.min.js"></script>
        <script type="text/javascript" src="scripts/index.js"></script>
    </body>
</html>

index.js 包含以下内容:

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkID=397704
// To debug code on page load in Ripple or on Android devices/emulators: launch your app, set breakpoints, 
// and then run "window.location.reload()" in the JavaScript Console.
(function () {
    "use strict";

    document.addEventListener('deviceready', onDeviceReady.bind(this), false);

    function onDeviceReady() {
        // Handle the Cordova pause and resume events
        document.addEventListener('pause', onPause.bind(this), false);
        document.addEventListener('resume', onResume.bind(this), false);

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        var element = document.getElementById("deviceready");
        element.innerHTML = 'Device Ready';
        element.className += ' ready';

        var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create })
        alert("Phaser Going Called ...");
    };

    function preload() {

    };

    function create() {

    };

    function onPause() {
        // TODO: This application has been suspended. Save application state here.
    };

    function onResume() {
        // TODO: This application has been reactivated. Restore application state here.
    };
})();

在本地运行,然后在 Android 设备 (Galaxy S4) 上运行会按预期生成警报消息。

也许将其作为一个问题提出只是一些问题,但我在您的代码中看到的一些问题都存在于您的游戏创建中:

var game = new Phaser.GAMES(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });

这应该是 new Phaser.Game(,并且您正在将其添加到现有的 div 中,ID 为 phaser-example,这在您的示例 HTML 中不存在。

浏览器中的new Phaser.GAMES 代码也应该卡住了,所以我很困惑为什么你也不会在那里看到问题。

如果有帮助,我还在Git repo 中提供了上述代码的工作示例(链接到特定提交,以防我将来扩展存储库)。

【讨论】:

  • 感谢您的回答!!!但是问题没有解决,我复制了你的整个 HTML 代码和 Index.js 代码并将其放入我的编码中……我从你的 GIT 帐户中获取 Phaser.js 文件并将其放入我的文件中,然后我尝试运行应用程序只是我在设备中获得了“设备就绪”文本....就是这样....然后我导入您的完整代码并在 Visual Studio 中创建一个项目,如果我运行 Visual Studio 没有结果..否浏览器也弹出
  • 如果您使用新项目也没有看到警报,这听起来像是设备问题。您使用什么设备进行测试?如果您认为这可能有益,我可以更新项目以实际使用游戏实例; alert 调用可能存在问题。
  • 我创建了一个仅显示一些文本和 Phaser 徽标的新项目。我已经创建了一个 README 来介绍我为达到这一点所做的工作。它不使用警报,因此它可能更适合您。 github.com/JamesSkemp/cordova-testing/tree/master/…
猜你喜欢
  • 2015-08-07
  • 1970-01-01
  • 2017-12-14
  • 2015-04-11
  • 2018-09-30
  • 2020-08-23
  • 2011-03-01
  • 2019-01-29
  • 1970-01-01
相关资源
最近更新 更多