如何将Phaser与Cordova连接起来

时间:2016-03-03 13:39:40

标签: android html5 cordova phaser-framework

我正在使用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的警告信息。

1 个答案:

答案 0 :(得分: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(,并且您将其添加到ID为div的现有phaser-example,而您的示例HTML中不会显示该内容。{ / p>

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

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