Chapter #2 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 (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

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