Creating a classic game using HTML & Javascript – Part 1 (Hindi/Urdu)

Creating a classic game using HTML & Javascript – Part 1 (Hindi/Urdu)


Hello everyone I received a lot of requests related to HTML and javascript. So in this series we will create a classic game using HTML5 and javascript. And this is a game that you’ve already played, most likely on at least one device So.. let’s start! First of all, you can find the slides on this link. And.. this is kind of a workshop that I gave at one of the ngGirls events. So we will study this in detail.. that how this game actually works.. and how this game is built. Now, what are the rules of this series? First of all, you can find the code on this Github link. So you can clone this After that, whatever step we’re going to be on.. we’ll do a checkout for that. Meaning we’ll checkout the branch for the step. And there’s a different branch for each step. After that, we’ll open our index.html in the browser. And finally, whatever code is commented.. we will uncomment that And then we’ll refresh the browser to see what changed Finally, when we’ll have to switch to the next branch… we’ll first do “git checkout .” Because if we already have changes in our branch.. we can’t checkout another branch.. until we stash our code OR … commit it first. Now, what do you need to know for this entire series? First of all, a bit of maths. Which is necessary for programming Apart from that… A bit of HTML, a bit of Javascript and a bit of CSS. And I think that’s all enough… for an overall understanding of our project If you want to see this project live, you can go to this repo on Github that is “ahsanayaz/html5-canvas-snake-game” And you’ll find the slides in the README And the link for live demo too I’ll now go to the live demo link And we’ll see what we’re actually going to make So, this is the SNAKE game And you must have played it on a mobile or a PC So a pretty standard SNAKE game It has scoring whenever the snake.. eats an apple. And apple is always generated at random positions Snake’s length gets increased. Similarly, if the snake eats itself.. the game ends Ok? So.. pretty standard game So let’s see how we move forward Let’s talk about the first step now The first step is that we understand the game’s base architecture And in that, first of all we will.. create the game’s screen, on which the entire game runs You might have noticed that the game has a.. black background. So we’ll start from there. So first, we’ll do “git checkout step-1” Which will switch us to the step-1 branch. And after explaining things here, I’ll show you the code too Let’s talk about HTML5 canvas now. And it is something the whole game is based on. So HTML5 canvas is a standard HTML element that is a specification of HTML5 And if we talk about how we do all the pixel maths and calculations… if you see the grid on the screen a similar grid is built on the canvas screen (imaginary grid) So everything on our canvas is basically placed on pixel coordinates. X coordinate and Y coordinate. That you might have used in mathematics often So on our screen.. the coordinate (0,0) i.e. the initial point.. is at the top-left corner. And it all starts from there. X-axis is the horizontal axis. From left to right. And Y-axis goes vertical from top to bottom Which means if you move horizontally 10 points.. the coordinates will become.. (10,0). That is X is 10 and Y is 0 Similarly, if you move 10 pixels in Y direction.. then it will be 0,10. Which means X is 0 but Y increased. So if you see at the bottom right It says (600,400) Which means it moved 600 in X-axis and 400 in Y-axis So using similar logic we’ll calculate our placements of the characters on canvas by doing this calculation So how do we draw a rectangle on the canvas? Because, most things in our game.. are basically rectangles For example, snake.. It consists of several rectangle boxes Apple, itself is a red-colored rectangle And even the screen, i.e. the background.. too is a huge black rectangle. So to create that, first of all.. you get the HTML5 canvas element and save it inside a variable using “document.getElementById” After that, this “gameCanvas”.. is just an HTML element that you see on the view but, actually, it is not our game’s screen So if we want to draw something, we need that canvas’s CONTEXT We can’t draw on the HTML element itself So to get that context, we use “canvas.getContext(‘2d’)” What we get from this is the actual screen. Now, we can draw or fill anything on this screen. So as I said, in our game we use rectangles to draw things and for that, we use “fillRect” But before that, you can see “fillStyle” here and this is ‘some-color’ So you can visualize in this way that if you have a drawing book which has a flower and let’s say a green-colored leaf so when you’ll be coloring the flower, you’ll pick a red crayon and then you fill it with red color And then when you are to color the leaf, you pick the green crayon before that and then you color it Similarly, before this rectangle is created we pick this color And we decide that this color is going to be used in the next steps So first, we said that we’re using ‘red’ color and then we fill the flower using the ‘fillRect’ Then we said ‘green’ is the ‘fillRect’ color. And then we created a new rectangle. So that’s how ‘fillStyle’ and ‘fillRect’ work together. Now if we talk about our game, we’re doing actually the same First of all, we get the game canvas from the document then we get the CONTEXT out of it and finally, we’re using a function as the game’s loop And this game loop.. runs again and again. And whatever we draw in our game canvas, it’ll draw again and again. Because, what’s animation? An animation is a combination of many pictures The just keep refreshing on screen The game too is similar to this. We will draw everything again and again And whenever we draw, there’s a possibility that snake gets a new position So whenever that’s changed, we will see that the snake is moving But in actual, we just draw it again with the new position So first of all, in the game loop we’re setting the background using “fillStyle” and we picked the black color then we say we’re drawing a rectangle that starts from (0,0) Which means if you see the canvas, it starts from the canvas’s top-left position And then we’re saying the ending coordinates of screen are “gameCanvas.width” which means the width of the entire canvas element and the entire height of the canvas element Which means that we draw a rectangle on the entire canvas element with black color And it will look like this in the end So this is our entire canvas HTML element that we can see on the view and we’ve COMPLETELY filled it with the rectangle Now, let’s see the code So first, when you’ve cloned the code you will switch to “step-1” branch Because by default, you’d be at “master” So you need to switch to “step-1” Then you can open the “index.html” file And, there’s a nodejs package “http-server”. You can also use that For that, you have to run the command The command will install the package globally for you And then, within this project’s folder, you can run “http-server ./” That’ll serve the index.html on the browser Let’s try this So you see we have a white screen There’s nothing But actually, if I inspect this We’ll see that there’s something on the view but, it’s blank So you can see this is the canvas element It’s “id” is “gameCanvas” and it has width “400”, height “400” But.. we see a blank screen because the page’s background is white and there’s nothing drawn on the canvas So we need to draw the background screen on this canvas You can also see that I have put some styles margin is given “40px auto” so it can be horizontally centered Now let’s talk about javascript If I go inside main.js you’ll see that there’s a lot of code that is commented here And as I said, we need to uncomment the code to see what it does First of all, we’re defining two variables “gameCanvas” and “screen” Two variables because “gameCanvas” is just an HTML element that we get from the document but “screen” is the 2d context that we’ll draw things within We don’t draw on the HTML element, we draw in the 2d context So we’re getting “gameCanvas” by id And we’ve given the same id in our HTML on the element So we get it by id After that, we get the context and put it in the “screen” variable Please note that both variables are outside the function body And that’s because we can re-use them later in the game loop See we use them here Now, the next step is to use “fillStyle” in the game loop which has a black color Then we do “fillRect” With (0,0,gameCanvas.width,gameCanvas.height) which I explained already Now as we know that for the game we have to draw everything again and again So to draw again and again, we have to run the game loop again and again So if we want to run a function time and again, after a specific interval, we use “setInterval” So we’re calling this function inside “setInterval” Which means, after this time interval, run this function again every time If we want to change this, we can And if you’ve played games, you might know that FPS is Frames Per Second That how many frames are drawn in 1 second And here, we say 10 FPS Which means in one second, we draw 10 times Now let’s save this and let’s see what changed If I refresh this You can see that now, we have this black screen (rectangle) And if I turn on the breakpoints It will stop at that right away because the game loops run multiple times using intervals So even though we initially draw the background on the screen Still then, since it is a game it is necessary that we re-draw things again and again. You’ll understand in the next videos more that why we do it One important thing is that if we now inspect our canvas You’ll see that the size of the canvas is now the same size as the filled-background Now that you know about the coordinates, I.e. (0,0) and width height stuff, you can play around with this For example, And if I want that horizontally, it should take the entire width of the canvas But vertically, it should fill half the height of canvas I can change the game canvas height to half of what we had before Meaning it’ll start from top-left (0,0) will take the full width but will fill half the height So previously it used to look like this, but upon refreshing.. you can see that it’s half the height. If I hover on this, you can see how large is the canvas element and what’s the size of our background If you want to have more than 1 background that’s also possible If I copy this and add.. one more background Let’s call it background2 For instance, I can set this to ‘yellow’ or let’s say ‘red’ Now, instead of (0,0) we’ll keep X as 0 but we’ll set Y as.. half the height of canvas So if I refresh now, You can see that it has taken half the height One confusion that people have is if I’ve set Y to “gameCanvas.height / 2” Does that mean it should end here? Not exactly The initial two parameters in “fillRect” are X and Y coordinates so we gave it X set to 0 and height (4th param) set to gameCanvas.height / 2 So it filled through half But after that, we provide width and height So for the 2nd background we also give the height as gameCanvas.height / 2 So I’m reverting my code now And now we’re setting it to full width and full height Now we’ll save this and will test then Now you can see that we have the black background filling completely And that’s the target for this first step So we’ll keep this video to this point In the next video, we’ll see how to place the snake and the apple on the screen

Leave a Reply

Your email address will not be published. Required fields are marked *