jdnichollsc/boot.js

## boot.js
var bootState = {
    preload: function () {
        this.game.load.image('loading', 'assets/loading.png');                //Load images to show progress bar in the next state
        this.game.load.image('loadingborder', 'assets/loadingborder.png');
        this.game.stage.backgroundColor = '#A5DEF1';                          //Change background color if you want
    },
    create: function () {
        //Configure plugins like better transitions
        this.game.stateTransition = this.game.plugins.add(Phaser.Plugin.StateTransition);
        this.game.stateTransition.configure({
            duration: Phaser.Timer.SECOND * 0.8,
            ease: Phaser.Easing.Exponential.InOut,
            properties: {
                alpha: 0,
                scale: {
                    x: 1.4,
                    y: 1.4
                }
            }
        });

        this.stage.disableVisibilityChange = true;                         //Not pause the game if the browser tab loses focus
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;               //Shows the entire game while maintaining proportions
        this.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
        this.scale.pageAlignHorizontally = true;                           //Align the game
        this.scale.pageAlignVertically = true;
        if (!this.game.device.desktop)                                     //In mobile force the orientation
        {
            this.scale.forceOrientation(true, false);
            this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);
            this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);
        }
        this.game.scale.setMaximum();
        this.scale.setScreenSize(true);
        this.game.state.start('load');
    },
    enterIncorrectOrientation: function () {
        document.getElementById('rotate').style.display = 'block';
        document.getElementById('game').style.display = 'none';
        this.game.paused = true;
    },
    leaveIncorrectOrientation: function () {
        document.getElementById('game').style.display = 'block';
        document.getElementById('rotate').style.display = 'none';
        this.game.paused = false;
        if (!this.game.device.desktop){
             this.game.scale.setShowAll();
             this.game.scale.refresh();
             this.game.scale.setMaximum();
             this.scale.setScreenSize(true);
             this.game.scale.startFullScreen(false);
        }
    }
};

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">
		<title>Phaser Game</title>
		<style>
		    @font-face {
			font-family: "Oswald-Bold";
			font-weight: 700;
			font-style: normal;
			src: url('fonts/Oswald-Bold.eot'); /* IE9 Compat Modes */
			src: url('fonts/Oswald-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			   url('fonts/Oswald-Bold.woff2') format('woff2'), /* Super Modern Browsers */
			   url('fonts/Oswald-Bold.woff') format('woff'), /* Pretty Modern Browsers */
			   url('fonts/Oswald-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
			   url('fonts/Oswald-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
			text-transform: none;
	            }
	            .fontPreload{
	                position:absolute;
	                left:-100px;
	            }
				body{
	                margin: 0px;
	                overflow: hidden;
	                text-align:center;
	            }
	            #rotate{
	                display:none;
	                width: 100%;
	                height: 100%;
	                position: absolute;
	            }
	            .helper {
	                display: inline-block;
	                height: 100%;
	                vertical-align: middle;
	            }
	            #rotate img{
	                vertical-align: middle;
	            }
	            #game{
	                width: 100%;
	                height: 100%;
	                position: absolute;
	            }
		</style>
	</head>
	<body>
	    	<div class="fontPreload" style="font-family: 'Oswald-Bold';">Load font Oswald Bold</div>
		<div id="rotate">
			<span class="helper"></span>
			<img alt="rotar pantalla" src="assets/rotate.png" />
		</div>
		<div id="game"></div>
		<script src="js/boot.js"></script>
		<script src="js/load.js"></script>
		<script src="js/menu.js"></script>
		<script src="js/play.js"></script>
		<script src="lib/phaser.js"></script>
		<script src="lib/phaser-state-transition-plugin.min.js"></script>
		<script type="text/javascript">
	        var game = new Phaser.Game(1280, 800, Phaser.CANVAS, 'game');
	        game.state.add('boot', bootState);
	        game.state.add('load', loadState);
	        game.state.add('menu', menuState);
	        game.state.add('play', playState);
	        game.state.start('boot');
		</script>
	</body>
</html>

## load.js
var loadState = {
    preload: function () {
        this.loadingborder = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY + 15, 'loadingborder');
        this.loadingborder.x -= this.loadingborder.width / 2;
        this.loading = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY + 19, 'loading');
        this.loading.x -= this.loading.width / 2;
        this.game.load.setPreloadSprite(this.loading, 0);

        this.game.load.image('backgroundMenu', 'assets/bg-menu.png');
        this.game.load.image('btnContinue', 'assets/btn-continue.png');
        this.game.load.spritesheet('player', 'assets/player.png', 72, 72);

        this.game.load.spritesheet('tileset', 'assets/tileset.png', 32, 32);
        this.game.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);

        this.game.load.audio('jump', ['assets/jump.ogg', 'assets/jump.mp3']);
    },
    create: function () {
        this.game.state.start('menu');
    }
};

