JS: Game Components

Learn how to add game components on the canvas.

We'll cover the following

The <canvas> element has a getContext("2d") built-in object to access its drawing and functionalities.

var ctx = canvas.getContext('2d');

We will use this object to draw or place components on the canvas. Let’s start by creating the component objects of the game.

Add a component

We have to add multiple components to the canvas, so creating a component constructor will be a nice approach.

function component(w,h,color,x,y){
  this.w=w;
  this.h=h;
  this.x=x;
  this.y=y;
  ctx.beginPath();
  ctx.fillStyle=color;
  ctx.fillRect(this.x, this.y, this.w, this.h);
  ctx.closePath();
}

Explanation

  • w specifies for the object’s width, h for height, x and y are coordinates that give the object’s position inside the canvas container.

  • The beginPath() method begins the new path or resets the current path while the closePath() method closes the path from the starting point to the endpoint.

  • fillRect() draws a filled rectangle starting from x and y and ending at x+w and y+h.

  • The rectangle can be filled with some color, or gradient, or some image. For that, we need to set the fillStyle property. Here, we fill our object component with the color parameter at line 7.

Using this constructor, we can build as many components as possible and place them at different positions by passing different values for w, h, x, and y.

Door and key components

We also have two different components in the game:

  1. door
  2. key

The door will only be opened when the player has acquired the key. Hence, the door and key components have some additional functionalities as well. Upon getting the key, the door opens to allow the player to enter and reach the end.

We will make separate functions for both and try to implement those functionalities inside the function. These functions will be updated after the creation of the player character to complete their functionalities.

count=0;
doorpermission=0;
function keycomponent(w,h,x,y){
  this.w=w;
  this.h=h;
  this.x=x;
  this.y=y;
  this.update= function(){
    if(count==0){
      ctx.beginPath();
      var grd = ctx.createRadialGradient(75, 50, 50, 90, 60, 100);
      grd.addColorStop(0, "red");
      grd.addColorStop(1, "#A04000");
      ctx.fillStyle = "#7B241C";
      ctx.fillRect(this.x, this.y, this.w, this.h);
      ctx.closePath();
    }
  }
}
//function to draw door component that will act as home
function doorcomponent(w,h,color,x,y){
  this.w=w;
  this.h=h;
  this.x=x;
  this.y=y;
  this.update= function(){ 
    ctx.beginPath();
    ctx.fillStyle=color;
    ctx.fillRect(this.x, this.y, this.w, this.h);
    ctx.closePath();
    if(doorpermission==0){ 
      ctx.beginPath();
      ctx.fillStyle="black";
      ctx.arc(50, 70,5, 10, 0, 2 * Math.PI);
      ctx.fill();
      ctx.closePath();
    }
  }
}

We have defined two new variables, count and doorpermission. doorpermission will be used to show and hide the knob component and count for displaying or hiding key component.

So, let’s start placing our other components. We will add a new function, drawground(), in which we’ll instantiate all the new objects.

Painting the canvas

Let’s start painting the canvas. First, we add two ground elements of soil and grass color at line 3 and line 4 respectively, as given in the code snippet below. Then we are adding stairs like obstacles of midnight color on the ground in lines 5-6. Multiple obstacles in the air are placed at specific positions. The color code of all obstacles is the same.

//draw all the objects inside of canvas 
function drawGround(x, y) {
  ground1 = new component( 600, 150, '#684027',x, y);
  ground2 = new component( 600, 20, 'green', x, y);
  obsground1 = new component( 500,40, "#212F3C",100, 360);
  obsground2 = new component(450, 80,"#212F3C", 150,320);
  obsground3 =new component(400,40,"#212F3C",200,280);
  obsair1=new component(50,30, "#212F3C",480, 200);
  obsair2=new component(50,30, "#212F3C",400, 160);
  obsair3a=new component(50,30, "#212F3C",320,120);
  obsair3b=new component(70,40, "#212F3C",540,120);
  obsair3c=new component(50,30, "#212F3C",120,150);
  obsair4=new component(50,30, "#212F3C",210, 90);
  obsair5 = new component(50,30, "#212F3C",60,100);
  ramp= new component(60,10,"#5BB2CE",0,100);
  worm= new component(40,20,"red", 290,260);
  house = new component(50,40,"#CD5C5C",5,360);
  door = new doorcomponent(60,60, "#CA6F1E",0,40); 
  key = new keycomponent(15,15,560,90);
  
  door.update();  
  key.update(); 
}

We created three ground obstacles and few air obstacles. The worm component we created at line 16 is of red color as red is a bright color and easy to differentiate.

📝 Note: key and door components have updates method; we need to call them after creating these objects.

Progress till now

Let’s combine all the code snippets given above and place them together in a JavaScript file to see the output of our efforts we have made till now.