如何在离子的特定页面上实现移相器游戏

时间:2016-07-01 22:25:03

标签: javascript html ionic-framework phaser-framework

我正在创建一个商业应用程序,在这个应用程序中,您登录并且下面有五个选项卡,我试图在其中一个选项卡中单击创建时启动移相器游戏,但我是新手这个和他们的对离子和相位器结合没什么帮助。我遇到的问题是我在我的索引文件中为phaser和ionic创建了两个div,但我只想在其中一个选项卡上使用phaser而不是在每个屏幕上重叠。如我的索引文件所示。

这是我的索引文件

 int dist[][]; // this contains the cost to get to some square
//dist is initialized with a large number

struct node{
    int i, j; //location
    node(int ii, int jj){
        i = ii;
        j = jj;
    }

    bool operator < (node &n)const{ //set in c++ will use this to sort
        if(dist[i][j] == dist[n.i][n.j]) return i < n.i || j < n.j; //this is necessary
        return dist[i][j] < dist[n.i][n.j];
    }
};

set <node> q;

int main(){
    //initialized dist with large number
    dist[S.i][S.j] = 0; //we start from source
    q.push(node(S.i, S.j));
    while(true){
        //pick the first element in set
        //this element has the smallest cost
        //update dist using this node if necessary
        //for every node that you update remove from q and add it again
        //this way the location of that node will be updated in q
        //if you see square 'D' you are done and you can print dist[D.i][D.j]
    }

    return 0;
}

这是我希望相位器游戏启动的页面,我想知道如何在这里实现代码,以便点击时启动它

我想让phaser从这个页面开始

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user- scalable=no, width=device-width">
<title></title>


<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->


<link href="lib/ionic/css/ionic.css" rel="stylesheet">


<style type="text/css">
  .platform-ios .manual-ios-statusbar-padding{
    padding-top:20px;
  }
  .manual-remove-top-padding{
    padding-top:0px; 
  }
  .manual-remove-top-padding .scroll{
    padding-top:0px !important;
  }
</style>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>


<script type="text/javascript" src="js/phaser.min.js"></script>
<script type="text/javascript" src="js/boot.js"></script>
<script type="text/javascript" src="js/preload.js"></script>
<script type="text/javascript" src="js/gameover.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/gametitle"></script>





<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
<script type="text/javascript">
(function() {
        scaleRatio = window.devicePixelRatio / 3;

    //Create a new game instance and assign it to the 'gameArea' div
    game = new Phaser.Game(window.innerWidth * window.devicePixelRatio,   (window.innerHeight * window.devicePixelRatio) -45 * window.devicePixelRatio, Phaser.AUTO, 'gameArea');

    //Add all states
    game.state.add("Boot", Boot);
    game.state.add("Preload", Preload);
    game.state.add("GameTitle", GameTitle);
    game.state.add("Main", Main);
    game.state.add("GameOver", GameOver);

    //Start the first state
    game.state.start("Boot");
 })();
 </script>
 </head>
 <body>

 <div id='gameArea'></div>
 <div id="ionicControls" ng-app="app">

    <ion-nav-bar class="bar bar-header bar-balanced">



<ion-nav-buttons>

<ion-icon>
<img src="img/Logo (1).png" height="auto" width="35">
</ion-icon>

 </ion-nav-buttons>
        <ion-nav-back-button class="button-icon icon ion-ios-arrow-    back">Back</ion-nav-back-button>

    </ion-nav-bar>

    <ion-nav-view>



    </ion-nav-view> 

    </div>


    </body>
    </html>

我希望我可以将启动游戏的代码转移到移相器页面的控制器中,但是我试过了,我无法让它工作,请耐心等待我,因为我是初学者:)

页面控制器

<ion-view title="Room Design" id="page10" class=" ">
<ion-content padding="true" class="has-header">
<a ui-sref="tabsController.contactUs" id="roomDesign-button6" class="                       


button button-balanced  button-block ">Save</a>

</ion-content>


</ion-view>

1 个答案:

答案 0 :(得分:0)

我喜欢phaser.io但我还没有使用离子,也许这个例子可以帮助你在点击后启动你的应用程序,因为它使用与游戏状态相同的设计

https://github.com/EnclaveGames/Monster-Wants-Candy-demo