Jugando Flappy Bird en la web con jQuery y HTML 5 Canvas-floppy Bird

Tiempo de ejecución: 30 minutos. Empezar

Autor:
Views Total: 4,306
Sitio oficial: Ir a la web
Actualizado: February 18, 2014
Licencia: Apache 2.0

Vista prévia

Jugando Flappy Bird en la web con jQuery y HTML 5 Canvas-floppy Bird

Descripción

Floppy Bird es un clon de la aplicación de juego más popular del mundo ' Flappy Bird ' que se construyó en la parte superior de jQuery y HTML Canvas Elements. Le permite crear una aplicación web que permite al visitante reproducir directamente el ' Flappy Bird ' en la Web.

Funcionamiento

Agregue los archivos CSS requeridos en la sección Head de su documento.

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

Agregue los archivos de biblioteca de JavaScript necesarios al final del documento.

<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>

La estructura de marcado para crear un juego de Flappy Bird en la 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>

Diviértete con él.

 

Te puede interesar: