Consolidated Examples
Game Prototype Library


Complete Index Page (Method 1 - traditional)

This file is not optimized with Browserify.

<!DOCTYPE html>
<html>
<head>
	<!-- Phaser Full Screen Mobile Example -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9">
	<meta name="msapplication-tap-highlight" content="no" />
	<meta name="format-detection" content="telephone=no">
	<meta name="HandheldFriendly" content="true" />
	<meta name="robots" content="index,follow" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta name="apple-mobile-web-app-title" content="Game Prototyping with Phaser JS Framework.">
	<!-- Windows Phone -->
	<meta name="msapplication-square70x70logo" content="icons/smalltile.png" />
	<meta name="msapplication-square150x150logo" content="icons/mediumtile.png" />
	<meta name="msapplication-wide310x150logo" content="icons/widetile.png" />
	<meta name="msapplication-square310x310logo" content="icons/largetile.png" />
	
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="-1000" />
	
	<meta property="og:title" content="Adventurers of Renown | The Ruins of Able-Wyvern">
	<meta property="og:type" content="website">
	<meta property="og:url" content="http://www.adventurers-of-renown.com/quests/" />
	
	<meta property="og:site_name" content="Adventurers of Renown">
	<meta name="Description" property="og:description" content="Adventurers of Renown - The Ruins of Able-Wyvern™ (AR\
RA) is a free, browser-based, interactive real-time massive multiplayer online (MMO) fantasy role playing game (RPG) of \
High Adventure created by Stephen Gose Game Studio. This browser game has innovative elements such as multi-player Battl\
es Arena Combat, character renting, magic conbat, Rare Items and much more. An Online game with a large Community!" />
	
	<meta name="keywords" property="og:keywords" content="Adventurers of Renown, lord, Browser Game, Browser Games, Online \
Role Playing Game, Free Games, Game, Free, Combat, War, Online-Game, Science Fiction, mmorpg, Role playing, Space, Brows\
er game, Computer Game, MMORPG, Fantasy,  Multi player, RPG,real time,massive multiplayer,online, mmo, game, rpg, role p\
laying game, fantasy game, pbmcube,Hero Quest, Dark Tower,pbm3, dungeons, dragon, D&D, AD&D, tagoria, warhammer ,adventu\
re, quest, renown,play by, recreation, renown, adventure, entertainment, adventurers of renown" />
	 
	<meta http-equiv="author" content="Stephen Gose">
	<meta name="revisit-after" content="1 days" />
	<meta name="distribution" content="Global" />
	<!-- Dynamically select index for front page; all else noindex,nofollow -->
	
	
	<title>GAMEAPP - Game Prototype with Phaser JS Framework</title>
	
	<link rel="stylesheet" type="text/css" href="fonts/fonts.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />
	<link rel="icon" href="assets/launcher.png" type="image/png" />
	<link rel="manifest" href="manifest.json" />
	
	<!-- http://iconogen.com/upload.php -->
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<!-- non-retina iPhone pre iOS 7 -->
	<link rel="icons/apple-touch-icon" sizes="57x57" href="icons/apple-touch-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60" href="icons/apple-touch-icon-60x60.png">
	<!-- non-retina iPad pre iOS 7 -->
	<link rel="apple-touch-icon" sizes="72x72" href="icons/apple-touch-icon-72x72.png">
	<!-- non-retina iPad iOS 7 -->
	<link rel="apple-touch-icon" sizes="76x76" href="icons/apple-touch-icon-76x76.png">
	<!-- retina iPhone pre iOS 7 -->
	<link rel="apple-touch-icon" sizes="114x114" href="icons/apple-touch-icon-114x114.png">
	<!-- retina iPhone iOS 7 -->
	<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-touch-icon-120x120.png">
	<!-- retina iPad pre iOS 7 -->
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icons/apple-touch-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="144x144" href="icons/apple-touch-icon-144x144.png">
	<!-- retina iPad iOS 7 -->
	<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-touch-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon-180x180.png">
	<link rel="icon" type="image/png" href="icons/favicon-16x16.png" sizes="16x16">
	<link rel="icon" type="image/png" href="icons/favicon-32x32.png" sizes="32x32">
	<link rel="icon" type="image/png" href="icons/favicon-96x96.png" sizes="96x96">
	<!-- Android -->
	<link rel="icon" type="image/png" href="icons/android-chrome-192x192.png" sizes="192x192">
	
	<script src="https://cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js"></script>
	<script type="text/javascript" src="js/lib/mt.helper.js"></script>
	<script type="text/javascript" src="js/lib/mt.data.js"></script>
	
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/state/boot.js"></script>
	<script type="text/javascript" src="js/state/load.js"></script>
	<script type="text/javascript" src="js/state/Inventory.js"></script>
	<script type="text/javascript" src="js/state/Combat.js"></script>
	<script type="text/javascript" src="js/state/story.js"></script>
	<script type="text/javascript" src="js/state/exitGame.js"></script>
	<script type="text/javascript" src="js/state/R1.js"></script>
	<script type="text/javascript" src="js/state/R2.js"></script>
	<script type="text/javascript" src="js/state/R3.js"></script>
	<script type="text/javascript" src="js/state/R4.js"></script>
	<script type="text/javascript" src="js/state/R5.js"></script>
	<script type="text/javascript" src="js/state/R6.js"></script>
	<script type="text/javascript" src="js/state/R7.js"></script>
	<script type="text/javascript" src="js/state/R8.js"></script>
	<script type="text/javascript" src="js/state/R9.js"></script>
	<script type="text/javascript" src="js/state/R10.js"></script>
	<script type="text/javascript" src="js/state/R11.js"></script>
	<script type="text/javascript" src="js/state/R12.js"></script>
	<script type="text/javascript" src="js/state/R13.js"></script>
	<script type="text/javascript" src="js/state/R14.js"></script>
	<script type="text/javascript" src="js/state/R15.js"></script>
	<script type="text/javascript" src="js/state/R16.js"></script>
	<script type="text/javascript" src="js/state/R17.js"></script>
	<script type="text/javascript" src="js/state/R18.js"></script>
	<script type="text/javascript" src="js/state/R19.js"></script>
	
	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	
