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

Descarga : BubbletrapsjQuery

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

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

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

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

3.- Agregar el codigo(instancia del plugin)

$('#game').BubbletrapsjQuery();

4.- Modifica las opciones segun tu necesidad

 {
           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 */
	}

Contenido relacionado: