van an nguyen

Animating multiple objects (enemies, obstacles, etc.)

Animating multiple objects

Introduction

In this section we will see how we can animate and control not only the player but also other objects on the screen.

Let’s study a simple example: animating a few balls and detecting collisions with the surrounding walls. For the sake of simplicity, we will not use time-based animation in the first examples.

animating multiple balls which bounce off horizontal and vertical walls

Online example at JSBin:

Some circular balls that bounce agains vertical and horizontal borders of the canvas

In this example, we define a constructor function for creating balls. This is a way to design JavaScript “pseudo classes” as found in other object-oriented languages like Java, C# etc. It’s useful when you plan to create many objects of the same class. Using this we could animate hundreds of balls on the screen.

Each ball has an x and y position, and in this example, instead of working with angles, we defined two “speeds” – horizontal and vertical speeds – in the form of the increments we will add to the x and y positions at each frame of animation. We also added a variable for adjusting the size of the balls: the radius.

Here is the constructor function for building balls:

  1. // Constructor function for balls
  2. function Ball(x, y, vx, vy, diameter) {
  3.   // property of each ball: a x and y position, speeds, radius
  4.   this.x = x;
  5.   this.y = y;
  6.   this.vx = vx;
  7.   this.vy = vy;
  8.   this.radius = diameter/2;
  10.   // methods
  11.   this.draw = function() {
  12.     ctx.beginPath();
  13.     ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
  14.     ctx.fill();
  15.   };
  17.   this.move = function() {
  18.     // add horizontal increment to the x pos
  19.     // add vertical increment to the y pos
  20.     this.x += this.vx;
  21.     this.y += this.vy;
  22.  };
  23. }

Using a constructor function makes it easy to build new balls as follows:

  1. var b1 = new Ball(10, 10, 2, 2, 5); // x, y, vx, vy, radius
  2. var b1 = new Ball(100, 130, 4, 5, 5); 
  3. etc…

We defined two methods in the constructor function for moving the ball and for drawing the ball as a black filled circle. Here is the syntax for moving and drawing a ball:

  1. b1.draw();
  2. b1.move();

We will call these methods from inside the mainLoop, and as you’ll see, we will create many balls. This object-oriented design makes it easier to handle large quantities.

Here is the rest of the code from this example:

  1. var canvas, ctx, width, height;
  3. // array of balls to animate
  4. var ballArray = [];
  6. function init() {
  7.   canvas = document.querySelector(“#myCanvas”);
  8.   ctx = canvas.getContext(‘2d’);
  9.   width = canvas.width;
  10.   height = canvas.height;
  12.   // try to change this number
  13.   createBalls(16);
  15.   requestAnimationFrame(mainLoop);
  16. }
  18. function createBalls(numberOfBalls) {
  19.   for(var i=0; i < numberOfBalls; i++) {
  21.     // Create a ball with random position and speed.
  22.     // You can change the radius
  23.     var ball = new Ball(width*Math.random(),
  24.                         height*Math.random(),
  25.                         (10*Math.random())-5,
  26.                         (10*Math.random())-5,
  27.                         30);
  29.     // add the ball to the array
  30.     ballArray[i] = ball;
  31.    }
  32. }
  34. function mainLoop() {
  35.   // clear the canvas
  36.   ctx.clearRect(0, 0, width, height);
  38.   // for each ball in the array
  39.   for(var i=0; i < ballArray.length; i++) {
  40.     var ball = ballArray[i]; 
  42.     // 1) move the ball
  43.     ball.move();
  45.     // 2) test if the ball collides with a wall
  46.     testCollisionWithWalls(ball);
  48.     // 3) draw the ball
  49.     ball.draw();
  50.   }
  51.   // ask for a new frame of animation at 60f/s
  52.   window.requestAnimationFrame(mainLoop);
  53. }
  55. function testCollisionWithWalls(ball) {
  56.   // left
  57.   if (ball.x < ball.radius) { // x and y of the ball are at the center of the circle
  58.     ball.x = ball.radius;     // if collision, we replace the ball at a position
  59.     ball.vx *= –1;            // where it’s exactly in contact with the left border
  60.   }                           // and we reverse the horizontal speed
  61.   // right
  62.   if (ball.x > width – (ball.radius)) {
  63.     ball.x = width – (ball.radius);
  64.     ball.vx *= –1;
  65.   }
  66.   // up
  67.   if (ball.y < ball.radius) {
  68.     ball.y = ball.radius;
  69.     ball.vy *= –1;
  70.   }
  71.   // down
  72.   if (ball.y > height – (ball.radius)) {
  73.     ball.y = height – (ball.radius);
  74.     ball.vy *= –1;
  75.   }
  76. }

Notice that:

    • All the balls are stored in an array (line 4),
    • We wrote a createBalls(nb) function that creates a given number of balls (and stores them in the array) with random values for position and speed (lines 18-32)
    • In the mainLoop, we iterate on the array of balls and for each ball we: 1) move it, 2) test if it collides with the boundaries of the canvas (in the function testCollisionWithWalls), and 3) we draw the balls (lines 38-50). The order of these steps is not critical and may be changed.
    • The function that tests collisions is straightforward (lines 55-76).  We did not use “if… else if” since a ball may sometimes touch two walls at once (in the corners). In that rare case, we need to invert both the horizontal and vertical speeds. When a ball collides with a wall, we need to replace it in a position where it is no longer against the wall (otherwise it will collide again during the next animation loop execution).

