Playing Flappy Bird On The Web with jQuery and HTML 5 Canvas – Floppy Bird

Preview:

Description:

Floppy Bird is a clone of world’s most popular game app ‘flappy bird’ that built on top of jQuery and Html canvas elements. It allows you to create a web app that allows the visitor to directly play the ‘Flappy Bird’ on the web.

How to use it:

Add the required CSS files in the head section of your document.

<link href="css/reset.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">

Add the necessary javascript library files at the end of your document.

<script src="js/jquery.min.js"></script> 
<script src="js/jquery.transit.min.js"></script> 
<script src="js/buzz.min.js"></script> 
<script src="js/main.js"></script>

The markup structure to create a Flappy Bird game on the web.

<div id="gamecontainer">
<div id="gamescreen">
<div id="sky" class="animated">
<div id="flyarea">
<div id="ceiling" class="animated"></div>
<!-- This is the flying and pipe area container -->
<div id="player" class="bird animated"></div>
<div id="bigscore"></div>
<div id="splash"></div>
<div id="scoreboard">
<div id="medal"></div>
<div id="currentscore"></div>
<div id="highscore"></div>
<div id="replay"><img src="assets/replay.png" alt="replay"></div>
</div>
<!-- Pipes go here! --> 
</div>
</div>
<div id="land" class="animated">
<div id="debug"></div>
</div>
</div>
</div>

Have fun with it.