Top Chef Bob - Part 08 - Add Recipes page!

Part 08 of the Top Chef Bob food simulator game is to:
1) Update the Main Menu to include an option to see the Recipes page.
2) Add a new STATE to our game which will contain our recipes.
3) Display all our recipes on screen.

Update Main Menu
In the "menu.js" file, replace the entire contents with code below. The new code will add an option to press UP arrow to see recipe page.

    // the menu state displays instructions for our game

    var menuState = {

    create: function() {


    // 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: "75pt Courier", fill: "#f442d9", stroke: "#119f4e", strokeThickness: 10 });
    txtTitle.anchor.set(0.5);
    txtTitle.text = 'Top Chef Bob';

    txtDesc = game.add.text(game.world.centerX, game.world.centerY - game.world.centerY / 4, '', { font: "15pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
    txtDesc.anchor.set(0.5);
    txtDesc.text = 'Help Bob make orders and get 2 satisfied customers!';



    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 = 'Spacebar to Play! - UP Arrow for Recipes!';

    txtInstr = game.add.text(game.world.centerX, game.world.centerY + game.world.centerY / 2, '', { font: "12pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
    txtInstr.anchor.set(0.5);
    txtInstr.text = 'Use Arrow keys to move Bob during play';


    txtCredit = game.add.text(game.world.centerX, game.world.height - 5, '', { font: "8pt Courier", fill: "#19cb65", stroke: "#119f4e", strokeThickness: 2 });
    txtCredit.anchor.set(0.5);
    txtCredit.text = 'This game designed and built by the TinkersAndThinkers Coding Club at Cedar Park Middle School (Austin, TX)';



    },

    update: function() {

    // when user presses spacebar, play game
    if (game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {
    game.state.start('playlevel1');
    }

    if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
    game.state.start('recipes');
    }


    }


    };

Add a new javascript file called recipes
Add a new file called "recipes.js". In the INDEX.HTML file, add a new SCRIPT tag, just before the script game.js, which will call our recipes file.

        script src="recipes.js"

        

Add picture of empty plate
In the new "recipes.js" file, add the code below. You will need to modify this code to include all your recipes.

    // the state displays our recipes

    var recipesState = {

    create: function() {


    // change the background color
    game.stage.backgroundColor = '#934b0b';

    // title
    txtTitle = game.add.text(game.world.centerX, 20, '', { font: "30pt Courier", fill: "#ffffff", stroke: "#ffffff", strokeThickness: 0 });
    txtTitle.anchor.set(0.5);  // need this line to center text on screen
    txtTitle.text = 'Recipes';

    // Taco Ingridents
    txtTaco = game.add.text(1,100, '', { font: "20pt Courier", fill: "#ffffff", stroke: "#ffffff", strokeThickness: 0 });
    txtTaco.text = 'Taco';

    game.add.sprite(1,200, game.bmpTacoShell);
    game.add.sprite(1,300, game.bmpMeat);
    game.add.sprite(1,400, game.bmpLettuce);

    // add other menu items and their ingridents in the proper order required




    },

    update: function() {

    // when user presses spacebar, return to main menu
    if (game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {
    game.state.start('menu');
    }

    }


    };

Run Game and Check for Errors
Press F12 to check console for any problems. Press UP Arrow to see Recipes!

code on plnkr