similar example but with the ball direction as an angle, and a single velocity variable

Try this example at JSBin: it behaves in the same way as the previous example.

Note that we just changed the way we designed the balls and computed the angles after they rebound from the walls. The changes are highlighted in bold:

  1. var canvas, ctx, width, height;
  3. // Array of balls to animate
  4. var ballArray = [];
  6. function init() {
  7.   …
  8. }
  10. function createBalls(numberOfBalls) {
  11.   for(var i=0; i < numberOfBalls; i++) {
  13.     // Create a ball with random position and speed.
  14.     // You can change the radius
  15.     var ball = new Ball(width*Math.random(),
  16.                         height*Math.random(),
  17.               (2*Math.PI)*Math.random(), // angle
  18.               (10*Math.random())-5,      // speed
  19.                         30);
  21.    // We add it in an array
  22.    ballArray[i] = ball;
  23.   }
  24. }
  26. function mainLoop() {
  27.   …
  28. }
  30. function testCollisionWithWalls(ball) {
  31.   // left
  32.   if (ball.x < ball.radius) {
  33.      ball.x = ball.radius;
  34.      ball.angle = –ball.angle + Math.PI;
  35.   }
  36.   // right
  37.   if (ball.x > width – (ball.radius)) {
  38.     ball.x = width – (ball.radius);
  39.     ball.angle = –ball.angle + Math.PI;
  40.   }
  41.   // up
  42.   if (ball.y < ball.radius) {
  43.     ball.y = ball.radius;
  44.     ball.angle = –ball.angle;
  45.   }
  46.   // down
  47.   if (ball.y > height – (ball.radius)) {
  48.     ball.y = height – (ball.radius);
  49.     ball.angle =-ball.angle;
  50.   }
  51. }
  53. // constructor function for balls
  54. function Ball(x, y, angle, v, diameter) {
  55.   this.x = x;
  56.   this.y = y;
  57.   this.angle = angle;
  58.   this.v = v;
  59.   this.radius = diameter/2;
  61.   this.draw = function() {
  62.    …
  63.   };
  65.   this.move = function() {
  66.    // add horizontal increment to the x pos
  67.    // add vertical increment to the y pos
  69.    this.x += this.v * Math.cos(this.angle);
  70.    this.y += this.v * Math.sin(this.angle);
  71.   };
  72. }

Using angles or horizontal and vertical increments is equivalent. However, one method might be preferable to the other: for example, to control an object that follows the mouse, or that tracks another object in order to attack it, angles would be more practical input to the computations required.

Leave a comment