Top Chef Bob - Part 04 - Bob's first customer!

Part 04 of the Top Chef Bob food simulator game is to:
1) Create objects for a Customer, an Order, and each Menu Item.
2) Detect when Bob touches food and assemble an order.





Add picture of empty plate
In the "load.js" file, replace the picKitchen function with the one below. The new function includes a picture of empty plate which we will need to show our menu item as Bob prepares the order.




    picsKitchen: function() {

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


    // empty plate
    var dataPlate = [
    '......0000......',
    '....00222200....',
    '...0222222220...',
    '..022222222220..',
    '.02222222222220.',
    '.02222222222220.',
    '0222222222222220',
    '0222222222222220',
    '0222222222222220',
    '0222222222222220',
    '.02222222222220.',
    '.02222222222220.',
    '..022222222220..',
    '...0222222220...',
    '....00222200....',
    '......0000......'
    ];
    game.bmpPlate = game.create.texture('plate', dataPlate, 6, 6, 0, false);


    },



Update our Create Function
In the "playlevel1.js" file, replace the CREATE function with the one below. Our new function adds a call to the new createMENU function.



    create: function() {

    // change the background color of our game
    game.stage.backgroundColor = '#5c94fc';


    this.createKeyboard();

    this.createBob();

    this.createKitchen();

    this.createIngredients();

    this.createMenu();

    },




Add the game objects
In the "playlevel1.js" file, add the createMENU function after the CREATE function. This new function contains code which defines our various objects: menu, the menu items, and customer!



    createMenu: function() {

    // this object defines our TACO menu item
    this.Taco = {
    name: 'taco',
    assemblyPictures: [game.bmpTacoShell, game.bmpMeat, game.bmpLettuce]
    };

    // this object defines our PIZZA menu item
    this.Pizza = {
    name: 'pizza',
    assemblyPictures: [game.bmpPizzaDough, game.bmpPizzaDoughCheese, game.bmpPizzaDoughCheesePepperoni, game.bmpPizzaDoughCheesePepperoniOlive]
    };

    // this array defines all the items on our menu.
    this.MenuItems = [this.Pizza];

    // this object defines our customer
    this.Customer = {
    MenuItemOrdered: null,
    OrderStep: -1,
    isOrderComplete: false,
    Mood: 'happy',
    Message: ''
    };


    // add picture of empty plate
    this.plate = game.add.sprite(10,300, game.bmpPlate);

    // add textbox on screen to show what customer says
    this.txtCustomer = game.add.text(1, 150, '', { font: "15pt Courier", fill: "#f4e242", stroke: "#f4e242", strokeThickness: 2 });
    this.txtCustomer.text = '';

    // add picture of our customer to the screen
    this.picCustomer = game.add.sprite(1,1, game.bmpCustomerHappy);

    },





Replace our UPDATE function
In the "playlevel1.js" file, replace the UPDATE function with the one below. The new function includes a call to our new function orderManagment.



    update: function() {


    // check if bob collides with the floor
    game.physics.arcade.collide(this.bob, this.floorTiles);

    // check if bob touches any of the food raining down
    game.physics.arcade.overlap(this.bob, this.foodDough.group, this.caughtDough, null, this);
    game.physics.arcade.overlap(this.bob, this.foodCheese.group, this.caughtCheese, null, this);
    game.physics.arcade.overlap(this.bob, this.foodPepperoni.group, this.caughtPepperoni, null, this);
    game.physics.arcade.overlap(this.bob, this.foodOlive.group, this.caughtOlive, null, this);


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

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

    }

    // code to make bob move around using the arrow keys
    this.makeBobMove();

    // drops random food ingredients from the top of the screen
    this.displayIngredient(this.foodDough);
    this.displayIngredient(this.foodCheese);
    this.displayIngredient(this.foodPepperoni);
    this.displayIngredient(this.foodOlive);

    // creates an order, shows order in progress and updates our customers mood
    this.orderManagement();

    },





