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
