<!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="playlevel2.js"></script>
      <script src="playlevel3.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('playlevel2', playlevel2State);
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');
    
  } 
  
}; 

// phaser game engine examples for teaching kids
// www.smoothdaddyg.com
// @developerdanny



// the preload state allows us to load in all the data we need for our game

var loadState = {
  
  preload: function() {


    var bulletData = [
    	'...00...',
    	'..0330..',
    	'.038830.',
    	'03888830',
    	'03888830',
    	'.038830.',
    	'..0330..',
    	'...00...'
    ];
    game.bmpBullet = game.create.texture('bullet', bulletData, 2, 2, 0, false);
  
    var particleData = [
    	'.BB.',
    	'BBBB',
    	'BBBB',
    	'.BB.'
    ];    
    game.bmpParticle = game.create.texture('particle', particleData, 1, 1, 0, false);



    var starsData = [
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDD2DDDDD',
	'DDDDDDDDDDDDDDDD',
	'DD2DDDDDDDDDDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDD2DDD',
	'DDDDDD2DDDDDDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDDDD2D',
	'DDDD2DDDDDDDDDDD',
	'DDDDDDDDDD2DDDDD',
	'DDDDDDDDDDDDDDDD',
	'DDDDDDDDDDDDDDDD'
    ];
    game.bmpStars = game.create.texture('stars', starsData, 1, 1, 0, false);


    // BOB IMAGE DATA
    // data used to make Bob look like he is running and jumping
    var bobStand1Data = [
    	'..0000..',
    	'..0220..',
    	'...66...',
    	'..6EE6..',
    	'..6EE6..',
    	'...66...',
    	'...66...',
    	'...55...'
    ];	
    var bobStand2Data = [
    	'..0000..',
    	'..0110..',
    	'...66...',
    	'..6EE6..',
    	'..6EE6..',
    	'...66...',
    	'...66...',
    	'...55...'
    ];	

    var bobRight1Data = [
    	'..0000..',
    	'..062...',
    	'.6.66...',
    	'..6EE66.',
    	'...EE...',
    	'.5666...',
    	'.5..6...',
    	'....55..'
    	];
    	
    var bobRight2Data = [
    	'..0000..',
    	'..062...',
    	'...66.6.',
    	'..6EE6..',
    	'.6.EE...',
    	'...66...',
    	'...66...',
    	'...55...'
    ];    
    
    var bobLeft1Data = [
    	'..0000..',
    	'...260..',
    	'...66.6.',
    	'.66EE6..',
    	'...EE...',
    	'...6665.',
    	'...66.5.',
    	'..55....'
    	];
    	
    var bobLeft2Data = [
    	'..0000..',
    	'...260..',
    	'.6.66...',
    	'..6EE6..',
    	'...EE.6.',
    	'...66...',
    	'...66...',
    	'...55...'
    	];

    	
    var bobJump1Data = [
    	'..0000..',
    	'..062...',
    	'.7.66.7.',
    	'..6EE6..',
    	'...EE...',
    	'.566665.',
    	'........',
    	'........'
    ];    	
    var bobJump2Data = [
    	'..0000..',
    	'..062...',
    	'...66...',
    	'.76EE67.',
    	'...EE...',
    	'.566665.',
    	'........',
    	'........'
    ];    	
        	
    // combine all frames 
    var bobData = bobStand1Data.concat(bobStand2Data);
        bobData = bobData.concat(bobRight1Data).concat(bobRight2Data);
        bobData = bobData.concat(bobLeft1Data).concat(bobLeft2Data);
        bobData = bobData.concat(bobJump1Data).concat(bobJump2Data);
    
    // create a binaryImage (a spritesheet pic) from the data
    // this image will have all frames inside it, one on-top of the other.
    // game.create.texture(key, data, pixelHeightX, PixelHeightY, Palette = 0 for default palette, false = generate a bitmap(bmp) image)
    game.bmpBobSpriteSheet = game.create.texture('bobSpriteSheet',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);
    




    var heartData = [
    	'............',
    	'............',
    	'..000..000..',
    	'.0333003330.',
    	'033233332330',
    	'033203302330',
    	'033333333330',
    	'.0333223330.',
    	'..03222230..',
    	'...033330...',
    	'....0330....',
    	'.....00.....'
    ];
    game.bmpHeart = game.create.texture('heart', heartData, 4, 4, 0,false);

    

    var monsterData = [
    	'............',
    	'.666060666..',
    	'.666606666..',
    	'.600060006..',
    	'.600060006..',
    	'.600260026..',
    	'.666666666..',
    	'.666666666..',
    	'.660000066..',
    	'.666666666..',
    	'............',
    	'............'
    ];
    game.bmpMonster = game.create.texture('monster', monsterData, 4, 4, 0,false);



    var treeData = [
    	'...BB...',
    	'.BBBBBB.',
    	'.BB66BB.',
    	'.B.66.B.',
    	'...66...',
    	'...66...',
    	'AAAAAAAA',
    	'55555555'
    ];
    game.bmpTree = game.create.texture('tree', treeData, 6, 6, 0,false);


    // add two properties to our games to store the score and highscore
    game.score = 0;
    game.highScore = 0;

  },
  
  create: function() {
    //this.bob = game.add.sprite(1,1, game.bmpBobSpriteSheet);
    game.state.start('menu');  
  }
  
  
}; 
  





