Código Javascript
:
Ver original<style>
.capa{
border: 1px solid black;
float: left;
width: 25px;
height: 25px;
margin: 3px;
}
.capaPrincipal{
background:#0033FF ;
position: absolute;
top: 100px;
left: 200px;
}
</style>
<script>
document.write('<div id="principal" class="capaPrincipal">');
var k=0;
var plantilla = Math.floor(Math.random()*3); //se multiplica por la cantidad de casos que voy a tenes//
switch (plantilla){
case 1:
numero=new Array(5,8,1,6,2,7,3,4,9,
2,1,3,4,9,6,8,7,5,
9,4,5,7,8,1,6,3,2,
6,3,2,8,4,9,5,1,7,
7,9,4,3,1,5,2,6,8,
1,5,6,9,7,8,4,2,3,
4,7,8,1,3,2,9,5,6,
3,2,9,5,6,4,7,8,1,
8,6,7,2,5,3,1,9,4);
break;
case 2:
numero=new Array(5,8,1,6,2,7,3,4,9,
4,7,8,1,3,2,9,5,6,
1,5,6,9,7,8,4,2,3,
9,4,5,7,8,1,6,3,2,
3,2,9,5,6,4,7,8,1,
6,3,2,8,4,9,5,1,7,
7,9,4,3,1,5,2,6,8,
2,1,3,4,9,6,8,7,5,
8,6,7,2,5,3,1,9,4);
break;
default:
numero=new Array(5,8,1,6,2,7,3,4,9,
6,3,2,8,4,9,5,1,7,
7,9,4,3,1,5,2,6,8,
1,5,6,9,7,8,4,2,3,
4,7,8,1,3,2,9,5,6,
3,2,9,5,6,4,7,8,1,
2,1,3,4,9,6,8,7,5,
9,4,5,7,8,1,6,3,2,
8,6,7,2,5,3,1,9,4);
break;
}
for(var i=1;i<=9;i++) {
for(var j=1;j<=9;j++){
var valor= numero[k];
// esto me permite saltear la cantidad de casilleros para mostrar algunos ocultos, es decir, vacios //
valor = valor%2 ? valor : "";
document.write('<div class="capa" id="capa_'+j+'_'+i+'">');
document.write('<input onchange="return validar('+j+','+i+','+k+');" type="text" id="nro_'+j+'_'+i+'" size="1" maxlength="1" value="'+ valor + '" class="capa" />');
document.write('</div>');
k++;
}
document.write('<div style="clear:both;"></div>');
}
document.write('</div>');
/*
k es la posicion del array
i son las filas
j son las columnas
*/
var cont=0;
function validar(j,i,k){
var input=document.getElementById("nro_"+j+"_"+i).value; //campo donde ingreso el valor y accedo//
if( input>0 && input<=9) {
if(input==numero[k]){
//alert(numero[k]);
cont++;
//alert(cont);
document.getElementById("nro_"+j+"_"+i).disabled=true;//una vez acertado el numero correcto, el disabled=true, desabilita el campo, es decir, no deja cambiarlo//
document.getElementById("capa_"+j+"_"+i).style.background="yellow";
if(cont==36)
alert("Sos un Genio Ganaste, preciona F5 para jugar de nuevo");
}
else{
alert("ingrese otro valor");
document.getElementById("nro_"+j+"_"+i).value="";//asigna valo vacio al campo//
document.getElementById("nro_"+j+"_"+i).focus();//en caso que se ingrese algo no deseable, me asigna la misma celda//
}
}
else{
alert("Ingrese un numero del 1 al 9")
document.getElementById("nro_"+j+"_"+i).value="";//asigna valor vacio al campo//
document.getElementById("nro_"+j+"_"+i).focus();//en caso que se ingrese algo no deseable, me asigna la misma celda//
}
//alert(input);
}
</script>