</head>
<body itemscope itemtype="http://schema.org/CreativeWork/WebApplication">
</body>
</html>


See Examples here


Consolidated Examples 2.2 to 2.20: Game.js
(Book editions 1 to 3 - Monolithic)

/**  
 * File Name: game.js  
 * Bonus File Content URL: https://leanpub.com/LoRD  
 * Description: monolithic File for controlling and displaying game scenes;  
 *  managing global variables throughout game state.  
 * Author: Stephen Gose  
 * Version: 0.0.0.8 (chapter 1 - monolithic version)  
 * Author URL: http://www.stephen-gose.com/  
 * Support: support@pbmcube.com  
 *  
 * Copyright © 1974-2017 Stephen Gose LLC. All rights reserved.  
 *   
 * Do not sell! Do not distribute!  
 * This is a licensed permission file. Please refer to Terms of Use  
 *   and End Users License Agreement (EULA).  
 * Redistribution of part or whole of this file and  
 * the accompanying files is strictly prohibited.  
 *  
 */  
  
 //Typical namespace creation found in all current online Phaser tutorials
 var GAMEAPP = GAMEAPP || {};  
 var GAMEAPP = {  
	  
	//US Copr. or Copyright; UTF8 circled c is \u00A9 equal to ©  
	Copr: "Copyright © \u00A9 1974-2016, Stephen Gose. All rights reserved.\n",  
	  
	// Here we have some global level vars that persist regardless of State.   
	score: 0,  
	clicks: 0,  
	// If the music in your game, and it needs to play  
	//through-out a few State swaps, then you could reference it below.  
	//music: null,  
	//Toggle background music theme on or off; starts in "on/true" state  
	//musicToggle: true,  
	//Your game can check MYGAMEAPP.orientated in the game loops   
	//	to know if it should pause or not.  
	//orientated: false  
	  
	//Grid Tile-Map configurations  
	tileSize: 64, //twice the size of an avatar icon  
	numRows: 3, //adjustable for your game  
	numCols: 3, //adjustable for your game  
	tileSpacing: 2,  //adjustable for your game  
	tilesArray: [], //one way; thousand more to choose  
	  
	//methods  
	_audioMgr: function(mode, game) {  
		switch(mode) { 
		case 'init': {  
			GAMEAPP.Storage.initUnset('GAMEAPP.audio', true);  
			GAMEAPP._audioStatus = GAMEAPP.Storage.get('GAMEAPP.audio');  
			// GAMEAPP._soundClick = game.add.audio('audio-click');  
			GAMEAPP._sound = [];  
			GAMEAPP._sound['click'] = game.add.audio('audio-click');  
			if(!GAMEAPP._soundMusic) {  
				GAMEAPP._soundMusic = game.add.audio('audio-  
				theme',1,true);  
				GAMEAPP._soundMusic.volume = 0.5;  
			}  
			break;  
		}  
		case 'on': {  
			GAMEAPP._audioStatus = true;  
			break;  
		}  
		case 'off': {  
			GAMEAPP._audioStatus = false;  
			break;  
		}  
		case 'switch': {  
			GAMEAPP._audioStatus =! GAMEAPP._audioStatus;  
			break;  
		}  
		default: {}  
		}  
		if(GAMEAPP._audioStatus) {  
			GAMEAPP._audioOffset = 0;  
			if(GAMEAPP._soundMusic) {  
				if(!GAMEAPP._soundMusic.isPlaying) {  
					GAMEAPP._soundMusic.play('',0,1,true);  
				}  
			}  
		}  
		else {  
			GAMEAPP._audioOffset = 4;  
			if(GAMEAPP._soundMusic) {  
				GAMEAPP._soundMusic.stop();  
			}  
		}  
		GAMEAPP.Storage.set('GAMEAPP.audio',GAMEAPP._audioStatus);  
		game.buttonAudio.setFrames(GAMEAPP._audioOffset+1,  
		GAMEAPP._audioOffset+0, GAMEAPP._audioOffset+2);  
	},  
	_playAudio: function(sound) {  
		if(GAMEAPP._audioStatus) {  
			if(GAMEAPP._sound && GAMEAPP._sound[sound]) {  
				GAMEAPP._sound[sound].play();  
			}  
		}  
	}  
};  
  
//Create game namespace away from the window global  
GAMEAPP.Boot = function (game) { };  
//End of namespace creation found in all current online Phaser tutorials  
  
;	//Closes any previous scripts  
  
//Example: 2.2 Starting the Game.js begins  
var gWidth = 800;	//Using Golden Ration is important.  
var gHeight = 500;	//Using Golden Ration is important.  
var game = new Phaser.Game(gWidth, gHeight, Phaser.AUTO, "gContent");  
//Example: 2.2 ends  
  
//Example 2.3 to 2.19: Creating States in Game.js begins  
//Step 3) new game state additions (similar to Phaser v3 method  
//	"state from objects":  
var mainMenu = {  
	init: function(){  
		//stuff to generate in this function  
	},  
	  
	create: function() {  
	//Example 2.6: Additional Phaser Properties begins  
		console.log("mainMenu Ready!");  
		//Cross-origin resource sharing (CORS)  
		game.load.crossOrigin = "anonymous";  
		//Set a neutral background color  
		//notice we used the shorthand version; instead of #FF0000  
		game.stage.backgroundColor = "#369";  
		//This sets up Phaser’s Arcade physics engine,  
		//	which is simple but effective for arcade-style games.  
		game.physics.startSystem(Phaser.Physics.ARCADE);  
		game.renderer.renderSession.roundPixels = true;  
		//this applies physics to every item.  
		game.world.enableBody = true;  
	//Example 2.6: ends  
	//Example 2.7: Prototyping Graphics begins  
		//create a character avatar  
		this.player =  
			game.add.sprite(32,32,  
				box({length:32,width:32,color:'#00F'}));  
		this.cursor = game.input.keyboard.createCursorKeys();  
		this.player.body.collideWorldBounds = true;  
	//Example 2.7: ends  
		//create an opponent  
		this.enemy = game.add.sprite(game.world.width/4+64,32,  
			box({length:32,width:32,color:'#0F0'}));  
		this.enemy.body.collideWorldBounds = true;  
		this.enemy.enableBody = true;  
		this.enemy.body.immovable = true;  
		game.physics.enable(this.enemy, Phaser.Physics.ARCADE);  
	//Example 2.12: World Boundaries Integration begins  
		//Create Room Walls on stage  
		this.Room = game.add.group();  
		this.Room.enableBody = true;  
		game.physics.enable(this.Room, Phaser.Physics.ARCADE);  
		  
		this.NorthWall = game.add.sprite(0,0,  
			box({length:game.world.width,width:16,color:'#999'}));  
		this.NorthWall.enableBody = true;  
		this.NorthWall.body.immovable = true;  
		this.Room.add(this.NorthWall);  
		  
		this.SouthWall = game.add.sprite(0,game.world.height-16,  
			box({length:game.world.width,width:16,color:'#999'}));  
		this.SouthWall.body.immovable = true;  
		this.Room.add(this.SouthWall);  
	//Example 2.12: ends  
	//Example 2.13: World Boundaries Integration begins  
		this.WestWall = game.add.sprite(0,16,  
			box({length:16,width:game.world.height-32,color:'#999'}));  
		this.WestWall.body.immovable = true;  
		this.Room.add(this.WestWall);  
		  
		this.EastWall = game.add.sprite(game.world.width-16,16,  
			box({length:16,width:game.world.height-32,color:'#999'}));  
		this.EastWall.body.immovable = true;  
		this.Room.add(this.EastWall);  
	//Example 2.13: ends  
	//Example 2.14: Interior Boundaries Integration begins  
		this.interior1Wall = game.add.sprite(game.world.width/6,16,  
			box({length:16,width:game.world.width/4,color:'#AAA'}));  
		this.interior1Wall.body.immovable = true;  
		this.Room.add(this.interior1Wall);  
		  
		this.interior2Wall = game.add.sprite(  
			16,game.world.height/2,box  
			({length:game.world.width/2,width:16,color:'#AAA'}));  
		this.interior2Wall.body.immovable = true;  
		this.Room.add(this.interior2Wall);  
	//Example 2.14: ends  
	},	//the comma is very important.  
	  
	update: function() {  
	//Example 2.10: Prototyping Movement Properties  
		//frame refresh and display updates  
		var speed = 250;  
		this.player.body.velocity.x = 0;  
		this.player.body.velocity.y = 0;  
	//Example 2.10: ends  
	//Example 2.11: Movement Arrows Integration begins  
		//monitor player's movement input  
		//NOTE: combination arrow directions are  
		//	possible with this format  
		if (this.cursor.up.isDown){  
			this.player.body.velocity.y -= speed;  
		}  
		if (this.cursor.down.isDown){  
			this.player.body.velocity.y += speed;  
		}  
		if (this.cursor.right.isDown){  
			this.player.body.velocity.x += speed;  
		}  
		if (this.cursor.left.isDown){  
			this.player.body.velocity.x -= speed;  
		}  
	//Example 2.11: ends  
	//Example 2.15: Collision Detection Integration  
		game.physics.arcade.collide(this.player, this.Room);  
		game.physics.arcade.overlap  
			(this.player,this.enemy,combatEncounter,null,this);  
	//Example 2.15: ends  
	}  
	  
}; //the semi-colon is very important.  
  
//Example 2.17: New Game Over State begins  
var gameOverState = {  
		create: function(){  
		//Example 2.18: Elementary HUD Creation begins  
			label = game.add.text(game.world.width/2, game.world.height/2,  
			"Game Over \n Press the SPACE bar to start again",  
			{font: "22px Arial", fill: "#FFF", align:"center"});  
			label.anchor.setTo(0.5,0.5);  
		//Example 2.18: ends  
		//Example 2.19: Responding to User Input begins  
			this.spacebar =  
				this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);  
		  
		}, //comma very important here  
		  
		update: function(){  
		  
			if(this.spacebar.isDown){  
				game.state.start('main');  
			}  
		//Example 2.19: ends  
		}  
	};  
