Flappy bird flew into an endless pipe zone (or is it?) and needs help flying through to get out.
A simple side-scrolling game where the player controls a bird to fly between pipes without hitting them. Flying between each set of pipes scores 1 point and hitting them or the ground ends the game. See how long you can last and set records.
Here's a link to the game: https://noanonoa.github.io/flappy-bird/
- HTML/CSS on canvas
- JavaScript for game logic
(src: google images)
(src: https://www.spriters-resource.com/fullview/59894/)
(src: https://www.sounds-resource.com/mobile/flappybird/sound/5309/)
- start the game with a 'press button'
- bird falls default to gravity
- bird flies to 'click' (might be better for mobile capabilities)
- pipes spawn top and bottom and scroll to the left
- track score
- end game on collision
- animate bird
- add sounds for scoring, flying, and collision
- a customized theme
- game is animated while waiting for player to start game
- night time / day time
- add a running time to display
- make the game web responsive
- container for gaming screen
- game title
- game screen
<canvas>
- centered game title
- centered game screen
- specify canvas size
- draw bird image
- top pipe image
- constant gap between pipes
- bottom pipe image
- score tracker
- ready screen: game state 0
- game over screen: game state 2
- background image
- ground image
- sounds on flying, collision, scoring, falling, and game over screen
- start game: game state 1
- start on 'click' (mobile compatible)
- spawn set of pipes with constant gap
- if statement triggering at x-coordinate
- bird's movement
- gravity: bird's y-coordinate increases to fall
- velocity's value is incremented by gravity constant
- bird's position function updates velocity's value
- flying: bird's y-coordinate decreases to fly on 'click'
- eventListener 'click' (also enabled 'spacebar')
- rotate bird upward each time it flies (smells like a challenge)
- animation object / array of images to flip through
- a drawing function to animate game
- place images and loop
- pipes' x-coordinates decrease to scroll left
- increment score by 1 upon passing pipe
- pipes' y-coordinates are generated randomly
- draw background
- draw bird
- Game Over: game state 2
- collision with pipes
- collision with floor and canvas ceiling
- cut screen
- restart game on 'click' start button
- display best score
- display current score
- reset score on start game
- reset pipes
Working with generated images of rectangles
fillRect()was proving to be more work than actually drawing canvas images from a sprite image source. This meant working with images from the beginning would just make things simpler in the long run.
Incrementing gravity to increase velocity was crucial to the feel of the game. It made the bird falling feel natural and is an important concept to learn. Flapping, or flying, meant setting the velocity to fly key-value which doesn't translate well when reading code.
Infinite pipe spawning has been a road block for me. Animating canvas images seem even more challenging.
Tracking the score was challenging due to the fact that each place value of the number had to correlate to an image of its value. No texts and fonts were used in the game.
Overall, I learned a lot of canvas tools and mechanics for JavaScript. Re-creating this game was a lot of fun and good training for various JavaScript fundamentals such as loops, functions, if-else statements, arrays, objects, and concepts.