Flappy Bird – Browser Arcade Game

🎯 Problem Statement

Many simple games require installation, large files, external game engines, or additional software before users can play them. I wanted to create a lightweight arcade game that could run directly inside a web browser on desktop and mobile devices. The purpose of this project was to recreate the main Flappy Bird gameplay mechanics while learning how JavaScript handles animation, gravity, movement, collision detection, scoring, user input, and game-state management.

🛠️ What I Built

I built a browser-based Flappy Bird game using HTML, CSS, and JavaScript. The player controls a flying bird and must guide it through gaps between moving pipes. The player earns one point whenever the bird successfully passes a pipe. The game ends when the bird touches a pipe, the ground, or the upper boundary of the screen. The game runs inside an HTML5 Canvas and does not require a backend, database, account, external library, or game engine. Full-Screen Game Layout I created a full-screen design that automatically uses the available browser width and height. The Canvas resizes according to the device screen, while the pipe gap, ground height, bird position, and score size adjust responsively. This allows the game to work on desktop computers, tablets, and mobile devices. Bird Movement and Gravity The bird continuously moves downward because of gravity. When the player performs a flap action, the bird receives upward velocity. Gravity then gradually pulls it downward again. The bird also rotates based on its movement: It tilts upward while flying It gradually rotates downward while falling It faces downward after a collision This produces a smoother and more realistic flying effect. Game Controls The player can control the bird using: Space key Arrow Up key Mouse click Touchscreen tap This makes the game playable on both desktop and mobile devices. Pipe Generation Pipe pairs are generated automatically from the right side of the screen. Each pipe pair contains: A top pipe A bottom pipe A playable gap between them A randomly selected vertical position The randomized pipe heights make every game different. The pipes continuously move from right to left and are removed after leaving the visible screen. Collision Detection I implemented collision detection between the bird and: Top pipes Bottom pipes Ground Top screen boundary The system compares the bird’s position and radius with the pipe and screen boundaries. When a collision is detected, the game changes from the playing state to the game-over state. Scoring System The player receives one point after successfully passing through a pair of pipes. Each pipe contains a flag to ensure that it only awards a point once. The current score is displayed prominently during gameplay. After the game ends, the game-over screen displays: Final score Best score for the current session Game States I implemented three main game states: Start Playing Game Over The start screen displays the game title and the instruction to tap or press a control to fly. During gameplay, the start screen disappears and the animation begins. After a collision, the game-over screen appears and displays the score. The player can then tap or press a control to restart. Animation Loop The game uses requestAnimationFrame() to continuously: Update bird movement Apply gravity Move pipes Check collisions Calculate scores Draw the background Draw the bird Draw the pipes Draw the ground Display the score This creates smooth browser-based animation. Visual Design I created the game graphics directly with JavaScript and the Canvas API. The game includes: Sky background Green pipes Ground area Animated bird Bird wings, eyes, and beak Large responsive score Start screen Game-over screen The design was kept clean and focused so that the player’s attention remains on the gameplay. AI-Assisted Development I used Z.ai to help create the initial game structure and core functionality. The five main prompts used in Z.ai were: Create a simple Flappy Bird game using HTML, CSS, and JavaScript. Make the game full-screen and remove unnecessary background styling. Add keyboard controls so the bird flies when the user presses Space or Arrow Up. Add pipe movement, collision detection, score system, and game-over screen. Improve the game layout and make it suitable for publishing on GitHub Pages. I used MiniMax to review and improve the game. The three main prompts used in MiniMax were: Improve the visual design of the Flappy Bird game and make it look cleaner. Suggest changes to make the gameplay smoother and more user-friendly. Review the game logic and suggest improvements. After receiving AI-generated suggestions, I manually reviewed, tested, and adjusted the project. Changes Made After Using AI After using AI, I: Reviewed the generated code Improved the game design Made the game full-screen Removed unnecessary background styling Improved the keyboard controls Added touchscreen support Adjusted gravity and jump strength Improved the pipe layout Tested collision detection Tested the scoring system Tested the game-over and restart flow Confirmed that the game worked on the live URL Uploaded the project to GitHub Published it using GitHub Pages Deployment I uploaded the source code to a public GitHub repository and deployed the game using GitHub Pages. The project is a static browser application, so it can run directly from GitHub Pages without a backend server.

🔥 Challenges I Faced

Challenges One of the main challenges was balancing gravity and jump strength. If gravity was too strong, the bird fell too quickly. If the jump strength was too high, controlling the bird became difficult. I had to adjust both values to make the gameplay challenging but playable. Another challenge was collision detection. The game needed to detect whether the bird touched: The upper pipe The lower pipe The ground The top of the screen The collision calculation had to use the bird’s complete radius rather than only checking its centre position. Random pipe generation was also challenging. The gap had to appear at different heights while remaining fully visible and playable on screens of different sizes. Other challenges included: Making the game full-screen Supporting different screen resolutions Adding keyboard, mouse, and touch controls Preventing the same pipe from increasing the score more than once Managing start, playing, and game-over states Restarting the game correctly Removing old pipes from memory Keeping the animation smooth Drawing the bird and pipes with Canvas Resizing the game without breaking its layout Testing the game on GitHub Pages Keeping all HTML, CSS, and JavaScript inside one file

💡 What I Learned

AI helped produce the initial structure and suggest improvements, but I had to verify the controls, gameplay, collision logic, layout, live deployment, and user experience myself

🚀 Future Improvements

Future Improvements In future versions, I would add: Sound effects for flapping, scoring, and collisions Background music Persistent high scores using Local Storage Difficulty levels Increasing pipe speed Smaller pipe gaps at higher scores Start menu Pause and resume controls Dedicated mobile control button Better bird-wing animation Particle effects Day and night themes Different background themes Multiple bird skins Achievement badges Score milestones Online leaderboard Player profiles Multiplayer score challenges Custom difficulty settings Full-screen toggle Progressive Web App support Offline installation Accessibility settings Improved code modularity Separate HTML, CSS, and JavaScript files Automated game tests A particularly useful improvement would be saving the best score in Local Storage. The current best score is retained during the active browser session but resets when the webpage is refreshed. The long-term goal would be to turn the project into a polished mobile-friendly arcade game with persistent scores, sounds, themes, difficulty levels, and online leaderboards.

🧰 Tech Stack & AI Tools

🤖 AI Reviewer Feedback

Great job delivering a fully functional, responsive Flappy Bird clone with clean graphics and multiple input methods. To strengthen the project, consider separating concerns by modularizing the code (e.g., separate files or classes for bird, pipes, and game logic) and adding persistent high scores or sound effects for richer gameplay. Also, enrich the README with setup instructions, code architecture overview, and any known limitations.