Top Chef Bob - Part 03 - Make Ingredients rain down on Bob!

Part 03 of the Top Chef Bob food simulator game is to:
1) Create objects of all our main Ingredients
2) Randomly display our Ingredients on the top of the screen so it can fall towards Bob.

Create Ingredients
In the "playlevel1.js" file, add the line below to the end of the CREATE function.
This code will call a function which will create objects for each of our food items and then call another function to add their pictures.

    this.createIngredients();


        

Create food objects
In the "playlevel1.js" file, add the following function after the CREATE function.
This function will create an object for each of our food ingredients and call another function to populate it with pictures.

    createIngredients: function() {

    // number of ingridents each group can hold
    this.NUMBER_OF_INGREDIENT_SPRITES = 5;

    // scale of our images (1=100% actual size, .5=50% of original size)
    this.SPRITE_SCALE = .5;


    // DOUGH
    // create an object to store information about our ingredient
    this.foodDough = {
    group: game.add.group(),
    picture: game.bmpPizzaDough,
    releaseTime: 0,
    numberSprites: this.NUMBER_OF_INGREDIENT_SPRITES,
    spriteScale: this.SPRITE_SCALE
    };
    // fill up the group in our food object with sprites of our ingredient
    this.fillUpGroup(this.foodDough);


    // CHEESE
    // create an object to store information about our ingredient
    this.foodCheese = {
    group: game.add.group(),
    picture: game.bmpCheese,
    releaseTime: 0,
    numberSprites: this.NUMBER_OF_INGREDIENT_SPRITES,
    spriteScale: this.SPRITE_SCALE
    };
    // fill up the group in our food object with sprites of our ingredient
    this.fillUpGroup(this.foodCheese);


    // PEPPERONI
    // create an object to store information about our ingredient
    this.foodPepperoni = {
    group: game.add.group(),
    picture: game.bmpPepperoni,
    releaseTime: 0,
    numberSprites: this.NUMBER_OF_INGREDIENT_SPRITES,
    spriteScale: this.SPRITE_SCALE
    };
    // fill up the group in our food object with sprites of our ingredient
    this.fillUpGroup(this.foodPepperoni);



    // OLIVES
    // create an object to store information about our ingredient
    this.foodOlive = {
    group: game.add.group(),
    picture: game.bmpOlive,
    releaseTime: 0,
    numberSprites: this.NUMBER_OF_INGREDIENT_SPRITES,
    spriteScale: this.SPRITE_SCALE
    };
    // fill up the group in our food object with sprites of our ingredient
    this.fillUpGroup(this.foodOlive);


    },

Add pictures of our food
In the "playlevel1js" file, add the following function after the CREATE function.
Each food group will need at least five pictures (sprites) of the food. We will use these later in the game to randomly show pictures of this food item on the screen.

    fillUpGroup: function(parameterFoodObject) {
    // description: this function takes a food object and adds sprites to it

    // create a loop to add individual sprite objects to our group
    for (var i = 0; i < parameterFoodObject.numberSprites; i++) {

        // create a single sprite object
        var sprite = this.game.add.sprite(0, 0, parameterFoodObject.picture);

        // move the sprites anchor from corner to middle of sprite
        sprite.anchor.setTo(0.5, 0.5);

        // change size of sprite
        sprite.scale.setTo(parameterFoodObject.spriteScale, parameterFoodObject.spriteScale);

        // Enable physics on the sprite object
        this.game.physics.enable(sprite, Phaser.Physics.ARCADE);

        // Set its initial state to "dead", so it's invisible until we use it.
        sprite.kill();

        // add individiual sprite object to our group
        parameterFoodObject.group.add(sprite);

        }

    },

Display food on screen
In the "playlevel1.js" file, add this code to the end of the UPDATE function.
This code will call our displayIngredient function which will add our food sprites to the screen.

    this.displayIngredient(this.foodDough);
    this.displayIngredient(this.foodCheese);
    this.displayIngredient(this.foodPepperoni);
    this.displayIngredient(this.foodOlive);

Food is raining down
In the "playlevel1.js" file, add this function after the UPDATE function.
This function adds a picture of our Ingredient to a random location on the top of the screen.

    displayIngredient: function(parameterFoodObject) {
    // description: this function takes a food object and
    // displays it's sprites randomly on the screen


    // what is the current game time?
    var currentTime = this.game.time.totalElapsedSeconds();

    // is it time to release sprite?
    if (currentTime < parameterFoodObject.releaseTime) {

    // not time to release object, so don't do anything
    return;
    }

    // it's time to release a new sprite

    // get a dead sprite object from our group of objects
    var sprite = parameterFoodObject.group.getFirstDead();

    // if there is no dead objects available, then don't do anything
    if (sprite  === null || sprite === undefined) return;

    // revive dead sprite object
    sprite.revive();

    // kill the sprite object if she leaves the world
    sprite.checkWorldBounds = true;
    sprite.outOfBoundsKill = true;

    // !! set the position where the sprite will appear !!
    // get a random number for our x axis
    var randomNumber = game.rnd.integerInRange(game.world.width / 3, game.world.width);
    sprite.reset(randomNumber, 10);

    // make truck move across the screen at a fixed velocity
    sprite.body.velocity.y = 200;
    sprite.body.velocity.x = 0;


    // set the next time we will release sprite (gametime in seconds)
    parameterFoodObject.releaseTime =  currentTime + game.rnd.integerInRange(1,3);


    },

Run Game and Check for Errors
Press F12 to check console for any problems. You should see food raining down on Bob. In our next tutorials, we'll have Bob catch the food and work on completing an order.

code on plnkr