Creating a Sushi Shop Game with Device Scaling - HTML5 Game Development - page 321

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. Iniially, 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.amount) {
if (game.amount.hasOwnProperty(key)) {
game.amount[key] += 10;
game.view.refreshAmount(key);
}
}
};
6. We also need the following logic to refresh the user interface for an
ingredient's amount:
// individual ingredient node.
var ingredientsNode = document.getElementById('ingredients');
game.view.refreshAmount = function(type) {
ingredientsNode.querySelector(".ingredient[data-type=
"+ type +"]").textContent = game.amount[type];
};
7. Then, we register the click event for the phone buton. It reduces the cash and
increases the ingredients' stock:
// phone call to refill ingredients
var phoneBtn = document.getElementById('phone');
phoneBtn.onclick = function() {
var needCash = 600;
if (game.cash>= needCash) {
game.increaseAmount();