//Example 2.17: ends  
  
//Process conflict; refer to book  
var combat = {  
	create: function(){  
		//Set a neutral background color  
		console.log("Combat Ready!");  
		game.stage.backgroundColor = "#300";  
		//Set game to ARCADE physics systemLanguage  
		game.physics.startSystem(Phaser.Physics.ARCADE);  
		game.renderer.renderSession.roundPixels = true;  
		game.world.enableBody = true;  
		  
		label = game.add.text(game.world.width/2, game.world.height/2,  
			"Combat Encouter \n Press the SPACE bar to return",  
			{font: "22px Arial", fill: "#FFF", align:"center"});  
		label.anchor.setTo(0.5,0.5);  
		  
		this.spacebar = this.game.input.keyboard.addKey  
			(Phaser.Keyboard.SPACEBAR);  
		  
		//create a character avatar  
		this.player =  
		game.add.sprite(32,32,box({length:32,width:32,color:'#00F'}));  
		this.cursor = game.input.keyboard.createCursorKeys();  
		this.player.body.collideWorldBounds = true;  
		  
		//create an opponet  
		this.enemy = game.add.sprite  
			(game.world.width-64,game.world.height-64,  
			box({length:32,width:32,color:'#0F0'}));  
		this.enemy.body.collideWorldBounds = true;  
		this.enemy.enableBody = true;  
		this.enemy.body.immovable = true;  
		game.physics.enable(this.enemy, Phaser.Physics.ARCADE);  
			  
		//Create Room Walls on stage  
		this.Room = game.add.group();  
		this.Room.enableBody = true;  
		game.physics.enable(this.Room, Phaser.Physics.ARCADE);  
		  
		this.NorthWall = game.add.sprite(0,0,  
			box({length:game.world.width,width:16,color:'#999'}));  
		this.NorthWall.enableBody = true;  
		this.NorthWall.body.immovable = true;  
		this.Room.add(this.NorthWall);  
		  
		this.SouthWall = game.add.sprite(0,game.world.height-16,  
			box({length:game.world.width,width:16,color:'#999'}));  
		this.SouthWall.body.immovable = true;  
		this.Room.add(this.SouthWall);  
		  
		this.WestWall = game.add.sprite(0,16,  
			box({length:16,width:game.world.height-32,color:'#999'}));  
		this.WestWall.body.immovable = true;  
		this.Room.add(this.WestWall);  
		  
		this.EastWall = game.add.sprite(game.world.width-16,16,  
			box({length:16,width:game.world.height-32,color:'#999'}));  
		this.EastWall.body.immovable = true;  
		this.Room.add(this.EastWall);  
		  
	  
	}, //comma very important here  
	update: function(){  
		//frame refresh and display updates  
		var speed = 250;  
		if(this.spacebar.isDown){  
			game.state.start('main');  
		}  
		this.player.body.velocity.x = 0;  
		this.player.body.velocity.y = 0;  
  
		//monitor player's movement input  
		if (this.cursor.up.isDown){  
			this.player.body.velocity.y -= speed;  
		}  
		if (this.cursor.down.isDown){  
			this.player.body.velocity.y += speed;  
		}  
		if (this.cursor.right.isDown){  
			this.player.body.velocity.x += speed;  
		}  
		if (this.cursor.left.isDown){  
			this.player.body.velocity.x -= speed;  
		}  
  
		game.physics.arcade.collide(this.player, this.Room);  
		  
		game.physics.arcade.overlap(  
			this.player,this.enemy,combatEncounter,null,this);  
	}  
};  
  
