Latest web development tutorials
 

HTML Game Components


Add a red square onto the game area:


Add a Component

Make a component constructor, which lets you add components onto the gamearea.

The object constructor is called component, and we make our first component, called myGamePiece:

Example

var myGamePiece;

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red", 10, 120);
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
}

Try it Yourself »

The components have properties and methods to control their appearances and movements.


Frames

To make the game ready for action, we will update the display 50 times per second, which is much like frames in a movie.

First, create a new function called updateGameArea().

In the myGameArea object, add an interval which will run the updateGameArea() function every 20th millisecond (50 times per second). Also add a function called clear(), that clears the entire canvas.

In the component constructor, add a function called update(), to handle the drawing of the component.

The updateGameArea() function calls the clear() and the update() method.

The result is that the component is drawn and cleared 50 times per second:

Example

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.update = function(){
        ctx = myGameArea.context;
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.update();
}
Try it Yourself »

Make it Move

To prove that the red square is being drawn 50 times per second, we will change the x position (horizontal) by one pixel every time we update the game area:

Example

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.x += 1;
   
myGamePiece.update();
}
Try it Yourself »

Why Clear The Game Area?

It might seem unnecessary to clear the game area at every update. However, if we leave out the clear() method, all movements of the component will leave a trail of where it was positioned in the last frame:

Example

function updateGameArea() {
    //myGameArea.clear();
    myGamePiece.x += 1;
   
myGamePiece.update();
}
Try it Yourself »

Change the Size

You can control the width and height of the component:

Example

Create a 10x140 pixels rectangle:

function startGame() {
    myGameArea.start();
    myGamePiece = new component(10, 140, "red", 10, 120);
}
Try it Yourself »

Change the Color

You can control the color of the component:

Example

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "blue", 10, 120);
}
Try it Yourself »

You can also use other colorvalues like hex, rgb, or rgba:

Example

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Try it Yourself »

Change the Position

We use x- and y-coordinates to position components onto the game area.

The upper-left corner of the canvas has the coordinates (0,0)

Mouse over the game area below to see its x and y coordinates:

X
Y

You can position the components wherever you like on the game area:

Example

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "red", 2, 2);
}
Try it Yourself »

Many Components

You can put as many components as you like on the game area:

Example

var redGamePiece, blueGamePiece, yellowGamePiece;

function startGame() {
    redGamePiece = new component(75, 75, "red", 10, 10);
    yellowGamePiece = new component(75, 75, "yellow", 50, 60);
    blueGamePiece = new component(75, 75, "blue", 10, 110);
   
myGameArea.start();
}

function updateGameArea() {
    myGameArea.clear();
    redGamePiece.update();
    yellowGamePiece.update();
    blueGamePiece.update();
}
Try it Yourself »

Moving Components

Make all three components move in different directions:

Example

function updateGameArea() {
    myGameArea.clear();
    redGamePiece.x += 1;
    yellowGamePiece.x += 1;
    yellowGamePiece.y += 1;
    blueGamePiece.x += 1;
    blueGamePiece.y -= 1;
    redGamePiece.update();
    yellowGamePiece.update();
    blueGamePiece.update();
}
Try it Yourself »