We are grown up by playing games. Today this is the world of technologies such as Android, smart phones, the Internet, etc. So, there are very critical and complex games using various languages now-a-days played by many kids. But previously, over ten to fifteen years back, there were no such technologies and still there were games which were played in video games. Such games were very interesting in those days. They were not that complex. They were created in simple methods.
We have seen HTML5 and its elements and features are used to create websites. But it is also used to create some mini games. It takes very fewer lines of code. We are today going to check how to create a mini game which will be used in mobile phones, etc. Try to make it as a project and create an HTML5 game. It is really very interesting. This needs a code of HTML5 and a little of JavaScript.
To build this, we follow the following rules and steps.
First, that rectangular box should be created by using an HTML5 element called <canvas>. It is used for creating any game using HTML5. It provides all those functionalities required. For writing, drawing, insert images onto the webpage we use JavaScript. .getContext(“2d”) is the inbuilt object of the <canvas> element. It allows the game functions and properties. It also includes myGameArea as a function. Functions such as start(), pause(), stop() are also can be built.
You need to construct a component to add the other components on the game area. Frames need to be used for the game to be started or ready for action. Functions such as clear(), update() are used to clear the canvas and to add the component to the existing object. You need to change the positions of the components so that the object moves on the canvas. You can control the properties like color, height, width, position, display time, etc.
You need to design it in such a way that the components move by the use of keyboard functions, i.e., navigation buttons, up, down, left and right. You can even allow the mouse as a controller of the game. You can also make the game effective by creating the obstacles so that if the object hit the obstacle, the game is over. Multiple or single obstacles can be created by giving different properties such as size, color, direction, and speed.
You can also add the score component on the game which can be updated on each action on the game. Images can also be added as an object in the game by using getContext(“2d”) which has image methods and properties. Add and change different images using the src attribute in the image element. You can add the background images and make it move in a loop so that it looks like the component is moving from one location to the other.
<audio> element is used in HTML5 to add sounds and background music to the game. So in the game the object will be moving down, this is done due to gravity element, and it can be opposed by accelerating functions. Bouncing property is also designed so that whenever it hits the ground, it bounces back. You can also allow the object to rotate by using function rotate() and given with directions. You can also design the object to make turns and move around.
Using these steps, you can create simple HTML5 games. There are many such games created and still are being used.
You can follow the whole code to build this game here