// the menu state displays instructions for our game

var menuState = {
  
  create: function() {

    // keep track of our high score
    if (game.score > game.highScore) {
        // if the score was higher than the current high score, set new high score
        game.highScore = game.score;
    } 

    // reset our score
    game.score = 0;


    // change the background color 
    game.stage.backgroundColor = '#2a5699';


    // fill: means inside color of font
    // stroke: means outside color of font
    txtTitle = game.add.text(game.world.centerX, game.world.centerY / 2, '', { font: "30pt Courier", fill: "#f442d9", stroke: "#119f4e", strokeThickness: 10 });
    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 = 'Press Spacebar to Play!';

    txtPlay = game.add.text(game.world.centerX, game.world.centerY - game.world.centerY / 4, '', { font: "12pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
    txtPlay.anchor.set(0.5);
    txtPlay.text = 'Use keys A and D for left and right, UP Arrow Jumps.';

    txtPlay = game.add.text(game.world.centerX, game.world.centerY - game.world.centerY / 6, '', { font: "12pt Courier", fill: "#f4eb42", stroke: "#119f4e", strokeThickness: 2 });
    txtPlay.anchor.set(0.5);
    txtPlay.text = 'High Score: ' + game.highScore;



    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 presses spacebar, play game
     if (game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) { 
        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 (stand on it)
    // F = flag (ends the game)
    // X = enemy (u die if u touch it)
    // H = heart (gets you points)
    // T = tree (does nothing)
     game.map = [
    	'.............................XXXXX.',
    	'...................................',
    	'.........X.........................',
    	'...................................',
    	'.......................X.......X...',
    	'.......................X.......XX..',
    	'............X...........H..........',
    	'...................o..o.X....X....F',
      '............X.X...o......H........X',
      '.............X.H.....X..oooo..X.X.o',
      '......H....X.....o.....o....oooooo.',
      '.....o......Xo..X.X..X.o...........',
      'oooooooooooooooooooooooo...........'
    ];

  },




  // 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 a spacey background
    game.add.tileSprite(0, 0, game.world.width, game.world.height, game.bmpStars);






    // create bob object
    // ------------------------------------------------------------------------
    
    // add Bob's SpriteSheet to our game
    // addSpriteSheet(key, url, data, frameWidth, frameHeight, frameMax, margin, spacing)
    // frameWidth = 8 pixels wide * 4 pixel width = 32
    // frameMax = 8 frames
    game.cache.addSpriteSheet('bobSpriteSheet','', game.bmpBobSpriteSheet.canvas, 8*4, 8*4, 8,0,0);    

    // add bob object to game using the spriteSheet
    this.bob = game.add.sprite(100,100, "bobSpriteSheet");
    
    // add several animation routines to bob.   
    // animations.add(animationsGroupNames, frames to use, swap frames every 10 frames per second)
    this.bob.animations.add('stand',[0,1], 10, true);
    this.bob.animations.add('right',[2,3], 10, true);
    this.bob.animations.add('left',[4,5], 10, true);
    this.bob.animations.add('jump',[6,7], 10, true);
    
    
    
    
    
    // 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();
    this.hearts = game.add.group();
    this.trees = 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);
                
            }

            // if we see the letter H, create a heart
            if (game.map[i][j] == 'H') {
              
                // create heart
                var heart = game.add.sprite(j * this.tileSize, i * this.tileSize, game.bmpHeart);
                game.physics.enable(heart, Phaser.Physics.ARCADE);
                heart.body.immovable = true; 
                heart.anchor.setTo(0.5, 0.5);

                // add heart to the group of flags
                this.hearts.add(heart);
                
            }


            // if we see the letter T, create a tree
            if (game.map[i][j] == 'T') {
              
                // create heart
                var tree = game.add.sprite(j * this.tileSize, i * this.tileSize, game.bmpTree);
                game.physics.enable(tree, Phaser.Physics.ARCADE);
                tree.body.immovable = true; 
                tree.anchor.setTo(0.5, 0.5);

                // add tree to the group of flags
                this.trees.add(tree);
                
            }


        }
    }


    // show score on screen and fix it to the camera so it moves with player
    this.TextForScoreOnScreen = game.add.text(200, 500, "Score: ", { font: "32px Arial", fill: "#ffffff", align: "center" });
    this.TextForScoreOnScreen.fixedToCamera = true;
    this.TextForScoreOnScreen.cameraOffset.setTo(1, 1);


    // bob's weapon
    // ----------------------------------------------------
    
    //  Creates 30 bullets, using the 'bullet' graphic
    this.weapon = game.add.weapon(30, game.bmpBullet);

    //  The bullet will be automatically killed when it leaves the world bounds
    this.weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS;

    //  The speed at which the bullet is fired
    this.weapon.bulletSpeed = 600;

    //  Speed-up the rate of fire, allowing them to shoot 1 bullet every 60ms
    this.weapon.fireRate = 100;

    //  Tell the Weapon to track the 'player' Sprite
    //  With no offsets from the position
    //  But the 'true' argument tells the weapon to track sprite rotation
    this.weapon.trackSprite(this.bob, 0, 0, false);


  },
  
  
  
  // the update function runs continously during our game
  update: function() { 

    // show score on screen
    this.TextForScoreOnScreen.setText("Score:" + game.score);



    // 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 player touches a heart.  give them points
    game.physics.arcade.overlap(this.bob, this.hearts, this.heartTouched);


    // did bullet hit enemy?
    game.physics.arcade.overlap(this.weapon.bullets, this.enemys, this.enemyKilled);
    game.physics.arcade.collide(this.weapon.bullets, this.blocks, this.killBullet);



    // check if this level is over
    if (playlevel1State.ThisLevelIsOverDude === true) {

      // call the game over function
      this.gameOver();
      
    }


    this.makeBobMove();


  },
  
  makeBobMove: function() { 
    
    // check if user has pressed any keys
    if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) 
    {
      
      // check if bob is sitting on an immovable object
      // onTheGround = true or false
      this.onTheGround = this.bob.body.touching.down;

      // bob can only jump if he is currently no the ground
      if (this.onTheGround) 
      {
        // make bob jump
        this.bob.body.velocity.y = -900; 
        this.bob.body.velocity.x = 0;
        this.bob.play('jump');
      }
      
    } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
    {
      this.weapon.fireAngle = Phaser.ANGLE_RIGHT;      
      this.weapon.fire();
       
    } else if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
    {
      
      this.weapon.fireAngle = Phaser.ANGLE_LEFT;
      this.weapon.fire();
       
    } else if (game.input.keyboard.isDown(Phaser.Keyboard.A)) 
    {
      
      this.bob.body.velocity.x = -200;
      this.bob.play('left');

    } else if (game.input.keyboard.isDown(Phaser.Keyboard.D)) 
    {
      
      this.bob.body.velocity.x = 200;
      this.bob.play('right');

    } else
    {
      
      // bobs not moving, so make him stand still
      this.bob.body.velocity.x = 0;
      this.bob.play('stand');
      
    }

  },

  enemyKilled: function(bullet, enemy) { 
    
    // create an explosion by creating a phaser emitter object
    this.emitter = game.add.emitter(0,0,100);
    
    // tell the emitter what the explosion particle will look like
    this.emitter.makeParticles(game.bmpParticle);
    
    // give the particles some gravity
    this.emitter.gravity = 200;
    
    // where is this explosion to take place?
    this.emitter.x = bullet.body.x; 
    this.emitter.y = bullet.body.y;
    
    // start explosion
    // emitter.start(true=all particles emitted at once, 2000ms particle lifespan, ignore, nbr particles)
    this.emitter.start(true, 2000, null, 10);
    
    
    // remove enemy
    enemy.kill();
    
    // add points
    game.score = game.score + 500; 

    
  },
  
  killBullet: function(bullet, block) { 
    
    bullet.kill();
    
  },

  heartTouched: function(bob, heart) { 
   
    heart.kill();
    
    game.score = game.score + 1000; 
    
  },

  caughtFlag: function(bob, flag) { 

    //game.state.start('playlevel2');
    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.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) { 
        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.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) { 
        game.state.start('menu');
     }
  }
  
  
}; 
  