Create and Update Orders
In the "playlevel1.js" file, add the orderManagement function right after the update function. The new function includes a picture of empty plate which we will need to show our menu item as Bob prepares the order.



    orderManagement: function() {

    // has customer ordered anything?
    if (this.Customer.MenuItemOrdered === null) {

    // customer wants to order something

    this.Customer.MenuItemOrdered = this.Pizza;
    this.Customer.OrderStep = -1;
    this.Customer.isOrderComplete =  false,
    this.Customer.Mood = 'happy';

    // customer says something
    this.txtCustomer.text = 'I want a ' + this.Customer.MenuItemOrdered.name + '!';

    this.picCustomer.loadTexture(game.bmpCustomerHappy);

    } else {

    // display picture of order in-progress
    this.plate.loadTexture(this.Customer.MenuItemOrdered.assemblyPictures[this.Customer.OrderStep]);

    // is the order complete yet?
    if (this.Customer.isOrderComplete) {

    // Order is Complete, so next customer will show up in 3 seconds
    if (this.game.time.now > this.TimeNextCustomerArrives) {

    // time for new customer, so reset customer object
    this.Customer.MenuItemOrdered = null;

    // clear out customer message
    this.txtCustomer.text = '';

    }

    }


    // display customer
    if (this.Customer.Mood == 'happy') {
    this.picCustomer.loadTexture(game.bmpCustomerHappy);
    }
    if (this.Customer.Mood == 'bored') {
    this.picCustomer.loadTexture(game.bmpCustomerBored);
    }
    if (this.Customer.Mood == 'mad') {
    this.picCustomer.loadTexture(game.bmpCustomerMad);
    }


    }

    },





Collision/Overlapping Functions
In the "playlevel1.js" file, add the following functions after the orderManagement function. The new functions are called any time Bob's body overlaps a food sprite.



    caughtDough: function(bob,dough) {

    if (this.Customer.MenuItemOrdered.name == 'pizza') {

    // set the current step to 0
    this.Customer.OrderStep = 0;
    this.Customer.Mood = 'happy';

    }

    },


    caughtCheese: function(bob,cheese) {

    // is this order pizza?
    if (this.Customer.MenuItemOrdered.name == 'pizza') {

    if (this.Customer.OrderStep == 1) return;

    // does bob have dough?
    if (this.Customer.OrderStep > -1) {

    this.Customer.OrderStep = 1;
    this.Customer.Mood = 'happy';
    this.txtCustomer.text = 'That Pizza is looking good!';

    } else {

    this.Customer.Mood = 'bored';
    this.txtCustomer.text = 'Where is my Pizza!';

    }
    }

    },

    caughtPepperoni: function(bob,pepperoni) {

    if (this.Customer.MenuItemOrdered.name == 'pizza') {

    if (this.Customer.OrderStep == 2) return;

    // bob has to have cheese already
    if (this.Customer.OrderStep > 0) {

    this.Customer.OrderStep = 2;
    this.Customer.Mood = 'happy';
    this.txtCustomer.text = 'Pizza good!';

    } else {

    this.Customer.Mood = 'bored';
    this.txtCustomer.text = 'You are so slow!';
    }
    }

    },

    caughtOlive: function(bob,olive) {

    if (this.Customer.MenuItemOrdered.name == 'pizza') {

    if (this.Customer.OrderStep == 3) return;

    // bob has to have pepperoni already
    if (this.Customer.OrderStep == 2) {

    this.Customer.OrderStep = 3;
    this.Customer.Mood = 'happy';
    this.Customer.isOrderComplete = true;

    this.txtCustomer.text = 'This Pizza is YUMMY!';

    this.TimeNextCustomerArrives = this.game.time.now + 3000;

    } else {

    this.Customer.Mood = 'mad';
    this.txtCustomer.text = 'Seriously?!';

    }

    }


    },





Run Game and Check for Errors
Press F12 to check console for any problems. Try moving Bob to assemble a pizza!



code on plnkr