//Example 2.16: Collision Results Determination begins  
//character's death  
var handlePlayerDeath = function(player,enemy){  
	//kill off the avatar  
	player.kill();  
	//change to Game Over scene  
	game.state.start("gameOver");  
};  
//Example 2.16: ends  
//character's initiates combat  
var combatEncounter = function(player,enemy){  
	//change to Game Combat scene  
	game.state.start("combat");  
};  
//Example 2.7: Prototyping Graphics begins  
//create a box Image (pseudo graphics) for the HTML5 canvas.  
var box = function(options) {  
	var bxImg = this.game.add.bitmapData(options.length,options.width);  
	bxImg.ctx.beginPath();  
	bxImg.ctx.rect(0,0,options.length,options.width);  
	bxImg.ctx.fillStyle = options.color;  
	bxImg.ctx.fill();  
	return bxImg;  
};  
  
//Step 1) Let’s tell Phaser about our new scenes  
//Phaser uses our code and gives it a name of ‘main’.  
	game.state.add("main", mainMenu);  
	game.state.add("gameOver", gameOverState);  
	game.state.add("combat", combat);  
//tells Phase to start using it.  
	game.state.start("main"); //tells Phaser to start using it.  
//Example 2.7: ends  
  
//debugger  
console.log('Namespace Game Object created');  
console.table(GAMEAPP);  
console.log('mainMenu Game Object created');  
console.table(mainMenu);  
console.log('Game Over State Object created');  
console.table(gameOverState);  
console.log('Combat Game Object created');  
console.table(combat);  
      

