Simon, el juego

index.html

<div class="container-fluid juego"  ondragstart="return false;" ondrop="return false;">
  <div class="panel-simon">
    <div class="botonMusical clickeable" id="boton-verde"></div>
    <div class="botonMusical clickeable" id="boton-rojo"></div>
    <div class="botonMusical clickeable" id="boton-amarillo"></div>
    <div class="botonMusical clickeable" id="boton-azul"></div>
  </div>
  <div class="panel-central container-fluid">
      <row>
        <h1 class="col-xs-12">Simon</h1>
      </row>
      <row>
        <div class="panel-enJuego  container-fluid">
          <row>
            <input type="text" id="puntos" disabled="disabled" class="col-xs-4 puntosApagado"/>
            <button type="button" id="btnStart" class="col-xs-2 col-xs-offset-1" onclick="setearJuego()"></button>
            <div id="btnEstrictoEstado" class="estrictoApagado col-xs-1 col-xs-offset-1"></div>
            <button id="btnEstricto" class="col-xs-2 col-xs-offset-2" onClick="cambiarEstadoEstricto()"></button>

          </row>
          <row>
            <p class="col-xs-4">PUNTOS</p>
            <p class="col-xs-2 col-sm-offset-1">JUGAR</p>
            <p class="col-xs-2 col-sm-offset-1">ESTRICTO</p>
          </row>
        </div>
      </row>
      <row>
        <div class="panel-switch"> 
          <p>OFF</p>
          <div id="switch">
            <div class="sw sw-izq"></div>
            <div class="sw sw-der"></div>
          </div>
          <p>ON</p>
        </div>
      </row>

    </div>
</div>

script.js

var encendido = false;
var estricto = false;
var botonesMusicales = new Array(4);
var secuenciaBotones = [];
var puntos=0;
var esJugador=false;
var botonApretado=false;
var contadorBotonesApretados=0;
var audioActual;

$(document).ready(function(){
  cargarBotonesMusicales();
  $("#puntos").val("- -");
  $("#switch").on("click", switchOnOff);
  $(".clickeable").on("mousedown",eventoApretarBoton);
  $(".botonMusical").removeClass("clickeable");
  $(document).on("mouseup",eventoSoltarBoton);
});

function chequearBotonApretado(){
  contadorBotonesApretados++;
  var nombreBoton = $(botonApretado).attr("id");
  var numeroBoton = getNumeroBotonPorNombre(nombreBoton);
  if (numeroBoton != secuenciaBotones[contadorBotonesApretados-1]){
    audioActual.pause();
        audioActual = new Audio("http://www.astrosurf.com/luxorion/Documents/electricshock.wav");
    audioActual.play();
    contadorBotonesApretados = 0;
    setNoEsJugador();
    setTimeout(eventoSoltarBoton,100);
    var tiempo = simularCargarPuntos("! !");
    if (estricto){
      setTimeout(setearJuego,tiempo);
    }else{
      setTimeout(turnoMaquina,tiempo);
    }
  }else if (contadorBotonesApretados == puntos){
    if (puntos == 20){
      setJuegoGanado();
    } else{
      contadorBotonesApretados = 0;
      setNoEsJugador();
      agregarNuevaSecuencia();
      setTimeout(eventoSoltarBoton,500);
      setTimeout(turnoMaquina,700);    
    }

  }
}
function setJuegoGanado(){
  var intervalo = setInterval(function(){ 
    if (contadorBotonesApretados!=0){
          $("#puntos").val("* *"); 
    }
    setTimeout(function(){ 
      if (contadorBotonesApretados==0){
        clearInterval(intervalo);
      } else{
        $("#puntos").val(""); 
      }
    }, 200);
  }, 400);
  setNoEsJugador();
  var idBoton = "#"+$(botonApretado).attr("id");
  eventoSoltarBoton();
  var t=0;
  for (var i=1; i<8; i++){
    t+=100;
    setTimeout(function(){eventoApretarBoton(idBoton);},t);
    t+=100;
    setTimeout(eventoSoltarBoton,t);
  }
}

function getNumeroBotonPorNombre(nombre){
  for (var i=0; i<botonesMusicales.length; i++){
    if (botonesMusicales[i][0] == nombre){
      return i;
    }
  }
}

function eventoApretarBoton(){
  if (encendido){
    if (esJugador){
      botonApretado = this;
      audioActual = getAudioBoton(this);
      audioActual.play();
      chequearBotonApretado();
      setearLuz(this,20);
    }else{
        if (typeof arguments[0] == "string"){
          botonApretado = arguments[0];
          setearLuz(arguments[0],20);
          getAudioBoton(arguments[0]).play();
        }
         
    }

  }
}
function eventoSoltarBoton(){
  if (encendido && botonApretado){
      setearLuz(botonApretado,-20);
      botonApretado = false;
  }
}
function setearJuego(){
  if (encendido){
    limpiarJuego();
    var tiempoCarga = simularCargarPuntos("- -");
    setTimeout(agregarNuevaSecuencia,tiempoCarga);
    setTimeout(turnoMaquina,tiempoCarga);
  }
}

