<!DOCTYPE html>
<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>
/* Styles go here */
// 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');
var bootState = {
create: function() {
// add physics to our game
game.physics.startSystem(Phaser.Physics.ARCADE);
// call the load state
game.state.start('load');
}
};
// the preload state allows us to load in all the data we need for our game
var loadState = {
picsHotdog: function() {
// hotdog bun
var dataHotdogWithBun = [
'................',
'................',
'................',
'................',
'................',
'...6666666666...',
'..677777777776..',
'.67777777777776.',
'.67777777777776.',
'..666666666666..',
'................',
'................',
'................',
'................',
'................',
'................'
];
game.bmpHotdogWithBun = game.create.texture('HotdogWithBun', dataHotdogWithBun, 6, 6, 0, false);
// hotdog bun meat
var dataHotdogWithBunMeat = [
'................',
'................',
'................',
'................',
'................',
'..666666666666..',
'.63333333333336.',
'.36666666666663.',
'3677777777777763',
'.67777777777776.',
'..666666666666..',
'................',
'................',
'................',
'................',
'................'
];
game.bmpHotdogWithBunMeat = game.create.texture('HotdogWithBunMeat', dataHotdogWithBunMeat, 6, 6, 0, false);
// hotdog bun meat mustard
var dataHotdogWithBunMeatMustard = [
'................',
'................',
'................',
'................',
'................',
'..666666666666..',
'.63883388338836.',
'.38338833883383.',
'3666666666666663',
'.67777777777776.',
'..666666666666..',
'................',
'................',
'................',
'................',
'................'
];
game.bmpHotdogWithBunMeatMustard = game.create.texture('HotdogWithBunMeatMustard', dataHotdogWithBunMeatMustard, 6, 6, 0, false);
},
picsTaco: function() {
// build taco - Step 1: an empty taco shell
var dataTacoShell = [
'................',
'................',
'................',
'................',
'................',
'................',
'.....888888.....',
'...8888888888...',
'..888888688888..',
'.88888688888888.',
'.88888888688868.',
'8888886888888888',
'8688888888888888',
'8888888886888688',
'................',
'................'
];
game.bmpTacoShell= game.create.texture('TacoShell', dataTacoShell, 6, 6, 0, false);
// build taco - Step 2: taco shell filled with meat
var dataTacoShellWithMeat = [
'................',
'................',
'................',
'................',
'................',
'.....55.555.....',
'...5.88888855...',
'...8888688888...',
'.58888888888885.',
'5888888888888885',
'588688888888888.',
'8888888886888888',
'8888888888886888',
'8888888888888888',
'................',
'................'
];
game.bmpTacoShellWithMeat = game.create.texture('TacoShellWithMeat', dataTacoShellWithMeat, 6, 6, 0, false);
// build taco - Step 3: the completed taco, taco shell filled with meat and lettuce
var dataTacoShellWithMeatLettuce = [
'................',
'................',
'................',
'................',
'....BB.BBBB.....',
'...BB5BB555B....',
'..B5A8888885B...',
'.BB8888888888BB.',
'.58886888888885.',
'5888888888888885',
'568888688888868B',
'8888888886888888',
'8888888888886888',
'8888888888888888',
'................',
'................'
];
game.bmpTacoShellWithMeatLettuce = game.create.texture('TacoShellWithMeatLettuce', dataTacoShellWithMeatLettuce, 6, 6, 0, false);
},
picsFood: function() {
// lettuce
var dataLettuce = [
'................',
'....00...B00....',
'....0B.022BBB0..',
'..00BB022BBBB0..',
'.0BBBB22BBB2B0..',
'.0BBB2BBBB2BB0..',
'0BBB22BBB22BB...',
'0BB22BBB22BB0...',
'0BB2BBBB2BBB....',
'0B22BBB2BBBB0.0.',
'0B2BBB22BB222B0.',
'0B2B2222222BBB0.',
'0B222BBBB0BBB0..',
'B2BBBBB00.00....',
'B2BBBBB.........',
'2BB0000.........'
];
game.bmpLettuce = game.create.texture('lettuce', dataLettuce, 6, 6, 0, false);
// meat
var dataMeat = [
'....00000.......',
'...0444400......',
'...03344440.....',
'..0444444440....',
'..04443333440...',
'.0044342233400..',
'004443233234400.',
'0664332432343400',
'0664434222443440',
'0566433443434444',
'0556444333434440',
'0555644444446650',
'.055666444466500',
'..0555666666500.',
'...05555555550..',
'....000000000...'
];
game.bmpMeat = game.create.texture('meat', dataMeat, 6, 6, 0, false);
// cheese
var dataCheese = [
'.....77.........',
'....7887........',
'...788887.......',
'..78888887......',
'..777888887.....',
'..7887778887....',
'..7888887777....',
'..7778888887....',
'.....7778887....',
'........7777....',
];
game.bmpCheese = game.create.texture('cheese', dataCheese, 6, 6, 0, false);
},
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);
// data used to make our Animated Enemy.
// the enemy has two frames, each 8 pixels wide by 8 pixels high
var EnemyFrame0Data = [
'33....33',
'..3..3..',
'..3..3..',
'3..33..3',
'.3AAAA3.',
'.A..22A.',
'.A....A.',
'3.AAAA.3'
];
var EnemyFrame1Data = [
'........',
'........',
'........',
'........',
'..AAAA..',
'.A22..A.',
'.A....A.',
'..AAAA..'
];
// combine both arrays of frame data together to make one big array
var EnemyData = EnemyFrame0Data.concat(EnemyFrame1Data);
// create a binaryImage (pic) from the data
// this image will have both frames inside it, one ontop of the other.
// game.create.texture(key, data, pixelHeightX, PixelHeightY, Palette = 0 for default palette, false = generate a bitmap(bmp) image)
game.bmpEnemySpriteSheet = game.create.texture('enemySpriteSheet',EnemyData, 2, 2, 0, false);
},
create: function() {
game.state.start('menu');
}
};
// 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');
}
}
};
// 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...',
'.....o......Xo........oo.o.o.o.o.o.ooo.................................oooooo........o......F...oo....o',
'oooooooooooooo.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);
// create our enemy
// ------------------------------------------------------------------------
// add a SpriteSheet to our game called 'enemySpriteSheet'
// addSpriteSheet(key, url, data, frameWidth, frameHeight, frameMax, margin, spacing)
// frameWidth = 8 pixels wide * 2 pixel width = 32
// frameMax = 2 frames
game.cache.addSpriteSheet('enemySpriteSheet','', game.bmpEnemySpriteSheet.canvas, 8*2, 8*2, 2,0,0);
// 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();
this.enemys = 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);
}
// if we see the letter X, create an enemy
if (game.map[i][j] == 'X') {
// create our enemy sprite at specific location
var enemy = game.add.sprite(j * this.tileSize, i * this.tileSize, 'enemySpriteSheet');
// add physics to our enemy
game.physics.enable(enemy, Phaser.Physics.ARCADE);
// set it's anchor point to the middle of the image
enemy.anchor.setTo(0.5, 0.5);
// create an animation and give it a name(key)
var walk = enemy.animations.add('walk');
// starts the animation playing by using its key ("walk")
// enemy.animations.play (key, nbr of frames per second, loop when done = true)
enemy.animations.play('walk', 10, true);
enemy.body.velocity.x = -50;
enemy.body.gravity.y = 200;
enemy.body.bounce.set(1);
// add our enemy to the group of enemies
this.enemys.add(enemy);
}
}
}
},
// 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 enemy collids with a block
game.physics.arcade.collide(this.enemys, this.blocks);
game.physics.arcade.overlap(this.bob, this.enemys, this.gameOver);
// 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');
}
};
// 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
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');
}
}
};