Bubble traps jQuery (Game demo)

Quick start

1.- Include the files

            <!-- 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.- Create HTML Element (Items Game)

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

3.- Create HTML Element (Points Game)

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

4.- Create HTML Element (Controls Game)

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

5.- Call the the plugin on a container as your wish

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

6.- All done!

Options

you can custom by passing options when call the plugin, all available options are listed below. call the the plugin on a container wish you wish

      $('#game').BubbletrapsjQuery({
                    option: value,
                    option2: value2
       });
                 
               

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