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.
Let's see how we can create a canvas with help of an example:
Syntax for creating Canvas
This is a built-in object of theelement known as the getContext ("2d") object that contains all the methods/functions and properties required to draw graphics in .
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
OutputNote: You can also add many other features to this game to make it more attractive. For example, background images, sound effects, etc.