function limpiarJuego(){
  secuenciaBotones = [];
  puntos=0;
  setNoEsJugador();
  botonApretado=false;
  contadorBotonesApretados=0;
}
function turnoJugador(){
  esJugador = cambiarEstado(esJugador);
  $(".botonMusical").addClass("clickeable");
}


function agregarNuevaSecuencia(){
  secuenciaBotones.push(Math.floor(Math.random()*4));
  puntos++;
  mostrarPuntos();
}
function turnoMaquina(){
  var t=0;
  //agregarNuevaSecuencia();
  for (var i=0; i<secuenciaBotones.length; i++){  
    t+=200;
    apretarBoton(t,i);
    t+=400;
    soltarBoton(t);
  }
  setTimeout(turnoJugador,t); 
  
  function apretarBoton(tiempo,numeroSecuencia){
    setTimeout(function(){
      var numeroBoton = secuenciaBotones[numeroSecuencia];
      var nombreBoton = botonesMusicales[numeroBoton][0];
      eventoApretarBoton("#"+nombreBoton);
    },tiempo);
  }
  function soltarBoton(tiempo){
    setTimeout(function(){
      eventoSoltarBoton();
    },tiempo);
  }
}

function setNoEsJugador(){
  esJugador=false;
  $(".botonMusical").removeClass("clickeable");
}
function simularCargarPuntos(salida){
  var tiempo = cargando();
  setTimeout(function(){
    mostrarPuntos();
  },tiempo*2);
  return tiempo*2;
  
  function cargando(){
    var t=0;
    for (var i=1; i<3; i++){
      setTimeout(function(){
        $("#puntos").val("");
      },t);
      t+=300;
      setTimeout(function(){
        $("#puntos").val(salida);
      },t);   
      t+=300;
    }
    return t;
  }
}
function mostrarPuntos(){
  var mostrar = puntos;
  if (puntos < 10){
    mostrar = "0" + puntos;
  }
  $("#puntos").val(mostrar);
}
function getAudioBoton(elemento){
  var nombreBoton = $(elemento).attr("id");
  for (var j=0; j<botonesMusicales.length; j++){
    if (botonesMusicales[j][0] == nombreBoton){ 
      return new Audio(botonesMusicales[j][1]);  
    }
  }
}
function cargarBotonesMusicales(){
  botonesMusicales[0]=["boton-verde","https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"];
  botonesMusicales[1]=["boton-rojo","https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"];
  botonesMusicales[2]=["boton-amarillo","https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"];
  botonesMusicales[3]=["boton-azul","https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"];
}

function setearLuz(elemento,luz){
  var color = $(elemento).css("background-color");
  color = color.replace(/[^0-9,]+/g, "");
  var rojo = color.split(",")[0];
  var verde = color.split(",")[1];
  var azul = color.split(",")[2];
  hsl = rgbToHsl(rojo, verde, azul);
  //console.log(hsl[0]);
  $(elemento).css("background-color","hsl("+hsl[0]+","+hsl[1]+"%,"+(hsl[2]+luz)+"%)");
}

function switchOnOff(){
  //Cambio color de botones switch
  if ($(".sw-der").css("background-color")=="rgb(0, 0, 0)"){
    $(".sw-izq").css("background-color","rgb(0,0,0)");
    $(".sw-der").css("background-color","hsl(240, 100%, 60%)");
  }else{
    $(".sw-der").css("background-color","rgb(0,0,0)");
    $(".sw-izq").css("background-color","hsl(240, 100%, 60%)");
  }
  
  //limpio juego y cambio color de pantalla puntos.
  if (encendido){
    limpiarJuego();
 $("#puntos").addClass("puntosApagado").removeClass("puntosEncendido");
    $("#puntos").val("- -");
    if (estricto){cambiarEstadoEstricto();}
  }else{
    $("#puntos").addClass("puntosEncendido").removeClass("puntosApagado");
  }
  encendido = cambiarEstado(encendido);
}

function cambiarEstado(estado){
  return (estado == false)? estado=true : estado=false; 
}

function cambiarEstadoEstricto(){
  if (encendido){
    estricto = cambiarEstado(estricto);
    if (estricto){
      $("#btnEstrictoEstado")
        .addClass("estrictoEncendido")
        .removeClass("estrictoApagado");   
    }else{    
      $("#btnEstrictoEstado")
        .addClass("estrictoApagado")
        .removeClass("estrictoEncendido");  
    }
  }
}

//funcion obtenida de usuario Pointy en stackoverflow
function rgbToHsl(r, g, b){
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }

    return [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)];
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Simon, el juego.markdown

