Game tutorial part 2

Posted on September 20, 2021

canvas javaScript game tutorial

Introduction

Hello everyone. Welcome back to another post in the series ‘Canvas Game Tutorial’. Read Part-1 of the tutorial first In this post we are going to cover:

An animation loop
Basic Collision Detection
Organising the code

Getting Started

Let's start right away by making a blank html file. Add a canvas element with an id of anything you like, I am gonna name it just ‘canvas’. Then add a script element in the body.

<!DOCTYPE html>
<html>
   <head>
    <title>Canvas Game Tutorial</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script></script>
  </body>
</html>

For simplicity’s sake I’ll be writing the script in the html file itself. But for better readability and maintainability it is recommended to create a seperate file for js and include it in the webpage with the src attribute of the script element. Setting up the Canvas First we will start off by getting the canvas, and creating a context for the canvas.

<script>
var canvas= document.getElementById("canvas");
var ctx = canvas.getContext("2d");
</script>

If you don't know how to do this then it's much better to read our first tutorial which covers how to setup canvas in detail. Part 1 Tutorial Then we will set the canvas’s height and width to the height and width of the Window respectively

<script>
var canvas= document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.height = innerHeight;
canvas.width = innerWidth;
</script>

Then we will create a ball object. This is going to be the object that we are going to animate in this webpage.

var ball = {
  x: 40,
  y: 30,
  radius: 25,
  vx: 0,
  vy: 0
}

Here we define an object ball. The x and y property defines the location of the ball in the canvas. The radius property defines the ball’s radius. The vx and vy stand for velocityX and velocityY respectively, this defines the speed of the ball or in other words how far the ball would move on each frame.

An animation loop

Now we are going to make an animation loop, this loop is going to run each frame and is what calculates the new position of the ball.
After we define the ball object we make a new function named update. Inside this function we will write all of our code that has to run each frame.

function update(){
// Code goes here
}

But at the beginning itself we call a function named ‘requestAnimationFrame’.
method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint. - Mozilla Docs from here

function update(){
  requestAnimationFrame(update);
}

This might be hard to understand at the moment. But don't worry, for now just imagine that requestAnimationFrame is what keeps the loop running. We need to pass this function, a callback function that needs to be ran every time, which is the update function.
Next on every frame we clear the canvas. We are clearing everything from 0,0 to the width,height of the canvas.

function update(){
  requestAnimationFrame(update)
  ctx.clearRect(0,0, canvas.width, canvas.height);
}
update();

And here we have completed the Animation Loop. But it doesn't do anything right. To start the loop, we also need to call the update function once. At the end of the script, after the update function is initialized, call the update update function.

Drawing the ball

Now we are going back to the ball. In the ball object we have to add two new methods, named update and draw. These functions are going to be called every frame in order to update and draw the ball to the canvas. Your ball object now might look like:

var ball = {
  x: 40,
  y: 30,
  radius: 25,
  vx: 0,
  vy: 0,
  update: function() { },
  draw: function() { }
}

In the draw function we are going to do everything that is required to draw a circle. The code is:

draw: function() {
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
  ctx.stroke();
  ctx.fillStyle="lightblue";
  ctx.fill();
}

The first line in the function calls the beginPath method, which has to be called before making a circle, path, etc. . Then ctx.arc() draws a circle at this.x and this.y with the radius this.r.
The next two parameters are the StartAngle and EndAngle.The start angle means the angle from where the circle should start drawing, currently it starts from 0. The end angle means the angle it needs to stop drawing, we have passed it with PI * 2. This is a bit tricky math to understand, for now it's much better just to know this is required.
The arc method actually has one more parameter named ‘counterclockwise’, this is by default false. If it's true the circle is drawn counterclockwise.
But just by doing this nothing would appear on the screen, because we haven't told the browser to draw this in the screen. To do this next we have to call the function stroke or fill. If we call the stroke function it would show an outline for the circle, if we call the fill function the circle would have a solid background color.
Changing the fillStyle property will change the solid background color of the circle. That's all for the draw function.
We also need to call the draw function in the update function so that the ball is drawn every frame.

