Developing Flappy Birds in React and JavaScript…..
Hi Guys in this article we will make our own Flappy Bird game using React and JavaScript concept. Flappy Bird is a famous game where there is a bird who have to fly without getting hit into the obstacle which comes into it’s way. The obstacle comes from bottom and top. If Flappy bird hits the ground and the obstacle then the game will be over.So our application is mainly based on JavaScript.So let’s start coding:
So This our folder structure, it’s the default codebase we got when we run npx create-react app <project Name> on our terminal.We have just added 4 images into our code base.So let’s see our App .js file:
In App.js , we are having a game container , Inside game container there will be having two things sky and ground container. In sky we will be having our flappy bird. So let find what are the things we need to do to develop the game . So the first thing is we have to make our ground movable .So to apply styles accordingly to our ground we have added a ground moving div inside ground-container. In order to do this we have added some styles in ground-container :
.ground-moving {
position: absolute;
top: 580px;
height: 150px;
background-image: url(‘bottom-background.png’);
background-repeat: repeat-x;
animation: slideright 100s infinite linear;
-webkit-animation: slideright 100s infinite linear;
width: 100%;
z-index: +1;
}
@keyframes slideright {
from {
background-position: 100%;
}
to {
background-position: 0%;
}
}
@-webkit-keyframes slideright {
from {
background-position: 100%;
}
to {
background-position: 0%;
}
}
So we have set position to absolute , top to 580 px because our sky height is 580px and height is 150px ,also we set background image from our local , then we added animation and webkit-animation. slideright we are setting from 100% to 0% , now we are setting background-repeat to repeat-x means the image will repeat in x axis we also added width 100% and z-index:+1 . Now we want when our game is over the ground should stop moving so for that we are adding styles in it’s parent means ground-container div:
.ground-container {
height: 150px;
width: 580px;
left: 80px;
position: absolute;
}
Actually we are removing the animation part from the ground on game over.Now we want our birds to fly and for gravity it should also have a downward pull.For that we have written a startGame function and for a timeinterval to 20 ms we want our startGame function should call. for that we have added :
let gameTimerId = setInterval(startGame, 20);
Initially we have set a parameter birdBottom having the initial Bottom position of 100px ,means our bird will be 100 px above the ground.Now after every 20 ms we are decreasing the birdBottom by gravity(3 px) and set it as bottom style in bird div.We are just adding a constant left style to bird :220px. As our ground is moving it will seem our birds is flying , so actually we are changing the bottom value of the bird only.So let’s us add some more trouble for our bird. We will add obstacle which our bird have to cross.To create obstacle we are calling generateObstacle function . In this function we are creating an obstacle div from top and bottom, our obstacle will have constant left style of 500px. We want our obstacle to have bottom value multiple of 60 for that we are adding:
let randomHeight = Math.random() * 60;
so we are setting randomHeight as the bottom style in Obstacle. For top Obstacle we are adding bottom: obstacleBottom + gap(height of Sky (580)-height of Ground(150)=430).We are calling obstacle generate function after every 3 seconds .Now we have to make our obstacle movable for that we are calling moveObstacle function for every 20 ms. In our moveObstacle function we are adding a default left styling of 500px and decreasing the left value by 2px for both obstacle and topObstacle. So after some time we want our Obstacle to be disappear , for that we are checking if obstacleLeft value is less than -60 means it’s going outside our game screen , we are removing the child obstacle and topObstacle from our Dom. So now our ground is moving , our obstacle is generating and disappearing when it’s going outside of our game screen , and gravity is also getting applied to our bird. Now let’s help our bird to fly through all obstacles.For that we are adding control and jump function.In control function we are calling jump whenever the user press spacebar in keyboard.In jump function we are checking if birdBottom is less than 500 , we are adding 50px to the bottom style of our bird.Now let’s define our game over rule.
if (
(obstacleLeft > 200 &&
obstacleLeft < 280 &&
birdLeft === 220 &&
(birdBottom < obstacleBottom + 153 ||
birdBottom > obstacleBottom + gap — 200)) ||
birdBottom === 1
)
We want our game should get over when our birds height is less than (obstacle +153) and greater than (obstacle+gap-200).Our bird’s width is 60px , the left style of our obstacle is 500px , and left style of our bird is 220px, so the if the left value of our obstacle is in between 200- 280 , it means our bird is cross over our obstacle(birds width(60) + left for bird(220)=280(500(left for obstacle)-left for bird(220)). So at that time if our birdBottom <obstacleBottom(let 60) +150(Ground Height) then it will hit the ground obstacle and if our birdBottom >obstacleBottom(let 60)+gap(430)-200(50(birds height)+ground height(150)) it will hit the top obstacle which will be a game over . Or at any time if birdBottom ===0 means Bird hits the ground then also our game will be over .So on gameOver we are clearing interval of timerId , it will stop calling moveObstacle , means our Obstacle will stop moving. Now in gameOver() function we are clearing the interval of gameTimerId, means we are stop calling the startGame ,means creating of obstacle will stop, then we are setting the value isGameOver to true , then we are removing event listener of keyup which was calling control function, and lastly we are removing ground-moving classname from our ground div and adding the ground class to it so that the ground stop moving. So we are actually indicating our player that game is over by just stopping everything which was moving .Now let see the index.css file:
So our flappy bird game is up and running. Let see how it looks like:
So this is our Flappy Bird Game ,you can play through it and can add dynamic score or a popup after game is over showing the final score. We have developed basic required functionality of Flappy Bird in this article. I am adding a video link and my github link as the reference of this article:
Video:
Code:
HAPPY CODING…:)
