<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Simon dice</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<style>
* { -moz-box-sizing:border-box; box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
}
#simon {width:420px;}
#simon div {width:200px;height:200px;float:left;margin:5px;opacity:0.5;}
#simon div:hover {border:5px solid #000;cursor:pointer;}
.showColor {opacity:1!important;}
#verde {background-color:green;}
#rojo {background-color:red;}
#amarillo {background-color:yellow;}
#azul {background-color:blue;}
#verde:active {opacity:1!important;}
#rojo:active {opacity:1!important;}
#amarillo:active {opacity:1!important;}
#azul:active {opacity:1!important;}
#mensaje {margin-top:20px;}
</style>
<script>
// historial contendra un array con los colores a pulsar
var historial=Array();
// pulsado contendra un array con los valores pulsados por el usuario
var pulsado=Array();
// esta variable define cuando el usuario puede empezar a jugar
var jugando=false;
$(document).ready(function(){
// Evento que se ejecuta cuando se pulsa el botón para empezar a jugar
$("input[type=button]").click(function(){
// inicializamos el array del historial
historial=Array();
// Indicamos que inicie un nuevo movimiento
nuevoMovimiento();
});
// Evento que se ejecuta cuando se pulsa sobre uno de los cuadros
$("#simon div").click(function(){ if(jugando)
{
// Añadimos la pulsacion al array pulsado
pulsado.push($(this).index());
// Verificamos que nuestra pulsacion sea correcta
// Esta funcion nos devuelve:
// 1 Todos los colores pulsados son correctos y hay que mostrar un nuevo color
// 2 Todos los colores pulsados son correctos pero todavia falta pulsar mas colores
// 0 Ha habido un error
verificacion=verificarPulsacion();
if(verificacion==1)
{
// Todo va bien, añadimos un nuevo movimiento
nuevoMovimiento();
}else if(verificacion==0){
// El usuario se ha equivocado, mostraremos el error
mostrarError();
}
}
});
});
/**
* Esta funcion genera un nuevo color
*/
function nuevoMovimiento()
{ jugando=false;
$("#mensaje").html("Mostrando los colores..."); pulsado=Array();
var nuevoMovimiento=Math.floor(Math.random()*4)
historial.push(nuevoMovimiento);
$("#movimientos").html(historial.length); mostrarColores(0);
}
/**
* Esta funcion muestra todos los colores que el usuario tendra que pulsar
* Recibe el indice del array de colores a mostrar
*/
function mostrarColores(indice)
{ $("#simon div").removeClass("showColor") if(historial[indice]>=0)
{ $("#simon div:nth-child("+(historial[indice]+1)+")").addClass("showColor"); setTimeout(function(){ocultarColores(indice+1)},800); }else{ jugando=true;
$("#mensaje").html("Ya puedes empezar..."); }
}
/**
* Esta funcion forma parte del proces de mostrar los colores mostrarColores()
* Esconde el color
*/
function ocultarColores(indice)
{ $("#simon div").removeClass("showColor") setTimeout(function(){mostrarColores(indice)},500); }
/**
* Esta funcion verifica las pulsaciones del usuario
* Devuelve:
* 1 Todos los colores pulsados son correctos y hay que mostrar un nuevo color
* 2 Todos los colores pulsados son correctos pero todavia falta pulsar mas colores
* 0 Ha habido un error
*/
function verificarPulsacion()
{ for(var i=0;i<historial.length;i++)
{ if(pulsado.length>i)
{ if(historial[i]!=pulsado[i])
{ return 0;
}
}else{ return 2;
}
}
if(pulsado.length==historial.length)
return 1;
return 2;
}
/**
* Esta funcion muestra los colores que se tenia que haber pulsado y los
* colores que el usuario ha pulsado
*/
function mostrarError()
{ var colores=["verde", "rojo", "amarillo", "azul"];
var cadenaColores=" | ";
var cadenaColoresPulsados=" | ";
for(var i=0;i<historial.length;i++)
{ cadenaColores+=colores[historial[i]]+" | ";
}
for(var i=0;i<pulsado.length;i++)
{ cadenaColoresPulsados+=colores[pulsado[i]]+" | ";
}
$("#mensaje").html("Te has equivocado, los colores eran:<br>"+cadenaColores+"<br>y tu has pulsado:<br>"+cadenaColoresPulsados); }
</script>
</head>
<body>
<div id="simon">
<div id="verde"></div>
<div id="rojo"></div>
<div id="amarillo"></div>
<div id="azul"></div>
</div>
<div>
<br><input type="button" value="empezar/reiniciar">
<div><span id="movimientos">0</span> movimientos</div>
<div id="mensaje"></div>
</div>
</body>
</html>
