🐦Introducing the Flappy Bird Online Progressive Web App (PWA) 🐦
Last Updated -
Today I am thrilled to launch an online Progressive Web App (PWA) version of Flappy Bird.
Man this one is hard!
This is a web port of one of 2014's most popular games, Flappy Bird. It was originally created by Dong Nguyen and his company dotGEARS.
Game Play
The game is 2D scroller, which means the game board slides in from the right side and keeps moving. The object is to keep a little bird air born while navigating between a series of pipes. The pipe remind me of Super Mario and hang from the top and rise from the bottom.
Hit a pipe and your bird dies. Lose too much altitude and your bird dies.
Each pipe you pass earns you a point. My current high score is 2 pipes!
To make your bird jump or fly higher you can either hit the up button or tap anywhere on the screen. Press the button or tap the screen too hard and your bird will move too high.
If you can find a good balance you can fly your bird through the pipes and earn high score.
This game is difficult and addicting
The Source Code
I find it amazing how simple the code is for this full featured game. The game play code is all contained in the index.html file.
It does a reference 'polyfil' for JavaScript classes. I have used the same polyfil in recent years, so it is a Chris approved hack!
flappybird.Pipe = Class.extend({ //code goes here });The way the class polyfil works is you call Class.extend(), passing in your child class object. It returns a new object that composes members from the child and parent object.
I believe John Resign originally created the polyfil. It works much like Object.assign.
The service worker is registered after the game code. The service worker pre-caches the entire application, so it works offline.
I also added an appCache to make the game work in older browsers.
The PWA images were generated using the PWA Builder image generator.
You can clone or fork the flappy bird code on GitHub.
I have tried Flappy Bird PWA in multiple browsers and my Android, running Oreo. It does create the webAPK, so the game acts like a native app on Android.
Summary
Flappy Bird PWA is another in a series of Progressive Web Applications I have been launching to demonstrate how easy it is to make any web site a PWA. I also hope you are seeing just how much the web can do!
So far these have been very simple applications. Just wait there are more to come in the coming days! So be sure to sign up for my newsletter.
If you are new to Progressive Web Apps or want to learn more about creating your own PWA, you need to enroll in my course: Progressive Web Apps (PWA) From Beginner to Expert. Save 85% off the list price! Right now it is only $29 (US), $171 off the regular $200 price.
The course has over 21 hours of video content and more planned in the coming days. So be sure to enroll and start your PWA journey now!