How to make a JavaScript game?

JavaScript allows us to do so many cool things, and creating a game is also one of them. Yes, apart from making our websites more attractive, beautiful, we can also use JavaScript to create several kinds of games.

So let's see how we can create a game using HTML and JavaScript.

To create the game, we will be going to use the HTML Canvas, so before going further, we need to understand the term HTML Canvas.

HTML Canvas

<Canvas> is one of the many types of HTML elements. It is basically used to draw graphics, on the fly, with the help of scripting languages (usually JavaScript). This element works as a container for graphics and draws real graphics on it, and you have to use a scripting language like JavaScript. A variety of methods/functions are also provided that can be used to draw paths and many types of images such as circles, boxes, etc., as well as to add images.

Canvas elements can be used for many other things. Some of them are given below:

1. It can be used to draw text.
2. It can be used to draw graphics.
3. It can be used to move the graphics like bounce a boll, to animate anything else.
4. It can provide interaction; for example, it can respond to several kinds of JavaScript events.

Let's see how we can create a canvas with help of an example:

Syntax for creating Canvas

Example

Output

We have created the gaming area using the canvas element. It is also best for creating HTML, JavaScript gaming applications because it provides almost all functionalities required to develop games.

.getContext("2d")

This is a built-in object of the <canvas> element known as the getContext ("2d") object that contains all the methods/functions and properties required to draw graphics in <canvas>.

Let's start developing our game by creating a play area and preparing for drawing

Step 1: Gaming area

To create the gaming area, we will use the Canvas element, as we already discussed above.

Program

Explanation of the given program

In the above program, we have created a function "startGame();" in which we later invoked the start() method of the mygameArea object. The method "start()" then creates a canvas and insert it into the body element as the first child node.

Output

Step 2: Game Component

In this step, we will make a component using a constructor that allows us to add that component to our gaming area.

The object constructor is known as "component" and we will make our first component with name " mygamecomponent:"

Let's understand how to create game component with help of following example:

Explanation of program

In the above program, we have created an object named "mygameComponent" to create our game component inside the body of "myGamestart();" function.

Output

Step 3: Frames

To add life to our game and make it ready for the action, we have to refresh/update the gaming area with a rate of 50 frames per second. For example, a movie has a refresh rate of at least 60 FPs.

So first of all, we have to create a function "updateMyGame()," and in the object of this function, we have to add an interval of time that will execute the function UpdateMyGame(); in every 20th milliseconds which is equal to 50 times per second. In addition, we also have to add the function called clear() for clearing the entire game area(or the whole canvas).

Inside the "component" constructor, we will call a function for handling the drawing the component, which known as the "Update()" function.

The UpdateMyGame(); function calls the clear();and update(); methods.

As a result of all the above work, our game component gets drawn on the canvas and cleared at the rate of 50 frames per second.

We can understand it with help of following example:

Program

Output

Step: 4 Adding Movement to component

In order to show that the blue rectangle is getting drawn 50 times in a second, we will change the "a" position( horizontal plan) by 1pixel each time the "updateGameArea()" function executes.

Change the Position

We can use the A and B coordinates to change the position or to position our game component in the gaming area.

Step 5: Creating Controls buttons

A game must have controls to play the game or to control the game component.

Here we will create two control buttons for controlling the movement of our rectangle box. We have to create several functions for each button.

We have to create to the new property in the component's constructor and call them speed A, speed B. We will use these following properties as the speed indicators.

We also have to add a new function called "newPos();" to the component's constructor that will use the speedA, speedB properties to move the component from one place to another place (or change the position) in the game area/canvas. The function newPos(); will be called from the body of the "updatemygame();" function just before the drawing the component.

Example

Output

Step 6: Creating some obstacles

As we know very well that any game is nothing if it not contains any difficulties/obstacles.

Let's see how we can create obstacles by creating a new component and adding it to the gaming area.

Example:

We can create as many constraints/obstacles as we want by adopting the procedure used above in the program.

Note: it is also essential to update all components (or obstacles) in every frame.

Output

Providing the movement to the obstacles

If there are obstacles in a game, but if they are static, no one would like to play that game.

To provide the movement to our obstacles, we have to change the property of the "myfirstObstacle.x" at every update.

Example:

What if you hit with the obstacle

As we all know that, in any game, if the user hits any obstacle, then the game is over.

To do this, we need to create a new method in the component's constructor, which will look for the collision of our blue box with other constraints (or any other component) from the beginning of the game. This method must be executed repeatedly each time a frame update is received (or we can say that this method should be called 50 times in a second). We will also have to add the stop(); method to the mygamearea's object that will clear the 20-millisecond interval.

Program

Output

Creating the obstacles of random size

To make our game a little more difficult and interesting, add random-sized obstacles so that the user moves the blue box continuously in different directions to avoid hitting the obstacles.

Program

Output

Step 7: Displaying User Score

For displaying the user's score, there are many different ways, but to keep this game as simple as possible, we will use one of the easiest methods.

In this method, we have to create a new variable first, e.g., "userscore" and also need to make another component for displaying the user score.

As we all know, writing any text on canvas is completely different from creating/drawing a box on the canvas. So it is necessary to invoke the component's constructor using the additional argument that will tell the constructor about the type of component, which is "text" type in this case.

In the component's constructor, we will test the type of the component e.g., if it the component of "text," and once we check the type of the component, we will use the method "fillText."

Finally, we will use the FrameNo property to count the score. To implement this, we have to modify some code of the "updateGameArea();" function that will use the FrameNo property and write the canvas score.

Program

Output

Note: You can also add many other features to this game to make it more attractive. For example, background images, sound effects, etc.