Simon, el juego

Clásico juego de Simon donde el objetivo consiste en imitar la secuencia de botones musicales que se le va presentando.

Tecnologias utilizadas: HTML, CSS, Javascript, JQuery, Bootstrap.

A Pen by Juan on CodePen.

License.

style.css

body{
  background-image: url("http://i.stack.imgur.com/jGlzr.png");
  --evitar-seleccion:
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.panel-simon{
  margin-top:30px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  border:solid;  
  border-width:25px;
  width:500px;
  height:500px;
  border-radius:50%;
  position:absolute;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.botonMusical{
  display:inline-block;
  border-width:12.5px;
  width: 225px;
  height: 225px;
}
#boton-verde{
  background-color:hsl(120, 100%, 30%);
  border-right:solid;
  border-bottom:solid;
  border-width:12.5px;
  margin-right:0;
  margin-bottom:0;
  border-top-left-radius: 100%;
}
#boton-rojo{
  float:right;
  background-color:hsl(0, 100%, 30%);
  margin-left:0;
  margin-bottom:0;
  border-left:solid;
  border-bottom:solid;
  border-width:12.5px;
  border-top-right-radius: 100%;
}
#boton-amarillo{
  background-color:hsl(60, 100%, 30%);
  margin-right:0;
  margin-top:-5px;
  border-right:solid;
  border-top:solid;
  border-width:12.5px;
  border-bottom-left-radius: 100%;
}
#boton-azul{
  float:right;
  background-color:hsl(240, 100%, 30%);
  margin-left:0;
  margin-top:-5px;
  border-left:solid;
  border-top:solid;
  border-width:12.5px;
  border-bottom-right-radius: 100%;
}
.panel-central{
  margin: 0 auto;
  position: relative;
  margin-top: 161.25px;
  width: 250px;
  height: 250px;
  border:solid;
  border-radius:50%;
  border-width:12.5px;
  background-color:hsl(0, 0%, 85%);
  text-align:center;
}
.panel-switch p, #switch{
  display:inline-block;
}
.panel-central p{
  font-size:0.8em;
  --font-family: Charcoal;
  font-family: Consolas;
  font-weight:600;
}
.panel-switch{
  margin-top:0px;
}
.panel-switch p{
  font-size:0.75em;
  font-family: Consolas;
  font-weight:bold;
}
#switch{
  width:40px;
  height: 20px;
  border:solid;
  border-width:1px;
  background-color:black;
  cursor:pointer;
  border-radius:5%;
  margin-bottom:-5px;
}
.sw{
  display:inline-block;
  margin-top:3%;
  margin-bottom:3%;
  border-radius: 20%;
  width:40%;
  height:85%;
}
.sw-izq{
  margin-left:4%;
  background-color:hsl(240, 100%, 60%);
  float:left;
}
.sw-der{
  margin-right:2%;
  background-color:rgb(0,0,0);
  float:right;
}
.panel-enJuego{
  margin-top: 100px;
}
h1{
  font-size: 4em;
  font-family: Rockwell;
  font-weight: 700;
  margin-top:40px;
  text-shadow: 1px 1px #eee;
}
#puntos{
  --width:50px;
  height:35px;
  border-radius:20%;
  background-color:	#480000;
  box-shadow: 0 0 5px #333;
  text-align:center;
  font-weight:bold;
  font-size:1.4em;
  padding:0;
    --evitar-seleccion:
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.puntosEncendido{
  color:#E80000; 
}
.puntosApagado{
  color:#680000; 
}
#btnStart,#btnEstricto{
  border-radius:50%;
  --width:1px;
  height: 30px;
  --border:solid;
  box-shadow: 0 0 5px #333;
  margin-top:5px;
  padding-left:10px;
  outline: 0;
}
#btnStart{
  --padding: 5% 5% 5% 5%;
  --width:1px;
  background-color: hsl(0, 100%, 45%);
  margin-left:20px;
}

#btnEstrictoEstado{
  --padding: 5% 5% 5% 5%;
  --width:1px;
  --margin-top:-41px;
  margin-top:-10px;
  margin-left:35px;
  padding:0;
  padding-top:1px;
  border-radius:50%;
  border:solid;
  border-width:2px;
  height:10px;
  box-shadow: 0 0 5px #333;
}
.estrictoEncendido{
  background-color:hsl(0, 100%, 50%);
}
.estrictoApagado{
  background-color:hsl(0, 0%, 85%)
;
}
#btnEstricto{
  --padding: 5% 5% 5% 5%;
  --width:1px;
  background-color: hsl(60, 100%, 45%);
}
.panel-enJuego p{
  margin-left: -12px;
  margin-right:28px;
  margin-top:5px;
}
.clickeable{
  cursor:pointer;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />