如何实现一个相位游戏到一个特定的页面在离子

How to Implement a phaser game to a specific page in ionic

本文关键字：一个 何实现 实现 游戏      更新时间：2023-09-26

我正在创建一个商业应用程序，在这个应用程序中，你登录，下面有五个选项卡，我试图开始一个相控游戏，一旦你点击创建在其中一个选项卡，但我是新的，他们并没有太多的帮助与离子和相控器结合。我所遇到的问题是，我已经在我的索引文件中创建了两个div的相位器和离子，但我只想要一个标签上的相位器，而不是在每个屏幕上重叠。如我的索引文件所示。

这是我的索引文件

<!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>

我希望我能转移的代码开始游戏进入控制器的相位页，但我试过了，我不能让它工作，请耐心等待我，因为我是一个初学者:)

页面的控制器

.controller('roomDesignCtrl', function($scope) {




})

我喜欢相位器。IO，但我还没有使用ionic，也许这个例子可以帮助你在点击后启动你的应用程序，因为它使用相同的设计与游戏状态

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

相关文章：