<!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() {

    // load in pictures for taco order
    this.picsTaco();
    
    // load in pictures for hotdog order
    this.picsHotdog();

    // load in pictures for hamburger order
    this.picsHamburger();
    
    // load in pictures for pizza order
    this.picsPizza();

    // load in pictures of food pieces
    this.picsIngridients();

    // load in pictures of bob
    this.picsBob();

    // load in pictures of kitchen
    this.picsKitchen();

    // load in pictures for pizza order
    this.picsCustomer();

  },
  
  picsCustomer: function() {
    


    // customer happy
    var dataCustomerHappy = [
      '0000000000000000',
    	'0222222222222220',
    	'0222222222222220',
    	'0222000000002220',
    	'0220222222220220',
    	'0202222222222020',
    	'0202002220022020',
    	'0202002220022020',
    	'0202222222222020',
    	'0200000002222020',
    	'0202222202222020',
    	'0202222002222020',
    	'0202220022222020',
    	'0220200222220220',
    	'0222000000002220',
    	'0000000000000000'
	  ];
    game.bmpCustomerHappy = game.create.texture('CustomerHappy', dataCustomerHappy, 6, 6, 0, false);


    // customer bored
    var dataCustomerBored = [
    	'0000000000000000',
    	'0222222222222220',
    	'0222222222222220',
    	'0222000000002220',
    	'0220222222220220',
    	'0202222222222020',
    	'0202000222222020',
    	'0202222222222020',
    	'0202202000222020',
    	'0202202202222020',
    	'0202202202222020',
    	'0202222202222020',
    	'0200022222222020',
    	'0220202222220220',
    	'0222000000002220',
    	'0000000000000000'
  	];
    game.bmpCustomerBored = game.create.texture('CustomerBored', dataCustomerBored, 6, 6, 0, false);


    // customer mad
    var dataCustomerMad = [
  	'0000000000000000',
  	'0222222222222220',
  	'0222222222222220',
  	'0222000000002220',
  	'0220222222220220',
  	'0200222222222020',
  	'0202002222222020',
  	'0202220222222020',
  	'0202002222222020',
  	'0202002200222020',
  	'0202222200222020',
  	'0200000222222020',
  	'0202220022222020',
  	'0220222022220220',
  	'0222000000002220',
  	'0000000000000000'
  	];
    game.bmpCustomerMad = game.create.texture('CustomerMad', dataCustomerMad, 6, 6, 0, false);

  },

  
  picsKitchen: function() {
    
    // kitchen floor tiles
    var dataTile = [
      '020202',
      '202020',
      '020202',
      '202020'
  	];
    game.bmpTile = game.create.texture('tile', dataTile, 6, 6, 0, false);
    
  },
  
  
  picsBob: function() {
    

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

  
  }, 
  

  
  picsIngridients: 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);
    
    
    // olive
    var dataOlive = [
    '..000000..',
    '.00000000.',
    '0000000000',
    '000....000',
    '000....000',
    '0000000000',
    '.00000000.',
    '..000000..'
  	];
    game.bmpOlive = game.create.texture('olive', dataOlive, 6, 6, 0, false);
    
    
    // pepperoni
    var dataPepperoni = [
      '......33......',
      '....333333....',
      '...33333333...',
      '..3333333333..',
      '.333333333333.',
      '33333333333333',
      '33333333333333',
      '.333333333333.',
      '..3333333333..',
      '...33333333...',
      '....333333....',
      '......33......'
  	];
    game.bmpPepperoni = game.create.texture('Pepperoni', dataPepperoni, 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);
  
    
    
  },
  
  picsHotdog: function() {
    
    // hotdog bun
    var dataHotdogBun = [
  	'...6666666666...',
  	'..677777777776..',
  	'.67777777777776.',
  	'.67777777777776.',
  	'..666666666666..'
  	];
    game.bmpHotdogBun = game.create.texture('HotdogBun', dataHotdogBun, 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);


  },
  
  
  picsHamburger: function() {


  var dataBunTop = [
  	'...6662666626...',
  	'..626662662666..',
  	'.66626666666266.',
  	'.62666626626662.'
  ];
  game.bmpBunTop = game.create.texture('BunTop', dataBunTop, 6, 6, 0, false);


  var dataBunBottom = [
  	'6666666666666666',
  	'.66666666666666.',
  	'..666666666666..'
  ];
  game.bmpBunBottom = game.create.texture('BunBottom', dataBunBottom, 6, 6, 0, false);


  var dataHamburgerWithBunMeat = [
  	'................',
  	'.44444434444344.',
  	'4443443444443444',
  	'.43344444344444.',
  	'6666666666666666',
  	'.66666666666666.',
  	'..666666666666..'
  ];
  game.bmpHamburgerWithBunMeat = game.create.texture('HamburgerWithBunMeat', dataHamburgerWithBunMeat, 6, 6, 0, false);


  var dataHamburgerWithBunMeatCheese = [
  	'................',
  	'.88888788887888.',
  	'.78788887878887.',
  	'.44444434444344.',
  	'4443443444443444',
  	'.43344444344444.',
  	'6666666666666666',
  	'.66666666666666.',
  	'..666666666666..'
	];
  game.bmpHamburgerWithBunMeatCheese = game.create.texture('HamburgerWithBunMeatCheese', dataHamburgerWithBunMeatCheese, 6, 6, 0, false);
  
    
  var dataHamburgerWithBunMeatCheeseLettuce = [
  	'................',
  	'.BBBBBBBBBBBBBB.',
  	'.BBBBBBBBBBBBBB.',
  	'.88888788887888.',
  	'.78788887878887.',
  	'.44444434444344.',
  	'4443443444443444',
  	'.43344444344444.',
  	'6666666666666666',
  	'.66666666666666.',
  	'..666666666666..'
	];
  game.bmpHamburgerWithBunMeatCheeseLettuce = game.create.texture('HamburgerWithBunMeatCheeseLettuce', dataHamburgerWithBunMeatCheeseLettuce, 6, 6, 0, false);


  var dataHamburgerWithBunMeatCheeseLettuceBun = [
  	'...6662666626...',
  	'..626662662666..',
  	'.66626666666266.',
  	'.62666626626662.',
  	'.BBBBBBBBBBBBBB.',
  	'.BBBBBBBBBBBBBB.',
  	'.88888788887888.',
  	'.78788887878887.',
  	'.44444434444344.',
  	'4443443444443444',
  	'.43344444344444.',
  	'6666666666666666',
  	'.66666666666666.',
  	'..666666666666..'
	];
  game.bmpHamburgerWithBunMeatCheeseLettuceBun = game.create.texture('HamburgerWithBunMeatCheeseLettuceBun', dataHamburgerWithBunMeatCheeseLettuceBun, 6, 6, 0, false);

  },
  
  
  picsPizza: function() {


  var dataPizzaDough = [
    '.....666........',
    '....6666666.....',
    '....66666666....',
    '...6666666666...',
    '...6666666666...',
    '..66666666666...',
    '..666666666666..',
    '..666666666666..',
    '.6666666666666..',
    '.6666666666.....',
    '66666666........',
    '666666..........',
    '666.............'
	];
  game.bmpPizzaDough = game.create.texture('PizzaDough', dataPizzaDough, 6, 6, 0, false);


  var dataPizzaDoughCheese = [
    '......66666.....',
    '.....88866666...',
    '....8888888666..',
    '....88888888666.',
    '...888888888866.',
    '...888888888866.',
    '..8888888888866.',
    '..8888888888886.',
    '..8888888888886.',
    '.8888888888888..',
    '.8888888888.....',
    '88888888........',
    '888888..........',
    '888.............'
	];
  game.bmpPizzaDoughCheese = game.create.texture('PizzaDoughCheese', dataPizzaDoughCheese, 6, 6, 0, false);



  var dataPizzaDoughCheesePepperoni = [
    '......66666.....',
    '.....88866666...',
    '....8838888666..',
    '....83338888666.',
    '...888388888866.',
    '...888888888866.',
    '..8888888838866.',
    '..8883888333886.',
    '..8833388838886.',
    '.8888388888888..',
    '.8888888888.....',
    '88888888........',
    '888888..........',
    '888.............'
	];
  game.bmpPizzaDoughCheesePepperoni = game.create.texture('PizzaDoughCheesePepperoni', dataPizzaDoughCheesePepperoni, 6, 6, 0, false);


    
  var dataPizzaDoughCheesePepperoniOlive = [
    '......66666.....',
    '.....88866666...',
    '....8838888666..',
    '....83338888666.',
    '...888388088866.',
    '...808888888866.',
    '..8888888838866.',
    '..8883888333886.',
    '..8833388838886.',
    '.8888388888888..',
    '.8888888888.....',
    '88880888........',
    '808888..........',
    '888.............'
	];
  game.bmpPizzaDoughCheesePepperoniOlive = game.create.texture('PizzaDoughCheesePepperoniOlive', dataPizzaDoughCheesePepperoniOlive, 6, 6, 0, false);


  }, 
  
  
  
  create: function() {
    
    // change the background color of our game
    game.stage.backgroundColor = '#5c94fc';
    
    // test pictures 
    this.testPictures();

    // continue to Menu Scence
    //game.state.start('menu');

  },
  
  testPictures: function() {
    
    // Ingridents
    game.add.sprite(1,1, game.bmpLettuce);
    game.add.sprite(100,1, game.bmpMeat);
    game.add.sprite(200,1, game.bmpCheese);
    game.add.sprite(300,1, game.bmpOlive);
    game.add.sprite(400,1, game.bmpPepperoni);

    // Taco
    game.add.sprite(1,100, game.bmpTacoShell);
    game.add.sprite(100,100, game.bmpTacoShellWithMeat);
    game.add.sprite(200,100, game.bmpTacoShellWithMeatLettuce);
    
    // Hotdog
    game.add.sprite(1,200, game.bmpHotdogBun);
    game.add.sprite(100,200, game.bmpHotdogWithBunMeat);
    game.add.sprite(200,200, game.bmpHotdogWithBunMeatMustard);
    
    // Hamburger
    game.add.sprite(1,300, game.bmpBunBottom);
    game.add.sprite(100,300, game.bmpBunTop);
    game.add.sprite(200,300, game.bmpHamburgerWithBunMeat);
    game.add.sprite(300,300, game.bmpHamburgerWithBunMeatCheese);
    game.add.sprite(400,300, game.bmpHamburgerWithBunMeatCheeseLettuce);
    game.add.sprite(500,300, game.bmpHamburgerWithBunMeatCheeseLettuceBun);

    // Pizza
    game.add.sprite(1,400, game.bmpPizzaDough);
    game.add.sprite(100,400, game.bmpPizzaDoughCheese);
    game.add.sprite(200,400, game.bmpPizzaDoughCheesePepperoni);
    game.add.sprite(300,400, game.bmpPizzaDoughCheesePepperoniOlive);

    // Customer
    game.add.sprite(1,500, game.bmpCustomerHappy);
    game.add.sprite(100,500, game.bmpCustomerBored);
    game.add.sprite(200,500, game.bmpCustomerMad);

  }
  


  
}; 
  







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

  }
  
};