The Logic Behind Flappy Bird
It is true that Flappy Bird is one of the legendary games we used to play, or perhaps some still play the game until today. Played by hundreds of thousands of players globally, the game became a hot trend a few decades ago.
The objective of Flappy Bird is simple: attempting to fly the bird between pipes without hitting them. The longer the bird survives the moving pipes, the more points players will gain. From a gamer view, this game might seem simple. On the other hand, from a coder perspective, Flappy Bird is indeed an interesting topic to discuss. Let’s get into it.
A Little Background
Although you might already know what a Flappy Bird program looks like, please check out this program to get an image as to what we’ll cover in this essay. Let’s call the program Kevin’s Flappy Bird (FB). Below is a screenshot of the game.
As seen above, there are minor differences between Kevin’s and the original game, though the main principles are identical. For instance, in the original Flappy Bird, the green pipes fills the whole screen but are divided into half, leaving some space in the middle for the bird to fly by, whereas in Kevin’s FB, the pipes fill up half the height of the screen and the upper part of the screen is filled with a flying plane. Also, while the original game has a portrait orientation and is more dedicated to mobile users, Kevin’s FB has a landscape view and is not mobile-responsive.
Since we’ll be discussing logics and algorithms, not syntaxes, it does not matter which programming language you are using. For those probably wondering, Kevin’s Flappy Bird is written in JavaScript with a Processing JS library. Hopefully, you will understand how to create a Flappy Bird by the end of this passage.
Now that you have the big image, we’re ready to uncover each points in detail. There are four main components in this game: a bird, several pipes, a plane, and some decoration (bushes, a car, and a road).
First Step Towards Success
The first step towards creating a successful Flappy Bird is to create a bird character by either drawing it manually with code or uploading an image of a bird to the file. As responsible programmers, we need to set the size of the bird to a rational size, not too big nor too tiny.
Next, we need to define a y variable to store the current vertical position of the bird. An x variable is not necessary since the bird will not be moving left or right — the pipes will! Check whether the y variable is connected to the bird image by changing the value of the y variable. If the bird moved upwards/downwards, we are ready to move on to the next step: automating the bird movement.
To do this, three important elements need to be implemented to our program: gravity, user interaction, and limit. It is easy to “create” gravity. We just need to continuously add the y variable we have defined earlier to some logical number, thus seemingly bringing the bird down to ground.
After gravity, we’ll discuss user interaction. The only method to have user interacting with the bird is to use a conditional statement; if users do something, then move the bird upwards by reducing the y variable to some value that is greater than the amount of gravity. Decide whether you want users to interact by touching their computer screen or pressing a certain key on their keyboard (or both).
Finally, we’ll set limits to the bird. Obviously, we do not want the bird, or part of the bird, to be seen off-screen because of flying too high or falling too low. To limit the bird’s movements, use another conditional statement to ensure that the bird’s y variable is more than 0 and less than the maximum height of your program screen.
And there you have it, a fully interactive bird!
Challenging the Limits
Merely clicking to see the bird fly might seem dull after some time, though. In order not to make it boring, our game should challenge player’s focus and skill. Hence, let’s add obstacles to our program. There are two main obstacles in Kevin’s Flappy Bird: plane and pipes. We’ll cover the plane first before continuing to the pipes.
We will need an image of a plane. Again, getting the image can be done by either drawing it or uploading an existing image. What we need next is an x variable to store the value of the horizontal position of the plane. We will not move the plane upwards or downwards, but feel free to add that update if you like. After defining an x variable, animate the plane to move from left to right by reducing that variable by some value. Also, if the plane reached the left side of the program’s screen, set the x variable equal to the screen width.
Steps needed to depict pipes are similar to that of drawing a plane, but with some minor additions. When playing the game, notice that the bird has probably passed through thousands of pipes. However, the fact is that only two pipes are required. Both of the pipes are put on a cycle identical to that of the plane, which was mentioned earlier, to illustrate that effect. Obviously, we will need some variables to store important values, such as the x position, y position, and height of both pipes. Then, animate the pipes and put them on a cycle (see steps on animating a plane). Now here is where the addition comes. When a pipe reaches the top left part of the screen, instead of directly changing the x variable equal to screen width, we need to randomize the y position of that pipe, adjust the height accordingly, then change the x variable to move the pipe. Doing this will allow players to think that each pipe the bird passes is unique and thus improving overall game experience.
Death is Inevitable
To every beginning, there is always and end. We need to somehow end our game because no one wants to play a never ending game. First, define a new variable to check whether game is over. Set the initial value of that variable to false.
Next, we need to detect whether the bird collides with a plane or a building. A function is required to stop the game. Any collision should trigger that function. Each collision detection varies by programming languages, but the logic is the same: if the bird hits an obstacle, set the game over variable value to true. End the game with something fancy like a pop up or whatever you like.
Final Touch
Finally, we will add some decorations. Draw roads, bushes, cars, or anything that fits our theme. Animating some of the decorations is highly recommended so that our Flappy Bird environment becomes more lively. This part is not necessary but it can immensely improve our game appearance.
Now that you have understood the process required to create your own Flappy Bird, why not try to create one? Perhaps you might learn something interesting along the way that can further boost your knowledge.
