MammothInteractiveFlappyBirdClone
Very simple Flappy bird clone from a tutorial by Mammoth Interactive
Table of Contents
Overview
This is a pretty simple Flappy Bird clone made in JavaScript that only has the most basic collison detection. This is based on the tutorial by Mammoth Interactive, but I added comments so that I can come back to this and make updates later.
Planned improvements include:
- Separating html, js and css
- Random generation of obstacles
- Increasing difficulty as the game goes on
- Scoring system & scoreboard
The idea
- Flappy Bird Clone
- Draw the canvas, obstacles and player
- Control the player by pressing the W and S keys
- Generate obstacles and have them move across the screen
- Detect when the player collides with an obstacle and reload the game
Screenshot
My process
Built with
- JavaScript
- HTML 5
- JSitor
What I learned
Many thanks to Mammoth Interactive for their tutorial for this process. This was a good, simple tutorial for introducing the HTML 5 canvas and learning some of its basic functionality. The tutorial uses an array of randomly generated rectangle obstacles and updates their position at a set interval. Once they reach the end, they respawn on the other side of the canvas.
Continued development
- January 20, 2023
- I finished the tutorial.
- Added comments to my code to make it easy to come back
- Added screenshot, and active link to deployment
- February 13, 2023
- Created plans for future updates
- April 3, 2023
- Split apart JS from HTML
- Changed file name to index for direct link to project
- added Title, meta tags for mobile support and Bootstrap5 link code
Useful resources
- W3Schools CSS Reference Sheet - Very handy resource!
- Build Websites with JavaScript for Absolute Beginners - Great tutorial with lots of information that I got on HumbleBundle.
- JSitor - Awesome website for quickly writing JS, HTML & CSS
Author
- Website - GitHub/ravenloue
- LinkedIn - Brandie Mallard
- Twitter - @ravenloue