## menu.js
var menuState = {
	create: function(){
		this.game.add.image(0, 0, 'backgroundMenu');

		this.btnContinue = this.game.add.button(this.game.world.centerX, this.game.world.centerY, 'btnContinue', this.continueToPlay, this);
		this.btnContinue.anchor.set(0.5);
		this.btnContinue.input.useHandCursor = true;
	},
	continueToPlay: function () {
		this.game.stateTransition.to('play');       //Change state with better transition
	}
}
	var bootState = {
	preload: function () {
	this.game.load.image('loading', 'assets/loading.png'); //Load images to show progress bar in the next state
	this.game.load.image('loadingborder', 'assets/loadingborder.png');
	this.game.stage.backgroundColor = '#A5DEF1'; //Change background color if you want
	},
	create: function () {
	//Configure plugins like better transitions
	this.game.stateTransition = this.game.plugins.add(Phaser.Plugin.StateTransition);
	this.game.stateTransition.configure({
	duration: Phaser.Timer.SECOND * 0.8,
	ease: Phaser.Easing.Exponential.InOut,
	properties: {
	alpha: 0,
	scale: {
	x: 1.4,
	y: 1.4
	}
	}
	});

	this.stage.disableVisibilityChange = true; //Not pause the game if the browser tab loses focus
	this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //Shows the entire game while maintaining proportions
	this.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
	this.scale.pageAlignHorizontally = true; //Align the game
	this.scale.pageAlignVertically = true;
	if (!this.game.device.desktop) //In mobile force the orientation
	{
	this.scale.forceOrientation(true, false);
	this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);
	this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);
	}
	this.game.scale.setMaximum();
	this.scale.setScreenSize(true);
	this.game.state.start('load');
	},
	enterIncorrectOrientation: function () {
	document.getElementById('rotate').style.display = 'block';
	document.getElementById('game').style.display = 'none';
	this.game.paused = true;
	},
	leaveIncorrectOrientation: function () {
	document.getElementById('game').style.display = 'block';
	document.getElementById('rotate').style.display = 'none';
	this.game.paused = false;
	if (!this.game.device.desktop){
	this.game.scale.setShowAll();
	this.game.scale.refresh();
	this.game.scale.setMaximum();
	this.scale.setScreenSize(true);
	this.game.scale.startFullScreen(false);
	}
	}
	};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, minimal-ui=1">
	<title>Phaser Game</title>
	<style>
	@font-face {
	font-family: "Oswald-Bold";
	font-weight: 700;
	font-style: normal;
	src: url('fonts/Oswald-Bold.eot'); /* IE9 Compat Modes */
	src: url('fonts/Oswald-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('fonts/Oswald-Bold.woff2') format('woff2'), /* Super Modern Browsers */
	url('fonts/Oswald-Bold.woff') format('woff'), /* Pretty Modern Browsers */
	url('fonts/Oswald-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
	url('fonts/Oswald-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
	text-transform: none;
	}
	.fontPreload{
	position:absolute;
	left:-100px;
	}
	body{
	margin: 0px;
	overflow: hidden;
	text-align:center;
	}
	#rotate{
	display:none;
	width: 100%;
	height: 100%;
	position: absolute;
	}
	.helper {
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	}
	#rotate img{
	vertical-align: middle;
	}
	#game{
	width: 100%;
	height: 100%;
	position: absolute;
	}
	</style>
	</head>
	<body>
	<div class="fontPreload" style="font-family: 'Oswald-Bold';">Load font Oswald Bold</div>
	<div id="rotate">
	<span class="helper"></span>
	<img alt="rotar pantalla" src="assets/rotate.png" />
	</div>
	<div id="game"></div>
	<script src="js/boot.js"></script>
	<script src="js/load.js"></script>
	<script src="js/menu.js"></script>
	<script src="js/play.js"></script>
	<script src="lib/phaser.js"></script>
	<script src="lib/phaser-state-transition-plugin.min.js"></script>
	<script type="text/javascript">
	var game = new Phaser.Game(1280, 800, Phaser.CANVAS, 'game');
	game.state.add('boot', bootState);
	game.state.add('load', loadState);
	game.state.add('menu', menuState);
	game.state.add('play', playState);
	game.state.start('boot');
	</script>
	</body>
	</html>
	var loadState = {
	preload: function () {
	this.loadingborder = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY + 15, 'loadingborder');
	this.loadingborder.x -= this.loadingborder.width / 2;
	this.loading = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY + 19, 'loading');
	this.loading.x -= this.loading.width / 2;
	this.game.load.setPreloadSprite(this.loading, 0);

	this.game.load.image('backgroundMenu', 'assets/bg-menu.png');
	this.game.load.image('btnContinue', 'assets/btn-continue.png');
	this.game.load.spritesheet('player', 'assets/player.png', 72, 72);

	this.game.load.spritesheet('tileset', 'assets/tileset.png', 32, 32);
	this.game.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);

	this.game.load.audio('jump', ['assets/jump.ogg', 'assets/jump.mp3']);
	},
	create: function () {
	this.game.state.start('menu');
	}
	};