See Examples here


Consolidated Examples 4th Edition (Monolithic)

This file is not optimized with Browserify.

/**
 * File Name: game.js
 * Bonus File Content URL: https://leanpub.com/LoRD
 * Description: monolithic File for controlling and displaying game scenes;
 *  managing global variables throughout game state.
 * Author: Stephen Gose
 * Version: 0.0.0.15
 * Author URL: http://www.stephen-gose.com/
 * Support: support@pbmcube.com
 *
 * Copyright © 1974-2017 Stephen Gose LLC. All rights reserved. 
 * 
 * Do not sell! Do not distribute!
 * This is a licensed permission file. Please refer to Terms of Use
 *   and End Users License Agreement (EULA).
 * Redistribution of part or whole of this file and
 * the accompanying files is strictly prohibited.
 *
 */
 var GAMEAPP = GAMEAPP || {};
 var GAMEAPP = {
	 //US Copr. or Copyright
	Copr: "Copyright © 1974-2016, Stephen Gose. All rights reserved.\n", 
	// Here we have some global level vars that persist regardless of State. 
	score: 0,
	clicks: 0,
	// If the music in your game, and it needs to play through-out a few State
	//	swaps, then you could reference it below. 
	//music: null,
	//Toggle background music theme on or off; starts in "on/true" state 
	//musicToggle: true,
	//Your game can check MYGAMEAPP.orientated in the game loops 
	//	to know if it should pause or not.
	//orientated: false
	
	//Grid Tile-Map configurations
	tileSize:	64,	//twice the size of an avatar icon
	numRows:	 3,	//adjustable for your game
	numCols:	 3,	//adjustable for your game
	tileSpacing: 2,	//adjustable for your game
	tilesArray: [], //one way to do this; thousands more to choose
	
	//methods
	_audioMgr: function(mode, game) {
		switch(mode) {
			case 'init': {
				GAMEAPP.Storage.initUnset('GAMEAPP.audio', true);
				GAMEAPP._audioStatus = GAMEAPP.Storage.get('GAMEAPP.audio');
				// GAMEAPP._soundClick = game.add.audio('audio-click');
				GAMEAPP._sound = [];
				GAMEAPP._sound['click'] = game.add.audio('audio-click');
				if(!GAMEAPP._soundMusic) {
					GAMEAPP._soundMusic = game.add.audio('audio-theme',1,true);
					GAMEAPP._soundMusic.volume = 0.5;
				}
				break;
			}
			case 'on': {
				GAMEAPP._audioStatus = true;
				break;
			}
			case 'off': {
				GAMEAPP._audioStatus = false;
				break;
			}
			case 'switch': {
				GAMEAPP._audioStatus =! GAMEAPP._audioStatus;
				break;
			}
			default: {}
		}
		if(GAMEAPP._audioStatus) {
			GAMEAPP._audioOffset = 0;
			if(GAMEAPP._soundMusic) {
				if(!GAMEAPP._soundMusic.isPlaying) {
					GAMEAPP._soundMusic.play('',0,1,true);
				}
			}
		}
		else {
			GAMEAPP._audioOffset = 4;
			if(GAMEAPP._soundMusic) {
				GAMEAPP._soundMusic.stop();
			}
		}
		GAMEAPP.Storage.set('GAMEAPP.audio',GAMEAPP._audioStatus);
		game.buttonAudio.setFrames(GAMEAPP._audioOffset+1, GAMEAPP._audioOffset+0, GAMEAPP._audioOffset+2);
	},
	_playAudio: function(sound) {
		if(GAMEAPP._audioStatus) {
			if(GAMEAPP._sound && GAMEAPP._sound[sound]) {
				GAMEAPP._sound[sound].play();
			}
		}
	}
};

