How to Implement a phaser game to a specific page in ionic
Question
I am Creating a business app, and in this app you log in and there are five tabs below, i am trying to start a phaser game once you click create in one of the tabs, however i am new to this and their isn't much help with ionic and phaser combining. The problem i am having is i have created two divs in my index file for phaser and ionic, but i only want phaser on one of the tabs instead of overlapping on every screen. As shown in my index file.
Here is my index file
<!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>
This is the page i want the phaser game to start, What i am wondering is how to implement the code here so it will start up when clicked
i want phaser to start on this page
<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>
I am hoping i can transfer the code that starts the game into the controller for the phaser page, however i tried that and i couldnt get it to work, pls be patient with me because i am a beginner :)
Controller for page
.controller('roomDesignCtrl', function($scope) {
})
1 answers
solution1
0 2016-07-01 22:43:33
I like phaser.io but i don't use ionic yet, perhaps this example can help you launch your application after a click, because it uses the same design with game states
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.