A web-based tribute to some of the most popular mobile games from the recent past.
A mash up of Flappy Bird, Angry Birds and Candy Crush. If you like this mashup go and download Angry Birds and Candy Crush (you can't get Flappy Bird anymore!).
It is responsive and has been tested on Andriod 4.0 (latest Chrome), iOS 6 (iPhone and iPad) and desktop (latest Chrome and Firefox).
This application is pure HTML/CSS/JavaScript so just copy the files from this repo as is and serve them from any HTTP server.
Because of browser security this application must be served up from an HTTP server rather than load from a file://... url.
If you want to develop this application further there are a couple of scripts in the "dev" directory that might help you:
- "audioSprite.sh" - combines all audio files in assets/sfx/*.wav into a single audio sprite as assets/sfxSprite.wav. Assumes you have the "ffmpeg" command line utility already installed.
- "server.sh" - starts a modified version of the python SimpleHTTPServer that disables browser caching. If you are running Mac OSX or Linux then you should have python already installed.
The "native" way to run an HTML application on Android is to use a WebView, which is basically a web rendering engine packaged as part of Android.
An interesting challenge is that WebView has different capabilities - and therefore different behaviour - depending on the version of Android. e.g. WebView in one version of Android may support the HTML4 LocalStorage API while WebView in a different version of Android may not support it.
One solution to this challenge is to use crosswalk, an embeddable web rendering engine based on Chromium. By embedding crosswalk into your Android application you will have consistent behaviour across most versions of Android (some APIs may not work due to hardware limitations), but at the cost of a much larger application size. e.g. Angry Flappy Bird Crush + crosswalk has a storage size of 70 MB versus Flappy Bird which has a 2.5 MB storage size.
If storage size is not a concern then read on.
To package Angry Flappy Bird Crush as an Android application using crosswalk do the following:
- Install and configure python, java, ant, the android sdk and the crosswalk "Android (ARM + x86)" application template - Linux/Mac setup or Windows setup
- Make sure you can deploy to an Android device or emulator
- Build and run the application. i.e.
a. Go to the unpacked Crosswalk Android directory
cd ~/tools/crosswalk-9.38.208.1
b. Package the application
python make_apk.py --package org.angryflappybirdcrush --manifest ~/projects/angry-flappy-bird-crush/manifest.json --verbose
c. Install the application on the target device:
adb install -r Angryflappybirdcrush_1.0.0_arm.apk
As usual I stand on the shoulders of giants. This game would not have been possible without:
- codevinsky's Phaser 2.0 Flappy Bird Tutorial source which provided much of the application structure and logic using...
- Phaser, the awesome HTML5 2D game framework
- Don't Touch My Birdie
- Handle a pause screen with Phaser
- PT Banana Split is the freeware font used by Candy Crush
- RequireJS helps keep the application nice and modular
- Font.js enables preloading of web fonts
Some mobile devices (seems to be most of the Android mobile devices) do not support the HTML5 WebAudio API, even if they are running the latest version of Chrome. There are a couple of consequences to this:
- Multiple audio tracks cannot be played concurrently. e.g. background music + a sound effect
- If you attempt to load and play multiple audio tracks - such as multiple sound effects - only the first audio track will successfully play.
So for devices that do not support the WebAudio API this game will:
- Play only sounds effects (no background music!)
- Uses an audio sprite to successfully play all of the sound effects. (To reduce complexity the audio sprite is used whether or not the WebAudio API is supported.)
A good summary of the state of WebAudio support on multiple devices can be found here.