Game Introduction

The HTML canvas element was introduced in HTML5 and it displays as a rectangular object on the web page. The default width and height of the canvas is 300 and 150 pixels respectively. We can change its height and width by simply specifying the width and height attributes.

An analogy

HTML <canvas> element is like the canvas of a painter 👩‍🎨. As the painter plays with colors on the canvas, HTML canvas provides users an area to draw and play with JavaScript. It can be used to draw graphics on the fly, add images and create animations.

Some perks

They are:

• fast
• interactive
• work across multiple browsers.

canvas games

It is not only used for graphics or 2D and 3D animations, it can also be used to create 2D games.

🤔 Is this even possible to make a game in HTML and JavaScript??

The answer is yes, we can create cool 2D games in HTML canvas.

So, let’s just brush up our JavaScript and make a 2D game in HTML canvas.

📝Note: Html canvas just provides a container, JavaScript is used to build or draw anything in that container.

By the end of this course, you will know how to make a game using JavaScript in HTML canvas.

Let’s have fun. Use arrow keys(up, down, left, and right) to move the player. Be careful of the virus and don’t forget to get the key for opening the door of the home.

In the next lessons, we will learn how to create this game in the step by step process as shown in the slideshow given below.