O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:
    game.cash = 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 = '$' + game.cash;
    }
  3. We ensure that the cash DOM node shows the cash correctly by refreshing it when the game starts:
    game.view.refreshCash();
  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'] ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required