Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

Refilling sushi ingredients

In this task, we will control the ingredients' amounts and refill. We will also introduce a currency.

Engage thrusters

In these steps, we will polish the game with a cash mechanism:

  1. We store the cash value in the data.js file: = 1000;
  2. In the view.js file, we define a corresponding refresh method:

    var cashNode = document.getElementById('status-bar');
    game.view.refreshCash = function(){
      cashNode.textContent = '$' +;
  3. We ensure that the cash DOM node shows the cash correctly by refreshing it when the game starts:

  4. In the data.js file, we define how many pieces of each ingredient need to be set up. Initially, the number is set to 10:

    game.amount = [];
    game.amount['rice'] = 10;
    game.amount['octopus'] = 10;
    game.amount['salmon'] = 10;
    game.amount['salmon-roe'] = 10;
    game.amount['seaweed'] = 10;
    game.amount['egg'] = 10;
  5. We add a method to increase the amount of total ingredients:

    game.increaseAmount = function() {
      for(var key in game...