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
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Collecting pop-up diamonds


In this task, we make the diamonds pop up from merchant buildings to let the player click on the diamonds and collect them in order to increase the diamond count.

Prepare for lift off

Before getting started with the steps of this task, we want to ensure that we have the following diamond sprite graphic files prepared and placed in the images folder:

Engage thrusters

In the following steps, we add the diamond animation to the stage and let the players click on it:

  1. We have a new display object so we will add the diamond sprite to the view-sprites.js file:

     (game.Diamond = function() {
      cjs.Container.call(this); // super
      var data = {
        framerate: 16,
        images: ['images/diamond-spritesheet.png'],
        frames: {width:90, height:90},
      };
      var spritesheet = new cjs.SpriteSheet(data);
      var diamondSprite = new cjs.Sprite(spritesheet);
      diamondSprite.gotoAndPlay(0);
      diamondSprite.scaleX = diamondSprite.scaleY = 0.5;
      this.addChild(diamondSprite);
    
      this.on('click...