Coding Challenge #31: Flappy Bird

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
Hello and welcome to a coding rainbow coding challenge. Today's coding challenge I'm going to attempt to make a flappy bird clone which I admit it is kind of like a bit of a cliché probably at this point don't know how many people have made flappy bird clone tutorial whatever's on in the world but it was requested I think it will be fu,n I'm going to give it a try, I'm going to do it in JavaScript I'm going to try to do it fast but with time to explain and time to relax and just enjoy myself and hopefully you might enjoy watching this. So umm if you're not familiar with flappy bird then I would say pause this video and go familiarize yourself with it. I actually don't think I've ever actually played it before but I am somewhat familiar with the gameplay we'll see how well I do, I've got a live chat going on and you guys can tell me how I'm doing if you're watching this is a YouTube archive you won't be able to follow along live but that's fine. Ok so I'm using p5.js which is a JavaScript framework has a function setup it has a function draw and so the only thing I've got so far in the browser is just a canvas that's 400 x 600 pixels and a black background on that canvas so the first thing that I want to do I actually have a separate javascript file called bird.js and I'm actually going to make this a constructor function and the bird.. all the bird really needs is a y-value, right? The bird moves up and down and it stays in one spot so I'm going to give this.. bird.. I'm going to start the bird off in the center of the window and I'm going to write also a function called show where I draw the bird and again I'm gonna.. my design is going to be very poor so it's going to be up to you to take my code which will be linked in this description and make something more beautiful and interesting and reef off with this so I'm just going to say let's make a white circle and you what let's get this bird and x-position as well even though it will be fixed but let's just try 25 for right now and I'm gonna never forget the.. ♫this dot♫ you always need this dot in JavaScript. So let's make this bird a circle and let's say in the main program now var bird and we're going to say bird equals new bird and bird.show(), so we should have something a little bit more interesting now there it is bird.. width/2 you know would probably makes more sense if I want the bird to be in the middle to be height/2 so let's fix that. I'm gonna say height/2, I think the bird could be a little bit bigger and the bird could be a little bit more in on the screen so there we go this is the beginning of flappy bird now what happens to the bird without you doing anything? the bird falls down. So oops oops wrong window so I'm going to go here and I'm going to say this.update equals function and it would be good to have some sort of variable called gravity and gravity being the force that's pushing that bird down and let's say that the gravity here is going to be one I also need a velocity, right? I need a velocity so gravity is the force that's causing the velocity of the bird to increase so I'm gonna say this.velocity equals 0 and now I'm going to say this.y changes by this.velocity and this.velocity changes by this.gravity ok so now we have a function that's going to push that bird down so I'm gonna go over here and I'm going to say also bird.update(); there we go bye bird it flew down. Now we should probably do something where the bird stops when it gets to the bottom of the window that makes sense so I'm gonna go back to the bird and I'm gonna say.. I'll just do this in the update function, I could write a separate.. and I'm gonna say if this.y is greater than height then then I'm just gonna keep the bird on the screen I'm going to say this.y equals height and I'm also going to set that velocity to zero so we can see here that bird stops. I don't know if that's actually what happens in flappy bird but I just kind of want to do that anyway and you know what I'm going to do that also for the top of the window because ultimately I'm going to be able to push the bird up so let's do that for less than zero, now of course... oh ok so now what.. How does the game work? I think it's a mobile game right you could tap your mobile device.. this is my mobile device so I mean as a tap I'm going to just use the spacebar on my keyboard so in p5.js I can write a function called keypPessed and I can check to see if the key is the space bar and let me just make sure this is working I'm just going to console log something right now so I'm going to run this and you can see each time I press the spacebar it says here in the console, it prints out, SPACE. So that works so what do I want to do I want to cause a force to cause that bird to go up so I'm going to say bird.up and so what's going to happen with this bird.up function? What do I want to do.. I want instead of the velocity being pushed down by gravity I want to say this.velocity minus equals, I want it to go up or I could say plus equals but some minus amount now what if I just said minus this.gravity? Let's try that for a second just to see what happens Come on! Wait oh you know what's a little bit annoying, I have to.. oh I took off that console.log(), hold on. Let's say minus equals this.gravity times 10 so nothing's working here and I have a kind of a sneaking suspicion that I've done something totally wrong bird.up let's make sure this is happening. I'm gonna say print line this.velocity ok so you can see that's working so let's try to tune.. I think there's sort of an issue here we've got to sort of tune the numbers so let's make the gravity just for right now a lot less strong so it's not going so fast now you can see though that this isn't really doing very much let's make a this.up force let's call this lift and we'll say it's negative 10 so I'm going to say this.velocity plus equals this.lift; not left lift. There we go, so you can see there's a sort of an element of tuning those numbers so now it doesn't really feel like it's falling fast enough but me pushing the spacebar is kind of working out. What happens if I hold down the spacebar? so that's good ok so that lift is too much. Let's make the gravity 0.6 and let's keep the lift there but now I'm going to need to make the lift a little bit stronger. There we go, so this.. so now I have, I sort of have the game going and lift is a little bit too strong let's make it less strong so this you know, something something that I could do is actually limit the top speed or also like give it some.. something that I could also do is add some like air resistance in general which I could say something like this.velocity times equals 0.9 so that actually like helps with things quite a bit because it's just there's some sort of like a limit to what the speed is so now I've got something that is a bit more kind of like reasonable to play here. So you could spend your time tuning this even more but I think just like keeping the velocity keeping some like air resistance by always shrinking the velocity a little bit tuning how much the lift is versus the gravity those types of things you can kind of play around with. Ok, so now we have the basic game mechanic here which is just a falling circle and each time I press the spacebar I can kind of like have it lift up a little bit. Now what do we need to add? We need to add those pipe things that kind of come from the right of the screen, I'm only at eight minutes by the way which is pretty good; the pipes things that come from the right of the screen and you have to steer your way through. Let's see if we can do this. So let's think about this, I'm going to also create a pipe object with a constructor function and let's think about what does a pipe need? So a pipe needs, I would say it's going to extend from the top to somewhere in the middle of the screen and then somewhere further down to the bottom so I need, I'm going to say like a value called top which is going to be some random amount between the top of the screen and the middle of the screen and let's say this.bottom is some random amount also between the middle of the screen in the bottom of the screen and the pipe also needs an x-position which is always going to start at the edge of the screen and then let's write a function called show where I draw the pipe as a white.. fill white and I draw a rectangle at this.x, 0 all the way with a width of like, let's say the width is 20 and let's actually make that a variable and this.. a width and also the height then is this.top and then I need another rectangle which starts from the bottom minus how tall it is and let's make.. minus this.bottom and its height is this.bottom. Okay in case this isn't making sense to you that's actually.. let's actually do a quick diagram here. What I'm trying to do is create something that looks like this so I need two random numbers this length is what I'm calling top, this length is what I'm calling bottom and then this length.. this width is what I'm calling w. So I first draw a rectangle from here with this width with a height of top and then I draw a rectangle from here which is height minus bottom which is this point with this width and then the height of that rectangle is bottom. So this is what I'm getting and if these values are random I'll sometimes get stuff that looks like this etc. Now I could be more thoughtful like right now the way that I'm doing it there's.. this.. you could never get something that looks like this. So it probably would make a.. I could probably do something different where I pick like a random empty amount of space and then I pick a random starting point for that empty amount of space. That might be interesting to do, we can make that as an improvement later but let's just stick with what I have right now which I think is good enough ok am back over here and let's just see now I need a function like this.update and all I want to do in this.update is say this.x minus equals some speed this.speed. So let's say this.speed is always going to be 5. I'm gonna just.. so all of these are always going to move to the left. So let's look now here in sketch I'm going to create an array called pipes and what I'm going to do is say pipes.push a new pipe; and then in draw I'm going to say for all of the pipes in the array yeah I also have a problem with this, somebody in the chat is saying, where I could technically have a pipe with no space in it. So all that stuff can be corrected later and I want to say show and I want to say update. So let's run this now and see. There we go, that's moving quite fast. So let's go back to the pipe and let's just make the speed 1. So we could see aah look we basically have flappy bird already it's so easy to play so it's moving kind of slow now but of course I only have one. So let's think about this, what.. couple of things that I want to do; one is I want to I want to say something like if frameCount, I want to have a pipe every like so often, modulus 40 equals zero which means every 40 frames, the modulus operator being the remainder of division. So anytime a number is divisible by 40 with a remainder of 0 is 0 40 80 120 160 etc let's add a new pipe and let's see how this looks that's a lot of.. that's a lot of.. every 40 frames is quite a view. Look at this, oh I'm pretty good at this ♪ta da da da♪ I need some like music to play along with this. Okay so that's no good obviously. Lets umm let's make the pipes move a little bit faster, twice as fast, and let's uh let's say every hundred frames. So obviously you can see uh how the speed of the pipes, how frequent they are and we can see basically I have the game right now. I've made a very easy version of the game to play it's not very hard but one thing that I haven't done is figure out when I need to actually., you know this, i'm doing a great job here so let's actually add something that shows us when the circle hits the pipe or doesn't hit the pipe so and also by the way I should be getting rid of the pipes at some point so one thing I should do is I should I should say if pipes index I is finished and I can actually just say x is less than zero.. you know what I'm going to write a function. I'll write a function called offscreen so if the pipe is off the screen I want to say pipes.splice(i, 1) so splice is a function that deletes an element from the array. So I want to know if the pipe went off the screen, get rid of it I don't need it anymore. Now of course there's a little bit of an issue here which is one is there's no such thing as a function called offscreen that's a function I have to write. There's another issue here which is that when I'm deleting stuff out of the array I really should go through the array backwards and I've covered that in other videos but basically the array slides.. the elements slide back and if I'm going forwards, the elements slide back while am going forward I could end up skipping things. So I'm just going to switch my loop to saying greater than or equal to 0 and i minus minus, and then I'm gonna.. if I run this, right? no function named offscreen so I have to go into the pipe and I have to write a function called this.offscreen is a function and this is very simple, I can just say if this.x is less than negative w, right? because I want it to be all the way off so it's width has to be all the way off; return true else return false and now I know all of you watching this video are going to complain to me and just say, "But couldn't you just say return this.x is less than negative w because that evaluates to true or false." Yes, I could do that but you know what sometimes I like to write my code this way. I like it to be long-winded, multiple line, I love the way that curly brackets just nest themselves so beautifully, I love to say a return true return false you can write your code a different way but yeah and now I sort of feel like I should change it but I'm not going to I'll do it later. Okay, so coming back let's see now we should see.. oops w is not defined so I have to say ♪this dot this dot♫ I always forget the this dot. Ok, now we should see.. now I can't really tell if this is working, I can only assume this is working but if I do something where I say like this oh pipes.length, if I look at the length of that array it's two and it's always two. So even though I'm adding more and more they're getting deleted, ok, so we can be pretty sure that that's working. Ok now let's see, now we've got to do the exciting part here .. I mean this whole thing hopefully is somewhat exciting but we've really got to get the gameplay mechanic where you.. it's going to give you some visual feedback if you hit one of those pipes. So let's think about how we might write this, ultimately here's where I have this single bird that says bird.update bird.show and I'm also looping through all the pipes so one thing I could do, I don't really need to do it this way but I'm gonna I'm gonna move this loop first just so the bird comes after and I'm going to say here I'm going to say if pipes index i hits the bird then do something. I'm just going to say console.log("HIT"); so I need to have a function that determines if a pipe has hit the bird so if looking at this bit of code you can see here what do I need to write? I need to write a function called hits and that function is going to be part of the pipe object and its going to receive a bird object as an argument so I'm gonna go to the pipe object and I'm going to write, I'm just going to write the function up there.. here, this.hits I called it hits equals function bird and now I just need to check. What do I need to check? I need to check if bird.y is less than the top and bird.. or or bird.y is greater than height minus this.bottom. So if the bird is ever.. if I come back here to my whiteboard if the bird is ever, right? less than top or greater than height minus bottom here then it's kind of it's hitting that.. it's hitting that pipe. So let's come back over here. Did I get that right is greater than height.. okay, so then I want to say return true although this isn't good enough, right? It's also got to be within the actual x-position so we should also say and I uh I could I mean I could be much better about how I construct this but I'm gonna put it inside here so let's just say it's within that stuff also lets now check if bird.x it's x-position is greater than this.x and bird.x is less than this.x plus this.w so I'm also just checking if it's in between the actual x-position of the pipe so if all of that is true I'm going to return true. You know am just working it out we could.. I could.. this double if statement is kind of an awful way to write this and I could probably be more clever and I could write a separate function that just tests intersection between a circle and a rectangle but right now this will be good enough for us right now and I look forward to hearing your improvements and suggestions in the comments so let's just see here if.. whoops, right now I'm not seeing anything. Hit hit ahaa so this is basically working, you can see that anytime, this is gonna be hard; so let's actually give ourselves some visual feedback if this is the case, let's write a variable called highlight set it equal to false let's also say this.highlight equals true and then under fill.. under show I'm going to say if this.highlight I'm going to say fill(2..), I'm gonna make it red so let's just see if this gives us some nice visual feedback. Oh you know what I never said highlight equal to false so watch it hits it so you know that's fine but I might want to actually also say this.highlight equals false, hope it's not hitting it, so now here we go it hits it you can see. So now I could add things like score I could be more careful about like I'm really only checking the center go go go tada dada dada.. this is way too easy to play, oop, there we go. Okay so you get the idea so I i think that I've kind of completed this and there's a lot of improvements that would want to make to this in terms of being more thoughtful about checking that intersection to be a bit more precise good enough though.. be a bit.. I could do a better job of picking the, the way that.. oh here's a difficult one; a better job of how I pick the top and bottom heights of these rectangles I could add score, right? You start with a score maybe as time goes on your score goes up every time you hit a pipe the score goes down, all those things. I would say umm ask me your questions in the comments, suggest, make versions of this and tweet me your exciting, doesn't you know.. you could make a nice bird design you can reimagine this entire game to not be a bird and pipes but to be you know a flower and rainbows I don't know how that would work so ummm tweet me and share with me all of your interesting variations on this and I'll maybe come back and do some Q&A video where I follow up on some of your questions and make some improvements to this flappy bird challenge. Okay, thanks for watching and I will see you in a future coding challenge. Goodbye. Subtitles by the Amara.org community
Info
Channel: The Coding Train
Views: 1,143,457
Rating: undefined out of 5
Keywords: rainbow, live, flappy, bird, games, p5.js, daniel shiffman, p5js, creative coding, p5.js tutorial, nature of code, javascript, tutorial, coding challenge, the nature of code, p5 js, javascript (programming language), flappy bird, coding, challenge, flappybird, flappy (video game), flappybirds, flappy bird gameplay, flappy bird challenge, flappy bird javascript, flappy bird clone, html5 flappy bird, web flappy bird code, how to program flappy bird
Id: cXgA1d_E-jY
Channel Id: undefined
Length: 21min 44sec (1304 seconds)
Published: Wed Aug 10 2016
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.