Build Flappy Bird Game with Javascript/CSS in an hour (தமிழில்)(Tamil) - Part 7 Bird Jump
In this video, we will learn how to build a basic version of the famous game Flappy Bird and learn some Javascript and CSS while at it.
We will not be using any external library for this, just plain HTML, CSS, and Javascript.
Code
https://github.com/coderice-local/fla...
Concepts covered
1. how to load CSS and javascript in HTML - script, the link tag
2. how to position an item in CSS - relative, top, left
3. how to interact with element in javascript - getElementById, getComputedStyle
4. animation in CSS using keyframes
5. animation in javascript using margins
6. run a loop using setInterval
Steps
1. Create elements - Pipe, bird, pipe gap
2. Animation
3. Random pipe gap
4. Bird gravity effect
5. Bird Jump
5. Detect collision
5.1 ground collision
5.2 pipe collision
6. Score calculation
7. Code cleanup