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="https://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" />
<!-- https://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="https://schema.org/CreativeWork/WebApplication">
</body>
</html>
See Examples here
/**
* 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: https://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
This file is not optimized intentionally. Search for the book examples.
/**
* 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: https://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 | https://renown-games.com/shop | \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.