Plugin BubbletrapsjQuery para implementar un juego sencillo en html5, Bootstrap y jQuery


Plugin BubbletrapsjQuery para implementar un juego sencillo en html5, Bootstrap y jQuery, este plugin es una demostración de un juego sencillo en donde el usuario o visitante, puede presionar un botón y el objetivo es que cuando el botón sea presionado el color este en alguna estrella con un puntaje ya sea 1 o 5.

Este plugin tiene la flexibilidad de poder crear con una colección de imágenes, puedes personalizar el plugin y crear múltiples juegos de forma diferente cambiando las opciones.

Demostración del plugin :http://oscaruhp.github.io/BubbletrapsjQuery/

La forma de utilizar es la siguiente:

1.- Primero tenemos que incluir los archivos necesarios para el plugin que en este caso son bootstrap y jQuery

[html]
<!– Bootstrap and JQuery –>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery-2.1.4.min.js"> </script>

<!– Plugin –>
<link rel="stylesheet" href="BubbletrapsjQuery.css">
<script src="BubbletrapsjQuery.js"></script>
[/html]

2.- Posteriormente a esto tienes que poner el codigo (estructura de la siguiente forma), hay que mantener la estructura separada

[html]
<div class="col-md-12 text-center" id="game">
<img src="img/eb.png" alt="…">
<img src="img/eb.png" alt="…">
<img src="img/eb.png" alt="…">
<h1 >
<img src="img/1p.png" alt="…">
<img src="img/5p.png" alt="…">
<img src="img/1p.png" alt="…">
</h1>
<img src="img/eb.png" alt="…">
<img src="img/eb.png" alt="…">
<img src="img/eb.png" alt="…">
</div>
<div class="col-md-12" id="reemplazo" style="display:none">
<img src="img/em.png" id="SelectorPuntajeNulo">
<img src="img/eaz.png" data-points=5 id="SelectorPuntajeCentral">
<img src="img/ev.png" data-points=1 id="SelectorPuntajeLateral" >
<img src="img/er.png" id="SelectorVidas" >
</div>
<div class="col-md-12 text-center" >
<div class="col-md-4" >Vidas:
<h1 id="Vidas"></h1>
</div>
<div class="col-md-4" >
<button type="button" id="ControlStop" class="btn btn-danger btn-lg btn3d" style=" font-size: 29px;">
<span class="glyphicon glyphicon-asterisk"></span> Alto <span class="glyphicon glyphicon-asterisk"></span>
</button>
</div>
<div class="col-md-4" > Puntos:
<h1 id="puntajesJugador"></h1>
</div>
</div>
[/html]

3.- Agregar el codigo(instancia del plugin)

[javascript]
$(‘#game’).BubbletrapsjQuery();
[/javascript]

4.- Modifica las opciones segun tu necesidad

[javascript]
{
SelectorPuntajeNulo:"#SelectorPuntajeNulo", /* Point selector null*/
SelectorPuntajeCentral:"#SelectorPuntajeCentral", /* Selector center(5 Points) */
SelectorpuntajesJugador:"#puntajesJugador", /* Selector (ponits game) */
SelectorpuntajeVidas:’#SelectorVidas’,/* Selector image lifes points */
SelectorVidas:"#Vidas",/* Selector element (life points) */
SelectorControlStop:"#ControlStop",/* Selector Stop Button */
puntajeJugador:0,/* Point Start */
MaximoVidas:3,/* Manimun life (Numbers)*/
VelocidadFichas:60,/* Time (Change item) (Number)*/
VelocidadOrientacion:2000,/* Time (Change orientation) (Number)*/
sonidoFondo: new Audio(‘sonidos/fondo.mp3’),/* Sound Background */
sonidoAlto : new Audio(‘sonidos/stop.mp3’), /* Sound Stop */
sonidoPuntaje : new Audio(‘sonidos/pointCenter.mp3’), /* Sound Point */
sonidoPuntajeNulo : new Audio(‘sonidos/pointnull.mp3’)/* Sound Point Null */
}
[/javascript]

[adjuntos descripcion=”BubbletrapsjQuery” link=”github.com/oscaruhp/BubbletrapsjQuery/archive/gh-pages.zip”]