Bob Brothers
In this game you need to help Bob capture the flag. Tap the screen to jump and move left or right. Edit the map to make your own game.
Create our INDEX.HTML file
In this game, we are going to create a State object for each part of our game.
First, replace all the html code below with the html code in INDEX.HTML file.
Second, create a new blank javascript file for each of the states below. example: boot.js, load.js, etc...
<html>
<head>
<script src="https://github.com/photonstorm/phaser-ce/releases/download/v2.10.0/phaser.min.js"></script>
<script src="boot.js"></script>
<script src="load.js"></script>
<script src="menu.js"></script>
<script src="playlevel1.js"></script>
<script src="gameover.js"></script>
<script src="winner.js"></script>
<script src="game.js"></script>
</head>
<body>
<div id="gameBoard"></div>
</body>
</html>
game.js
Add the code below to the game.js file. This file loads our game engine, creates all our states and starts the boot state.
// GAME - INITIALIZE
// -----------------------------------------------------------------
// Startup the Phaser Game Engine
var game = new Phaser.Game("98%", "95%", Phaser.CANVAS, 'gameBoard');
// add game scenes ( game states ) to the phase game engine
game.state.add('boot', bootState);
game.state.add('load', loadState);
game.state.add('menu', menuState);
game.state.add('playlevel1', playlevel1State);
game.state.add('gameover', gameoverState);
game.state.add('winner', winnerState);
// Start Game
game.state.start('boot');
Boot State
Add this code to the boot.js file. This code will add our physics system to the game.
var bootState = {
create: function() {
// add physics to our game
game.physics.startSystem(Phaser.Physics.ARCADE);
// call the load state
game.state.start('load');
}
};
Load State
Add this code to the load.js file. This code will load all our images we use in our game.
// the preload state allows us to load in all the data we need for our game
var loadState = {
preload: function() {
// data used to make bitmap (bmp) image of Bob
var bobData = [
'..0000..',
'..062...',
'.6.66...',
'..6DD66.',
'...DD...',
'.5666...',
'.5..6...',
'....55..'
];
game.bmpBob = game.create.texture('bob', bobData, 4, 4, 0, false);
// data used to make bitmap (bmp) image of block
var blockData = [
'AAAAAAAAA',
'AAAAAAAAA',
'A6A6A6A6A',
'6A6A6A6A6',
'A666A666A',
'666666666',
'666666666',
'666666666'
];
game.bmpBlock = game.create.texture('block', blockData, 6, 6, 0, false);
// data used to make bitmap (bmp) image of flag
var flagData = [
'.E2E3333.',
'.2E22222.',
'.E2E3333.',
'.2222222.',
'.3333333.',
'.00......',
'.00......',
'.00......'
];
game.bmpFlag = game.create.texture('flag', flagData, 6, 6, 0, false);
},
create: function() {
game.state.start('menu');
}
};
Menu State
Add this code to the menu.js file. Our game will have a Main Menu to start our game. Be sure to make it your own by changing title and author.
// the menu state displays instructions for our game
var menuState = {
create: function() {
// change the background color
game.stage.backgroundColor = '#2c2d2d';
txtTitle = game.add.text(game.world.centerX, game.world.centerY / 2, '', { font: "30pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
txtTitle.anchor.set(0.5);
txtTitle.text = 'Run Bob Run';
txtPlay = game.add.text(game.world.centerX, game.world.centerY - game.world.centerY / 3, '', { font: "15pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
txtPlay.anchor.set(0.5);
txtPlay.text = 'Click to Play';
txtCredit = game.add.text(game.world.centerX, game.world.centerY / 8 + game.world.centerY, '', { font: "10pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
txtCredit.anchor.set(0.5);
txtCredit.text = 'This game designed and built by bob at Cedar Park Middle School';
},
update: function() {
// when user touches screen, play game
if (game.input.activePointer.isDown) {
game.state.start('playlevel1');
}
}
};
Game Over State
Add this code to the gameover.js file. This is our game over screen.
// game over state
var gameoverState = {
create: function() {
// set the world bounds
game.world.setBounds(0, 0, window.innerWidth, window.innerHeight);
// change the background color
game.stage.backgroundColor = '#5c94fc';
txtTitle = game.add.text(game.world.centerX, game.world.centerY / 2, '', { font: "30pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
txtTitle.anchor.set(0.5);
txtTitle.text = 'Game Over';
},
update: function() {
// goto menu state when user taps screen
if (game.input.activePointer.isDown) {
game.state.start('menu');
}
}
};
Winner State
Add this code to the winner.js file. This is our winner screen.
// winner state
var winnerState = {
create: function() {
// set the world bounds
game.world.setBounds(0, 0, window.innerWidth, window.innerHeight);
// change the background color
game.stage.backgroundColor = '#399664';
txtTitleWin = game.add.text(game.world.centerX, game.world.centerY / 2, '', { font: "30pt Courier", fill: "#19cb65", stroke: "#fffff", strokeThickness: 2 });
txtTitleWin.anchor.set(0.5);
txtTitleWin.text = 'Winner!!';
},
update: function() {
// goto menu state when user taps screen
if (game.input.activePointer.isDown) {
game.state.start('menu');
}
}
};
Play Level 1 State
Add this code to the playlevel1.js file. This is the first level of our game.
In the PRELOAD, we define our playing field using an array (you can modify the array to design your own level).
In our CREATE, we create bob and loop through each row and column in our array and convert them to Sprites we defined in our Load.js file.
in our UPDATE, we make bob move and check for collisions.
// level 1 of our game
var playlevel1State = {
// set a global flag to let us know when the game is over
ThisLevelIsOverDude: false,
preload: function() {
// MAP - level 1 - change this to make ur own level.
// map is setup as an array. the array has 6 rows. each row has over 100 data points and can be as long as u want.
// o = ground
// F = flag - which ends the game
game.map = [
'.......................................................................................................',
'.......................................................................................................',
'.......................................................................................................',
'.......................................................................................................',
'.......................................................................................................',
'.......................................................................................................',
'.......................................................................................................',
'...................o..o................................................................................',
'.................o...............................................................oo....................',
'.......................oo.o.o.o.o.oo...........................................oo..o...................',
'................o.....................oo.o.oooo.o.oo.o.......................oo.....o.............oo...',
'............F.........oo.o.o.o.o.o.ooo.................................oooooo........o......F...oo....o',
'oooooooo.ooooo.ooooooo.................................oooooooo.oooooo................ooo.oo.oo........'
];
},
// the create function is where we create all our game objects
create: function() {
// change the background color of our game
game.stage.backgroundColor = '#5c94fc';
// create a keyboard object to capture users input
// ------------------------------------------------------------------------
this.keyboard = game.input.keyboard;
// tile size
this.tileSize = 50;
this.MapRows = game.map.length;
this.MapColumns = game.map[0].length;
game.world.setBounds(0, 0, this.MapColumns * this.tileSize, this.MapRows * this.tileSize);
// create bob object
// ------------------------------------------------------------------------
this.bob = game.add.sprite(100,100, game.bmpBob);
// enable physics on bob so he response to gravity and velocity
game.physics.enable(this.bob, Phaser.Physics.ARCADE);
// set bob's gravity
this.bob.body.gravity.y = 2600;
this.bob.anchor.setTo(0.5, 0.5);
// check if bob leaves the game
this.bob.checkWorldBounds = true;
// if bob leaves the game (is out of bounds), call the 'gameOver' function
this.bob.events.onOutOfBounds.add(this.gameOver, this);
game.camera.follow(this.bob);
// convert our ascii MAP into game objects
// ------------------------------------------------------------------------
// define a group (a collection of objects) for our blocks and our flags.
this.blocks = game.add.group();
this.flags = game.add.group();
// loop through our row of our MAP array
for (var i = 0; i < game.map.length; i++) {
// inside each row, loop through all the data elements
for (var j = 0; j < game.map[i].length; j++) {
// if we see the letter o, create a block
if (game.map[i][j] == 'o') {
// create our block object and put first one at the bottom middle of screen
var block = game.add.sprite(j * this.tileSize, i * this.tileSize, game.bmpBlock);
// enable physics on our block so it response to velocity
game.physics.enable(block, Phaser.Physics.ARCADE);
// set block velocity so it moves left
//block.body.velocity.x = -100;
// nothing can move this sprite
block.body.immovable = true;
block.anchor.setTo(0.5, 0.5);
// add block to our group of blocks.
this.blocks.add(block);
}
// if we see the letter F, create a flag
if (game.map[i][j] == 'F') {
var flag = game.add.sprite(j * this.tileSize, i * this.tileSize, game.bmpFlag);
game.physics.enable(flag, Phaser.Physics.ARCADE);
flag.body.immovable = true;
flag.anchor.setTo(0.5, 0.5);
// add flag to the group of flags
this.flags.add(flag);
}
}
}
},
// the update function runs continously during our game
update: function() {
// check if bob collides with a block
game.physics.arcade.collide(this.bob, this.blocks);
// check if bob runs over a flag
game.physics.arcade.overlap(this.bob, this.flags, this.caughtFlag);
// check if this level is over
if (playlevel1State.ThisLevelIsOverDude === true) {
// call the game over function
this.gameOver();
}
// make bob move
// -------------------------------------------------------------------
// first stop bob
this.bob.body.velocity.x = 0;
// move bob if player is touching screen
if (game.input.activePointer.isDown) {
if (game.input.y > game.height / 2) {
// if Left Arrow key down then move bob left
if ((game.input.x < game.width / 2)) {
this.bob.body.velocity.x = -100;
}
// if Right Arrow key down then move bob right
if ((game.input.x > game.width / 2)) {
this.bob.body.velocity.x = 100;
}
}
}
// make bob jump
// -------------------------------------------------------------------
// check if bob is sitting on an immovable object
this.onTheGround = this.bob.body.touching.down;
// bob is only allowed to jump when he is on the ground
if (this.onTheGround) {
//if (this.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {
if (game.input.activePointer.isDown) {
if (game.input.y < game.height/2) {
// make bob jump by setting his velocity on the Y axis
this.bob.body.velocity.y = -900;
this.bob.body.velocity.x = 0;
}
}
}
},
caughtFlag: function(bob, flag) {
game.state.start('winner');
},
gameOver: function() {
game.state.start('gameover');
}
};
Run Game and Check for Errors
Press F12 to check console for any problems.
Play It! What other games can you make using this code? Draw your own images and / or define your own map.
code on plnkr