//Create game namespace away from the window global
GAMEAPP.Boot = function (game) {
	console.log(" %c Starting my Game Prototype boot ", "color:white; background:red");
};

;//Closes any previous scripts
//(function() {
	
// ============
// Example: 2.2 Launching a Game.
// ============
var gWidth = 800;	//Using Golden Ration is important.
var gHeight = 500;	//Using Golden Ration is important.
//Lessons learned from colleagues
//initial size determined
isMobile=navigator.userAgent.indexOf("Mobile");
if (isMobile != -1) {
	//-1 is desktop/anything other than mobile device
	console.log("isMobile="+isMobile);
	gWidth = window.innerWidth * window.devicePixelRatio;
	gHeight = window.innerHeight * window.devicePixelRatio;
}

var game = new Phaser.Game(gWidth, gHeight, Phaser.AUTO, "gContent");
// Example: 2.2 ends
// ============
// Example 3.1 to 3.19: Creating Game Phase (traditional method)
// ============
// Step #3) new game state additions:
// -------------
var mainState = {
	init: function(){
		//stuff to generate in this function
		console.log(" %c Starting my awesome Game Prototype | http://shop.pbmcube.net | \u2665\u2665\u2665\u2665\u2665 ",
		"color:white; background:blue");
	},
	
	create: function() {
		// ============
		// Example 2.6: Additional Phaser Properties begins
		// ============
		console.log("mainState Ready!");
		// Cross-origin resource sharing (CORS)
		game.load.crossOrigin = "anonymous";
		
		// Set a neutral background color
		// notice we used the shorthand version; instead of #336699
		game.stage.backgroundColor = "#369";
		
		// This sets up Phaser's Arcade physics engine.
		//    which are simple but effective for arcade-style games.
		game.physics.startSystem(Phaser.Physics.ARCADE);
		game.renderer.renderSession.roundPixels = true;
		
		// this applies physics to every item.
		game.world.enableBody = true;
		//Example 2.6: ends
		// ============
		//Example 2.7: Prototyping Graphics begins
		// ============
		//create a character avatar 
		this.player =  
			game.add.sprite(32,32,
				box({length:32,width:32,color:'#00F'})); 
		this.cursor = game.input.keyboard.createCursorKeys();
		this.player.body.collideWorldBounds = true;
		//Example 1.7: ends
		//create an opponent  
		this.enemy = game.add.sprite(game.world.width/6 +64,32,
			box({length:32,width:32,color:'#0F0'}));
		this.enemy.body.collideWorldBounds = true;
		this.enemy.enableBody = true;
		this.enemy.body.immovable = true;
		game.physics.enable(this.enemy, Phaser.Physics.ARCADE);
		// ============
		// Example 2.12: World Boundaries Integration begins
		// ============
		//Create Room Walls on stage
		this.Room = game.add.group();  
		this.Room.enableBody = true; 
		game.physics.enable(this.Room, Phaser.Physics.ARCADE);
		
		var NorthWall = game.add.sprite(0,0,
			box({length:game.world.width,width:16,color:'#999'}));	
		NorthWall.enableBody = true;
		NorthWall.body.immovable = true;
		this.Room.add(NorthWall);
		
		var SouthWall = game.add.sprite(0,game.world.height-16,
			box({length:game.world.width,width:16,color:'#999'}));
		SouthWall.body.immovable = true;
		this.Room.add(SouthWall);
		// Example 2.12: ends
		// ============
		// Example 2.13: World Boundaries Integration begins
		// ============
		var WestWall = game.add.sprite(0,16,
			box({length:16,width:game.world.height-32,color:'#999'}));
		WestWall.body.immovable = true;    
		this.Room.add(WestWall);
		
		var EastWall = game.add.sprite(game.world.width-16,16,
			box({length:16,width:game.world.height-32,color:'#999'}));
		EastWall.body.immovable = true;    
		this.Room.add(EastWall);
		//Example 2.13: ends
		// ============
		// Example 2.14: Interior Boundaries Integration begins
		// ============
		var interior1Wall = game.add.sprite(game.world.width/6,16,
			box({length:16,width:game.world.width/4,color:'#AAA'}));
		interior1Wall.body.immovable = true;    
		this.Room.add(interior1Wall);
		
		var interior2Wall = game.add.sprite(16,game.world.height/2,
			box({length:game.world.width/2,width:16,color:'#AAA'}));
		interior2Wall.body.immovable = true;    
		this.Room.add(interior2Wall);
		// Example 2.14: ends
		// ============
	},	//the comma is very important.
	
	update: function() {
		//Example 1.10: Prototyping Movement Properties
		//frame refresh and display updates
		var speed = 250;  
		this.player.body.velocity.x = 0;  
		this.player.body.velocity.y = 0;
		// Example 1.10: ends
		// ============
		// Example 1.11: Movement Arrows Integration begins
		// ============
		//monitor player's movement input
		if (this.cursor.up.isDown){  
			this.player.body.velocity.y -= speed;  
		}else if (this.cursor.down.isDown){  
			this.player.body.velocity.y += speed;  
		}else if (this.cursor.right.isDown){  
			this.player.body.velocity.x += speed;  
		}else if (this.cursor.left.isDown){  
			this.player.body.velocity.x -= speed;  
		} 
		// Example 1.11: ends
		// ============
		// Step 2) Generate sensors, listeners, observers that trigger it
		// When overlapping, unlike collide, the objects are NOT automatically
		//   separated nor have any shysics applied,
		//   they are merely tested for an overlaop condition results.
		// ============
		game.physics.arcade.collide(this.player, this.Room);
		// Example 1.15: Collision Detection Integration
		game.physics.arcade.overlap(this.player,this.enemy,combatEncounter,null,this);  
		//Example 1.15: ends
	}
}; //the semi-colon is very important.
// -------------
// Example 3.17: New Game Over State begins
// -------------
var gameOverState = {  
	create: function(){ 
		//Example 1.18: Elementary HUD Creation begins
		label = game.add.text(game.world.width/2, game.world.height/2,"Game Over \n Press the SPACE bar to start again",{font: "22px Arial", fill: "#FFF", align:"center"});  
		label.anchor.setTo(0.5,0.5); 
		//Example 1.18: ends
		this.spacebar = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); 
	
	}, //comma very important here  
	update: function(){  
		//Example 1.19: Responding to User Input begins
		if(this.spacebar.isDown){  
			game.state.start('main');  
		}  
		//Example 1.19: ends
	}  
};  
// Example 3.17: ends
// =============
//Process conflict
var combat = {  
	create: function(){ 
		//Set a neutral background color
		console.log("Combat Ready!");
		game.stage.backgroundColor = "#300";
		//Set game to ARCADE physics systemLanguage
		game.physics.startSystem(Phaser.Physics.ARCADE);
		game.renderer.renderSession.roundPixels = true;
		game.world.enableBody = true;
		
		label = game.add.text(game.world.width/2, game.world.height/2,"Combat Encouter \n Press the SPACE bar to return",{font: "22px Arial", fill: "#FFF", align:"center"});  
		label.anchor.setTo(0.5,0.5); 
		
		this.spacebar = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); 
		
		//create a character avatar 
		this.player =  
		game.add.sprite(32,32,box({length:32,width:32,color:'#00F'})); 
		this.cursor = game.input.keyboard.createCursorKeys();
		this.player.body.collideWorldBounds = true;
		
		//create an opponet  
		this.enemy = game.add.sprite(game.world.width-64,game.world.height-64,box({length:32,width:32,color:'#0F0'}));
		this.enemy.body.collideWorldBounds = true;
		this.enemy.enableBody = true;
		this.enemy.body.immovable = true;
		game.physics.enable(this.enemy, Phaser.Physics.ARCADE);
			
		//Create Room Walls on stage
		this.Room = game.add.group();  
		this.Room.enableBody = true; 
		game.physics.enable(this.Room, Phaser.Physics.ARCADE);
		
		var NorthWall = game.add.sprite(0,0,box({length:game.world.width,width:16,color:'#999'}));	
		NorthWall.enableBody = true;
		NorthWall.body.immovable = true;
		this.Room.add(NorthWall);
		
		var SouthWall = game.add.sprite(0,game.world.height-16,box({length:game.world.width,width:16,color:'#999'}));
		SouthWall.body.immovable = true;
		this.Room.add(SouthWall);
		
		var WestWall = game.add.sprite(0,16,box({length:16,width:game.world.height-32,color:'#999'}));
		WestWall.body.immovable = true;    
		this.Room.add(WestWall);
		
		var EastWall = game.add.sprite(game.world.width-16,16,box({length:16,width:game.world.height-32,color:'#999'}));
		EastWall.body.immovable = true;    
		this.Room.add(EastWall);
		 
	
	}, //comma very important here  
	update: function(){  
		if(this.spacebar.isDown){  
			game.state.start('main');  
		}
		//frame refresh and display updates
		var speed = 250;  
		this.player.body.velocity.x = 0;  
		this.player.body.velocity.y = 0;

		//monitor player's movement input
		if (this.cursor.up.isDown){  
			this.player.body.velocity.y -= speed;  
		}
		if (this.cursor.down.isDown){  
			this.player.body.velocity.y += speed;  
		}
		if (this.cursor.right.isDown){  
			this.player.body.velocity.x += speed;  
		}
		if (this.cursor.left.isDown){  
			this.player.body.velocity.x -= speed;  
		} 

		game.physics.arcade.collide(this.player, this.Room);
		
		game.physics.arcade.overlap(this.player,this.enemy,combatEncounter,null,this);  		
	}  
}; 
// ============
// Step 2) Insert NEW function for character's death
//         function to calculate the outcome.
// Example 1.16: Collision Results Determination begins
// character's death  
// ============
var handlePlayerDeath = function(player,enemy){
	//kill off the avatar
	player.kill();
	//change to Game Over scene
	game.state.start("gameOver"); 
} 
// Example 1.16: ends
// ============
//character's initiates combat  
var combatEncounter = function(player,enemy){  
	//change to Game Over scene
	game.state.start("combat"); 
}
// ============
// Example 2.1: Prototyping Graphics begins
// ============
//create a box Image (pseudo graphics) for the HTML5 canvas. 
var box = function(options) {  
	var bxImg = this.game.add.bitmapData(options.length,options.width);  
	bxImg.ctx.beginPath();  
	bxImg.ctx.rect(0,0,options.length,options.width);  
	bxImg.ctx.fillStyle = options.color;  
	bxImg.ctx.fill();  
	return bxImg;  
};  
// Example 2.1: ends  
// ============  
// Step #1) Let’s tell Phaser about our new phase
// ============  
//Phaser uses our code and gives it a name of ‘main’.
game.state.add("main", mainState);
game.state.add("gameOver", gameOverState); 
game.state.add("combat", combat);   
//tells Phase to start using it.
game.state.start("main"); //tells Phase to start using it.
// Example 3.7: ends
// ============ 
//Optimized method; see chapter on optimization.

//})(); //immediate execution; Self-Invoking Function   

Copyright © 2017, Stephen Gose LLC.
All rights reserved.