// play level 2 of our game

var playlevel2State = {
  
  // 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. 
    // o = ground (stand on it)
    // F = flag (ends the game)
    // X = enemy (u die if u touch it)
    // H = heart (gets you points)
    // T = tree (does nothing)
    game.map = [
    	'...................................',
    	'...................................',
    	'...................................',
    	'...................................',
    	'............................H......',
    	'..........................H........',
    	'........................H..........',
    	'...................o..o........F...',
      '.................o......H.........X',
      '..............H........oo.o.o.o.o.o',
      '................o..................',
      '.....o.T....Xo.......Xoo.o.o.o.o.o.',
      'oooooooooooooooooooooo.............'
    ];

  },




  // 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 a spacey background
    game.add.tileSprite(0, 0, game.world.width, game.world.height, game.bmpStars);






    // 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();
    this.hearts = game.add.group();
    this.trees = 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);
                
            }

            // if we see the letter H, create a heart
            if (game.map[i][j] == 'H') {
              
                // create heart
                var heart = game.add.sprite(j * this.tileSize, i * this.tileSize, game.bmpHeart);
                game.physics.enable(heart, Phaser.Physics.ARCADE);
                heart.body.immovable = true; 
                heart.anchor.setTo(0.5, 0.5);

                // add heart to the group of flags
                this.hearts.add(heart);
                
            }


            // if we see the letter T, create a tree
            if (game.map[i][j] == 'T') {
              
                // create heart
                var tree = game.add.sprite(j * this.tileSize, i * this.tileSize, game.bmpTree);
                game.physics.enable(tree, Phaser.Physics.ARCADE);
                tree.body.immovable = true; 
                tree.anchor.setTo(0.5, 0.5);

                // add tree to the group of flags
                this.trees.add(tree);
                
            }


        }
    }


   this.t = game.add.text(200, 500, "Score: ", { font: "32px Arial", fill: "#ffffff", align: "center" });
  this.t.fixedToCamera = true;
  this.t.cameraOffset.setTo(1, 1);

  },
  
  
  
  // the update function runs continously during our game
  update: function() { 

    // show score on screen
    this.t.setText("Score:" + game.score);



    // 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 player touches a heart.  give them points
    game.physics.arcade.overlap(this.bob, this.hearts, this.heartTouched);




    // 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;

    if (game.input.keyboard.isDown(Phaser.Keyboard.A)) {
      this.bob.body.velocity.x = -200;
    }
    if (game.input.keyboard.isDown(Phaser.Keyboard.D)) {
      this.bob.body.velocity.x = 200;
    }


    // 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 (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
        this.bob.body.velocity.y = -900; 
        this.bob.body.velocity.x = 0;
      }
    }


  },

  heartTouched: function(bob, heart) { 
   
    heart.kill();
    
    game.score = game.score + 1000; 
    
  },

  caughtFlag: function(bob, flag) { 

    game.state.start('winner');

  }, 


  gameOver: function() { 

    game.state.start('gameover');

  }
  
};