简体   繁体   English

如何将Phaser与Cordova连接

[英]How to connect Phaser with Cordova

I am using Visual Studio 2015 to develop html5 games, and have downloaded Phaser 2.4.6 and am trying to get an apk out. 我正在使用Visual Studio 2015开发html5游戏,并下载了Phaser 2.4.6,并试图获取一个APK。 I can able to take out but Phaser is not loading... 我可以取出,但相位器无法加载...

HTML 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 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...");
};

I didn't get an alert message that I initiated Phaser. 我没有收到启动相位器的警报消息。

I downloaded VS 2015 Update 1 and installed the necessary bits for Apache Cordova support in Visual Studio. 我下载了VS 2015 Update 1,并在Visual Studio中安装了对Apache Cordova的支持所需的位。

Using a new project template I ended up with the following index.html : 使用新的项目模板,我得到了以下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 contains the following: 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.
    };
})();

Running this locally and then running on an Android device (Galaxy S4) resulted in the alert message as expected. 在本地运行此程序,然后在Android设备(Galaxy S4)上运行,将产生预期的警报消息。

Maybe there was just some issues with bringing this over as a question, but some issues I saw in your code are both in your game creation: 提出这个问题可能只是一些问题,但是我在您的代码中看到的一些问题都在您的游戏创建中:

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

That should be new Phaser.Game( , and you're adding it to an existing div with an id of phaser-example which isn't present in your example HTML. 那应该是new Phaser.Game( ,并且您要将其添加到现有的div ,其ID为phaser-example ,但示例HTML中不存在。

It should be choking on the new Phaser.GAMES code in the browser as well, so I'm confused why you wouldn't be seeing an issue there too. 它也应该在浏览器new Phaser.GAMES代码感到窒息,所以我感到困惑,为什么您也不会在那里看到问题。

If it helps, I also have a working example of the above code in a Git repo (linking to specific commit, in case I expand upon the repo in the future). 如果有帮助,我还将在Git存储库中提供上述代码的一个有效示例(链接到特定提交,以防将来扩展存储库)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM