Book Image

HTML5 Game Development by Example: Beginner's Guide

By : Seng Hin Mak
Book Image

HTML5 Game Development by Example: Beginner's Guide

By: Seng Hin Mak

Overview of this book

Table of Contents (18 chapters)
HTML5 Game Development by Example Beginner's Guide Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
9
Building a Physics Car Game with Box2D and Canvas
Index

Time for action – saving the circle position


  1. Open the untangle.data.js file in the text editor.

  2. Add the following circle object definition code in the JavaScript file:

    untangleGame.Circle = function(x,y,radius){
      this.x = x;
      this.y = y;
      this.radius = radius;
    }
  3. Now we need an array to store the circles' positions. Add a new array to the untangleGame object:

    untangleGame.circles = [];
  4. While drawing every circle in the Canvas, we save the position of the circle in the circles array. Add the following line before calling the drawCircle function, inside the createRandomCircles function:

    untangleGame.circles.push(new untangleGame.Circle(x,y,circleRadius));
  5. After the steps, we should have the following code in the untangle.data.js file:

    if (untangleGame === undefined) {
      var untangleGame = {};
    }
    
    untangleGame.circles = [];
    
    untangleGame.Circle = function(x,y,radius){
      this.x = x;
      this.y = y;
      this.radius = radius;
    };
    
    untangleGame.createRandomCircles = function(width, height) {
      // randomly...