Time for action – putting the circle drawing code into a function

Let's make a function to draw the circle and then draw some circles in the Canvas. We are going to put code in different files to make the code simpler:

1. Open the untangle.drawing.js file in our code editor and put in the following code:

   if (untangleGame === undefined) {
     var untangleGame = {};
   }
   
   untangleGame.drawCircle = function(x, y, radius) {
     var ctx = untangleGame.ctx;
     ctx.fillStyle = "GOLD";
     ctx.beginPath();
     ctx.arc(x, y, radius, 0, Math.PI*2, true);
     ctx.closePath();
     ctx.fill();
   };

2. Open the untangle.data.js file and put the following code into it:

   if (untangleGame === undefined) {
     var untangleGame = {};
   }
   
   untangleGame.createRandomCircles = function(width, height) {
     // randomly draw 5 circles
     var circlesCount = 5;
     var circleRadius = 10;
     for (var i=0;i<circlesCount;i++) {
       var x = Math.random()*width;
       var y = Math.random()*height;
       untangleGame.drawCircle(x, y, circleRadius);
     }
   };

3. Then open the untangle.js file. Replace the original code in the JavaScript file with the following code:

   if (untangleGame === undefined) {
     var untangleGame = {};
   }
   
   // Entry point
   $(document).ready(function(){
     var canvas = document.getElementById("game");
     untangleGame.ctx = canvas.getContext("2d");
   
     var width = canvas.width;
     var height = canvas.height;
   
     untangleGame.createRandomCircles(width, height);
   
   }); 

4. Open the HTML file in the web browser to see the result:
   

What just happened?

The code of drawing circles is executed after the page is loaded and ready. We used a loop to draw several circles in random places in the Canvas.

Dividing code into files

We are putting the code into different files. Currently, there are the untangle.js, untangle.drawing.js, and untangle.data.js files. The untangle.js is the entry point of the game. Then we put logic that is related to the context drawing into untangle.drawing.js and logic that's related to data manipulation into the untangle.data.js file.

We use the untangleGame object as the global object that's being accessed across all the files. At the beginning of each JavaScript file, we have the following code to create this object if it does not exist:

if (untangleGame === undefined) {
  var untangleGame = {};
}

Generating random numbers in JavaScript

In game development, we often use random functions. We may want to randomly summon a monster for the player to fight, we may want to randomly drop a reward when the player makes progress, and we may want a random number to be the result of rolling a dice. In this code, we place the circles randomly in the Canvas.

To generate a random number in JavaScript, we use the Math.random() function. There is no argument in the random function. It always returns a floating number between 0 and 1. The number is equal or bigger than 0 and smaller than 1. There are two common ways to use the random function. One way is to generate random numbers within a given range. The other way is generating a true or false value.

Saving the circle position

When we are developing a DOM-based game, such as the games we built in previous chapters, we often put the game objects into DIV elements and accessed them later in code logic. It is a different story in the Canvas-based game development.

In order to access our game objects after they are drawn in the Canvas, we need to remember their states ourselves. Let's say now we want to know how many circles are drawn and where they are, and we will need an array to store their position.