I have a Phaser game that I have hosted on my website. It works perfectly in Chrome and Safari on a desktop. I want it mobile friendly, so I added the mobile code in my index and boot.js files, but it doesn’t work on my iPhone when I try to play it on website through my Iphone. When I view it through my phone, it crashes right after the boot.js file. Works perfectly on desktop, but crashes on my iPhone. Can someone help me get this to work on mobile? Below is my code for my index file and my boot.js file.
Index file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="HandheldFriendly" content="true" />
<title>Keytar Kitty!</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.10.0/phaser.min.js"></script>
<script type="text/javascript" src="superpop_assets/phaser-state-transition-plugin.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
<style>
@import url('https://fonts.googleapis.com/css?family=Princess+Sofia');
</style>
<script type="text/javascript" src="superpop_assets/splash.js"></script>
<script type="text/javascript" src="superpop_assets/splash2.js"></script>
<script type="text/javascript" src="superpop_assets/gameOver.js"></script>
<script type="text/javascript" src="superpop_assets/main.js"></script>
<script type="text/javascript" src="superpop_assets/main2.js"></script>
<script type="text/javascript" src="superpop_assets/main3.js"></script>
<script type="text/javascript" src="superpop_assets/main4.js"></script>
<script type="text/javascript" src="superpop_assets/main5.js"></script>
<script type="text/javascript" src="superpop_assets/main6.js"></script>
<script type="text/javascript" src="superpop_assets/main7.js"></script>
<script type="text/javascript" src="superpop_assets/main8.js"></script>
<script type="text/javascript" src="superpop_assets/main9.js"></script>
<script type="text/javascript" src="superpop_assets/main10.js"></script>
<script type="text/javascript" src="superpop_assets/main11.js"></script>
<script type="text/javascript" src="superpop_assets/main12.js"></script>
<script type="text/javascript" src="superpop_assets/main13.js"></script>
<script type="text/javascript" src="superpop_assets/main14.js"></script>
<script type="text/javascript" src="superpop_assets/main15.js"></script>
<script type="text/javascript" src="superpop_assets/main16.js"></script>
<script type="text/javascript" src="superpop_assets/main17.js"></script>
<script type="text/javascript" src="superpop_assets/main18.js"></script>
<script type="text/javascript" src="superpop_assets/main19.js"></script>
<script type="text/javascript" src="superpop_assets/main20.js"></script>
<script type="text/javascript" src="superpop_assets/main21.js"></script>
<script type="text/javascript" src="superpop_assets/menu.js"></script>
<script type="text/javascript" src="superpop_assets/load.js"></script>
<script type="text/javascript" src="superpop_assets/boot.js"></script>
<script type="text/javascript" src="superpop_assets/config.js"></script>
</head>
<style>
.yes{
background-color: black;
}
.hiddenText{
font-family: 'Press Start', cursive;
visibility: hidden;
}
.hiddenText2{
font-family: 'Princess Sofia', cursive;
visibility: hidden;
}
*{
margin: 0;
padding: 0; }
</style>
<body class="yes">
<br>
<br>
<br>
<center>
<div id="gameDiv"> </div>
<p class="hiddenText">.</p>
<p class="hiddenText2">.</p>
</center>
</body>
</html>
boot.js file:
var bootState = {
preload: function () {
// Load the image
game.load.image('progressBar', 'superpop_assets/progressBar.png');
game.load.image('madmodemlogo', 'superpop_assets/madmodemlogo.png');
game.load.image('rrrlogo', 'superpop_assets/rrrlogo.png');
game.load.audio('menusong', 'superpop_assets/menusong.mp3');
},
create: function() {
// Set some game settings game.stage.backgroundColor = '#3498db'; game.physics.startSystem(Phaser.Physics.ARCADE);
// Start the load state
game.stateTransition = this.game.plugins.add(Phaser.Plugin.StateTransition);
//game.plugins.screenShake = this.game.plugins.add(Phaser.Plugin.ScreenShake);
// If the device is not a desktop, so it's a mobile device
if (!game.device.desktop) {
// Set the type of scaling to 'show all'
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
// Add a blue color to the page, to hide the white borders we might have
document.body.style.backgroundColor = '#3498db';
// Set the min and max width/height of the game
game.scale.minWidth = 250;
game.scale.minHeight = 170;
game.scale.maxWidth = 1000;
game.scale.maxHeight = 680;
// Center the game on the screen
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
// Apply the scale changes
game.scale.setScreenSize(true);
}
game.state.start('load');
game.stateTransition.configure({
duration: Phaser.Timer.SECOND * 2,
ease: Phaser.Easing.Exponential.InOut,
properties: {
alpha: 0,
scale: {
x: 1.6,
y: 1.6
}
}
});
}
};