function update(){
  requestAnimationFrame(update)
  ctx.clearRect(0,0, canvas.width, canvas.height);
  // Call draw method of ball object
  ball.draw();
}

Now on every frame the canvas is cleared then the new ball is drawn to the screen.

Updating and Moving the ball

The ball is just sitting at that location itself. We need to move it right. So now we will write the code for the update method of the ball object.
Do you remember creating the vx and vy properties for the ball object? Those variables are coming into use now. Every frame we are going to add these variables with the x and y of the ball. The code goes like:

update: function() {
  this.x += this.vx;
  this.y += this.vy;
},

Also remember to call this in the main update function, so this method is called every frame. Call ball.update() before calling ball.draw() in the main animation loop. Does the ball move now? No, not yet..
Because the vx and vy properties are set to 0. Therefore every frame the ball moves 0 pixels. Now change the ‘vx’ property to 4.
The code we changed is:

var ball = {
  . . .
  vx: 4,
  vy: 0,
  . . .
  update: function() {
    this.x += this.vx;
    this.y += this.vy;
  }
}

. . .

function update(){
  requestAnimationFrame(update);
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ball.update();
  ball.draw();
}

Yeah… We did it! The ball moves horizontally.
If we were to change the vy property to some number, the ball will move vertically too.

Basic Collision System

But wait. The ball just moves endlessly. It doesn't stop when it reaches the end. This is where a collision system comes to save our life. The collision system we are going to build will tell us if the ball is going out of the screen. If yes, then it will change the velocity of the ball, and bring it back to the screen.
Change the update function to:

update: function() {
  if(this.x - this.radius < 0 || this.x + this.radius > canvas.width){
    this.vx = -1;
  }
  if(this.y - this.radius < 0 || this.y + this.radius > canvas.height){
    this.vy = -1;
  }
  this.x += this.vx;
  this.y += this.vy;
},

Here it checks if the ball’s x minus its radius (The ball's left point) is less than 0. Which means the ball has moved out of the screen to the left side. It also checks if the ball’s x plus its radius (The ball’s right point) is greater than the canvas’s width.
If any of this condition is true, then the ball's x velocity is multiplied with -1. Multiplying it with -1 will flip the numbers sign. (If the vx is negative it becomes positive, if it was positive it becomes negative). The same applies for the velocity Y.
It checks if the ball’s y minus its radius (The ball's top point) is less than 0. Which means the ball has moved out of the screen to the top side. It also checks if the ball’s y plus its radius (The ball’s bottom point) is greater than the canvas’s height.
If any of this condition is true, then the ball's x velocity is multiplied with -1. Multiplying it with -1 will flip the numbers sign. (If the vy is negative it becomes positive, if it was positive it becomes negative).

Output

Here is the example ( also in code comments)

Example code


    <!DOCTYPE html>
<html>
  <head>
    <title>Canvas Game Tutorial</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        canvas.height = innerHeight;
        canvas.width = innerWidth;

        var ball = {
            x:40,
            y:30,
            radius: 25,
            vx: 1,
            vy: 1,
            update: function() {
                if(this.x - this.radius < 0 || this.x + this.radius > canvas.width){
                    this.vx *= -1;  
                }
                if(this.y - this.radius < 0 || this.y + this.radius > canvas.height){
                    this.vy *= -1;
                }
                this.x += this.vx;
                this.y += this.vy;
            },

            draw: function(){
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.stroke();
                ctx.fillStyle = "lightblue";
                ctx.fill();
            }
        }

        function update(){
            requestAnimationFrame(update);
            ctx.clearRect(0,0,canvas.width,canvas.height);

            ball.update();
            ball.draw();
        }
        update();
    </script>
  </body>
</html>

Contents

Game Dev tutorial - part 2