Video details

Flappy Bird in JavaScript with 25 Lines of Code | Daniel Bark

JavaScript
12.24.2020
English

Daniel Bark

In this tutorial I take on the challenge to code a flappy bird clone in a few lines of code as possible. The starting point is an empty HTML canvas and you can follow along all the way to a complete game.

Transcript

Hello, and I'm Daniel Bark from Barcoding. And today we're taking on a challenge to build Flappy Bird in 25 lines of code with lines of code, I mean, readable code, not like minimized crazy code. It should be readable and it should look nice and make sense. My starting point here is a body tag, a canvas tag and a tag, the canvas has a size of 400 by 400. And there's a little bit of styling to center the canvas, to set the dark background and to make the border around the canvas. So let's get started. So the first line of code is to get the context from the canvas and for the variables in this tutorial, I want to use const or light. I will just declare variables. This is not a best practice, so please don't do this in the real world. But this is about coding small. So in this world I will just declare variables like this without the Vialet or const keyword. So because of the idea of C here of the canvas, we have that in the variable C already, so we can just see that get context and it's a 2D context. So there we have a context and the first thing we want to draw is of course our bird. So let's create a bird. And that would be a new image. And the next thing is to set the source of this image. And I have an image of the Flappy Bird at Bird PMG in the same folder as this HTML5. We want to draw this bird somewhere, so let's make variables for the coordinates of the bird. So we call that bird X, which will be zero. So the X coordinates start from the left and goes from zero to 400 and the Y coordinate will be zero in the top and increase as we go down the canvas and bird y. Will be two hundred, so we place it in the center of the canvas in the right direction, we need to have a game loop that redraws the canvas. And for that, we're going to use a set interval, takes a function. We want to redraw this at some interval. So let's use a variable for that. Interval is 24. So it will draw like 40 times or something a second in this canvas. We want to set the Feinstein to set the color that we want to join. So we do context. Don't feel that style is equal to. We'll start with Sky-Blue, so we will want to paint the whole canvas with Sky-Blue first. So then we do context dot feel rectangle will start at coordinates, 004 top left and then we will want to draw the whole canvas. So let's get a variable for the whole world. Can a size canvas size 400. So we draw. Canvas size and canvas size, sort of a big square that takes up the whole canvas and there we see the canvas turned sky blue. So now for twenty four times every 24 milliseconds, we redraw this canvas with this. So now let's draw our bird. So we do context, dot, draw image. And the image is the bird and the coordinate is Bird X or Y. And then we need to set the size of this image. Now we want to reuse a variable for the bird size because we want it to be 24 pixels by 24 pixels. So then we can just add on here. This is not a good practice either. But since we want to save a few lines, we can do this. So both Intervale and bird sites will be 24. So now we see the bird, but it's very, very, very big. So we need to set the bird size here and now. It will be smaller bird size. It's smaller now, but it looks a little bit squished. So we need to multiply the width with the aspect ratio of this image. And I happen to know that the size of this image is 524 by three, 74. So if I multiply it by that, you can see that the bird does not look squished anymore. Nice. Now we have the bird drawn at the correct position. So now let's add some gravity to this bird. So we need to change the bird. Why every frame? We need to have a variable for the bird speed in the Y direction. So the vertical speed of the bird. So we can set that vertical speed of the bird, I will call it the Y for Delta Y. We will set it to zero when the game starts in every frame. We will do minus equals the bird DUI, the bird way, meaning that we. Subtract the Y. From the bird y coordinate every frame bird the. So now nothing should happen because Berdy DUI is set to zero, but we need to have a gravity constant and these variables will never change. So I want to declare this a variable cost. Then I have to create a new line for that. So I will just set gravity to zero point five. And now when I say the word should start falling. So if I say it again, it falls again. So nice. Now we have some gravity for our bird. Now let's enable the bird to fly. So we will do an unclick function on the canvas. So we have this Ahran function. We will set the bird DUI, which is of course, again, it's the vertical speed of the bird. We set that the positive nine. That means that when we click, it will the speed will be upwards. So if I can save and then quickly click in the cameras. Yeah. Now, every time I click, the bird starts to fly. Flaps its wings and goes up for a little bit and then gravity pulls it down again. Now nice, we have a flying bird. Now the next step is that we should restart the game if the bird hits the bottom of the screen. So then we can do bird y is greater than canibus size. And here we're going to do a little special thing to save a line. We don't want to make it for blocks because then they will take up too many lines. So we say that if Bird falls below screen. We do. The Y equals zero, and then we're going to make another thing and then I can say Cono and then make another expression here for Y equals two hundred. And I think we need to wrap this in a parenthesis as well. That's great. When we die, it restarts and it's still interactive. That's perfect. So now we did like any statement here with two things executed, if this condition in just one line, so it's not the most readable code, but at least it's a few lines. And I think it's quite understandable. At least Bird died to make some comments. The bird raverty across the sky. So now let's start to create a pipe. So to draw a pipe, we want to use green so we set context. Don't feel style is green here. We can set pipe X to be equal to four hundred so that it starts at the right side of the screen. So a pipe is a rectangle and we can draw it with context. Dot draw rect which should start at the pipe x you. We draw the top pipe, top pipe so y zero and then the pipe width will use twenty four for that as well. So set the pipe with here pipe with and then where the where the top pipe stops. That should come from a variable that is randomized every time. Let's use two hundred for now just to see that we get something drawn on the screen. Let's add extra two hundred because now we're drawing it off of the screen or it's not drawing, it's wrecked. So now we have a pipe there. But of course we need the pipe needs to move at every new frame so we can set pipe X minus three equals eight pixels over screen. There we saw the pipe started to move and then we can set the pipe X starting position back to 400 and then we need to check if the pipe goes off screen, we want to create a new pipe. So to check if the pipe went off the screen, we can do a pipe X is smaller than minus pipe with. That means that the whole pipe is off the screen because if we don't use pipe with if we do see it as soon as it touches the left side of the canvas, it will redraw. So we want to wait for it to move completely off the screen. So if this is true, we'll do a similar line to the bird died line down here. We will do some expressions here to set pipe X to canvas size. Nice. So now we have a top pipe that starts over once it goes out of the screen to the left. So that's great. We need to have a able to to randomize where the pipe gap is, because for every set of pipes in Flappy Bird, the position of the gap is randomized. So we need a variable for that. We call it Pine Gap. Both Tom one. So it will mean that the position of the top of the bottom pipe. But we'll get to that in a minute here. So if the Piak moves off screen, we want to randomize this new value high gap both on Y is equal to we should have variable for how big the pay gap should be, the distance between the top and the bottom line that at the two hundred sort of pytka two hundred then we can set. Math taught random. Times. Now we can change how this top pipe is being drawn. So now we can see it a little bit in action here. Let's let's instead call it top pie. Both Tom, why? Torpy BOTTOMLY Top. Let's remove this board or not. Nice, now it's flush against the canvas top. So now we should be able to draw the bottom part of pipe so the X is the same, but where we start to draw the we cannot use the top bottom way, but we add the pipe gap. Which is 200. And we draw it all the way to the border, so we should be able to use canvas size here. Nice. So now we have a working group gap that is randomized every time it goes past the screen. So now we need. To check for collisions with the pipes, it's now you can see the bird just goes through the pipes, doesn't die from the pipes. So if you want to save on lines, we should add this conditional to this bird died. Conditional here. Because now we're just checking if the bird falls off the screen, so let's first check. If the bird y is within the pipes, why so we match the bird with the pipe in the Y direction, so the bird y should be higher than the. Top pipe bottomly. That means that the bird is up here in the pipe or. Bird, why? It's greater than. Pi bottomly minus or plus the PI death. That means that the bird is. Like the distance to the bottom of the top pipe, plus the gap, that means that it's down here. This is matching the Y. And then also needs to match the ex of the pipe will do pipe, pipe, ex smaller down third size, and since it's the bird size in the X direction. We should multiply it by this wind factor. So this means if the pipe has reached all the way to these small X numbers below the width of the bird, it means that the pipe is way back here. So here we have the check with the Y. If that is true, the X also has to be true. So if both of these are true, that means that the bird actually died. So now we can probably do this bird hit. So it's either that the bird hit the pipe or bird falls off screen. Yeah, the bird does die from the pipes, but. We are not resetting the pipes when the bird dies, so there should be a next step. So then we need to make a few more things down here, we'll reset the pipe X. To be the window size. It's not window size, it's canvas size, nice, so now when the bird dies. The gap. Or the pie presents. Very nice. So what else do we need to do? We need to start counting the score. Let's change the Feinstein to Black to Drosten text context. Don't Philistine black. Then we need, of course, a variable for the score will set it to. Zero. And we also want to keep track of the best score, which should also start at zero. We can count an extra point at every frame. For every frame you stay alive, you gain an extra point. And we don't want to do that in a separate line, so I think we can do this context, don't feel text. We want to bring the score and we will increase the score every time we printed it at nine twenty five. So now we have a little score counter up there. Now with count, it's counting the score for every frame. And of course, if I die, I need to settle the score to zero. Score equals zero. Now, every time I die, the score is reset. We, of course, want to say the best score as well. So let's do like this best score equal to best score smaller and score than we set score. To be the new best score otherwise would keep it as the best score. And then we need to draw. The best score based score based score. And we need to move it a little bit so that 50. So now we have a working best score. If we if the score reaches past the best, they are synched and when I die, the best stays. That's great to have a little high score, nice, and that's all there is to it. We have officially made Flappy Bird and now let's count how many lines did we use? OK, let's see. We used. One, two, three, four, five, six, seven, eight, nine, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27. But actually, this one counts as one line, right. So I think let's just say that we did it. We we don't want to count the HDMI tags. We just count the JavaScript lines, so I think let's say that we actually did Flappy Bird in 25 lines of code. Hopefully you had fun coding along with this project. Uh, game development is always fun. I will deploy this game somewhere so you can try it out and I will link to the code in the description. I hope you learn something about JavaScript in this video. And thanks for watching and I hope to see you in the next video. Bye, guys.