Virtual Pet (Part 2)

 

Step 1: Create a folder named 'js' and create a file 'Food.js' inside it.

Step 2: Create a class inside Food.js and preload the image of Milk Bottle inside constructor(). Download all the images here.

                

Step 3: Create a variable foodStock and assign its value to 0. This variable will store the amount of Food present in database.

Step 4: Create two functions: getFoodStock() and updateFoodStock(). getFoodStock() will tell the amount of foodStock and updateFoodStock() will update the foodStock().

Step 5: Now, display the image of Milk Bottle inside display() function.

Step 6: Now, add the Food.js inside index.html using script tag.

Step 7: In sketch.js, create a variable food for Food class.

Step 8: Remove the text and up arrow key which is created previously.

Step 9: Now display the food.

Step 10: Increase the width of canvas from 500 to 1000 and change the x position of dog from 250 to 900.

Step 11: Now, create two variables for button. One for Add Food and other for Feed Food.

Step 12: After that, create two buttons and position them. Name the first button Add Food and second button Feed Food.

Step 13: Create two variables to store last feed time.

Step 14: In draw() function, refer the database and take the value of last feed time and store it in a variable.

Step 15: Come to database and create a child class named Feed Time and assign its value to 0 for now.

Step 16: Create two functions. One for adding food and other for feeding food and storing time. To store time, we will use 'hour()' function. This function takes value from your device. We also change image of dog when we feed him.

Step 17: Call the AddFood() function when addFood button is pressed and FeedFood() function when feed button is pressed.

Step 18: To update foodStock in Food.js, use 'food.updateFood(foodS)' inside readStock() function in sketch.js.

Step 19: In display() function of Food.js, write conditions to show the bottles.

Step 20: Now, to change the column after a number of bottles, suppose after 12 bottles, write the following condition inside for loop.

Step 21: Now, in sketch.js, again change the image of dog when Add Food button is pressed.

Step 22: When you feed the dog after the number of bottles become 0, the number of bottles goes in negative. To stop this, write an if condition inside FeedFood() function so that when the food will be 0, you will not able to feed dogs.

Part 2 is completed here.

Video: