martes, 9 de febrero de 2016

Cuadrado mágico de 4 x 4




1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Se trata de colocar los números del 1 al 16 de tal manera que cada una de las filas sume lo mismo. Así como cada una de las columnas y las dos diagonales.
Todos los números tienen que colocarse y, por lo tanto, ninguno se puede repetir.
Una pista: Cada fila, cada columna, cada diagonal tiene que sumar 34.
Cuando se haya realizado, pulsamos el botón Enviar para comprobar que se ha resuelto correctamente. Si cuesta un poco, se puede pulsar alguno de los dos botones siguientes que proporcionan tres posiciones cada uno de ellos.
Si se necesita, se pulsa el botón Borrar que elimina los datos introducidos.

Este es el código de la página:
<!DOCTYPE html>
<html>
<head>
<title>Cuadrado mágico de 4 x 4</title>
<meta charset="UTF-8" />
<meta name="author" content="Ángel Puente" />
<link href="magico4x4.css" rel="stylesheet" type="text/css" />
<script src="magico4x4.js"></script>
</head>
<body>
<form id="myForm">
<table>
<tr>
<td><input id="a1" value="16"></td>
<td><input id="a2" value="5"></td>
<td><input id="a3"></td>
<td><input id="a4"></td>
</tr>
<tr>
<td><input id="b1" value="2"></td>
<td><input id="b2"></td>
<td><input id="b3"></td>
<td><input id="b4"></td>
</tr>
<tr>
<td><input id="c1"></td>
<td><input id="c2"></td>
<td><input id="c3"></td>
<td><input id="c4"></td>
</tr>
<tr>
<td><input id="d1"></td>
<td><input id="d2"></td>
<td><input id="d3"></td>
<td><input id="d4"></td>
</tr>
<tr>
<td><button type="button" class="myButton" onclick="comprobar()">Enviar</button></td>
<td><button type="button" class="myButton" onclick="ayuda1()">Ayuda 1</button></td>
<td><button type="button" class="myButton" onclick="ayuda2()">Ayuda 2</button></td>
<td><button type="button" class="myButton" onclick="formReset()">Borrar</button></td>
</tr>
<tr>
<td colspan="4" align="center"><p id="demo"></p></td>
</tr>
</table>
</form>
Comentarios:
En primer lugar, he diseñado una tabla de 4 x 4 y en cada una de sus celdas he colocado un input para recibir al número correspondiente.
Antes he declarado estos inputs dentro de un formulario form myForm para poder referenciarlo de golpe.
Para tener una única solución he fijado tres posiciones y esto lo he resuelto con la atributo value:
<input id="a1" value="16">
Cada uno de los inputs lleva un id, un identificador, que lo hago corresponder con a, b, c, d para las filas y 1, 2, 3 y 4 para las columnas. Así: a1, a2, a3, a4, b1, b2, b3,...
En la penúltima fila coloco los cuatro botones interactivos.
El primero es el que realizará la función de comprobar si el resultado se ajusta a lo esperado.
El segundo proporciona una ayuda consistente en la solución de tres posiciones del cuadrado.
El tercero es similar: proporciona la solución de otros tres números.
El cuarto es el encargado de borrar los datos introducidos.
En la última fila se mostrará el mensaje de éxito o de revisión que hemos extendido a lo largo de toda la fila-
El código javascript lo he guardado en el documento externo, magico4x4.js.
Este es el código:
function formReset()
{
document.getElementById("myForm").reset();
}

 function comprobar() {
    var va1, va2, va3, va4, 
    vb1, vb2, vb3, vb4, 
    vc1, vc2, vc3, vc4, 
    vd1, vd2, vd3, vd4, 
    text;  
    va3 = document.getElementById("a3").value;
va4 = document.getElementById("a4").value;
vb2 = document.getElementById("b2").value;
vb3 = document.getElementById("b3").value;
vb4 = document.getElementById("b4").value;
vc1 = document.getElementById("c1").value;
vc2 = document.getElementById("c2").value;
vc3 = document.getElementById("c3").value;
vc4 = document.getElementById("c4").value;
vd1 = document.getElementById("d1").value;
vd2 = document.getElementById("d2").value;
vd3 = document.getElementById("d3").value;
vd4 = document.getElementById("d4").value;
    if (va3 !=9 || va4 !=4 || vb2 !=11 || vb3 !=7 || vb4 !=14 || vc1 !=3 || vc2 !=10 || vc3 !=6 || vc4 !=15
|| vd1 !=13 || vd2 !=8 || vd3 !=12 || vd4 !=1) {
        text = "Hay algún error o faltan datos.";
    } else {
        text = "¡MUY BIEN, FANTÁSTICO!";
    }
    document.getElementById("demo").innerHTML = text;
}
function ayuda1(){
va4 = document.getElementById("a4").value = 4;
vb3 = document.getElementById("b3").value = 7;
vc2 = document.getElementById("c2").value = 10;
}
function ayuda2(){
vd1 = document.getElementById("d1").value = 13;
vd2 = document.getElementById("d2").value = 8;
vd4 = document.getElementById("d4").value = 1;
}
Comentarios:
La primera función declarada es la función de borrar, el formReset() todos los datos introducidos en el formulario myForm.
La segunda función es la que comprueba si los datos introducidos por el usuario son los correctos.
Para ello declaramos las variables que se corresponden con la posición de las celdas por filas y columnas con la v delante.
va1, va2, va3, va4, vb1, vb2, vb3, vb4, vc1, vc2,...
Y recojo en esas variables (datos de todas las celdas menos las tres ya mostradas) los datos que introduzca el usuario.
vc3 = document.getElementById("c3").value;
También declaramos la variable txt que recogerá el mensaje que se mostrará en la última fila de la tabla.
Luego establecemos un if.
Si alguna de las variables no es igual a lo que se espera, el text se cargará con el mensaje de que no es correcto o faltan datos.
En caso del else, el text será el mensaje de éxtio.
Las funciones ayuda1() y ayuda2() colocan los números que sirven como ayuda a la resolución del cuadrado mágico.
Las cuestiones de estilo las hemos colocado en el archivo magico4x4.css:
body { 
margin-left:30px; margin-top: 30px; margin-right: 50px;
}

 input{
  padding: 10px;
  border: solid 5px #c9c9c9;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px #707070;
  transition: box-shadow 0.3s, border 0.3s;
  text-align:center;
  width:50px;
  height:50px;
  font-size:40px;
}
.myButton {
-moz-box-shadow:inset 0px 0px 14px -3px #f2fadc;
-webkit-box-shadow:inset 0px 0px 14px -3px #f2fadc;
box-shadow:inset 0px 0px 14px -3px #f2fadc;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dbe6c4), color-stop(1, #9ba892));
background:-moz-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:-webkit-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:-o-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:-ms-linear-gradient(top, #dbe6c4 5%, #9ba892 100%);
background:linear-gradient(to bottom, #dbe6c4 5%, #9ba892 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbe6c4', endColorstr='#9ba892',GradientType=0);
background-color:#dbe6c4;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #b2b8ad;
display:inline-block;
cursor:pointer;
color:#757d6f;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #ced9bf;
width:100%;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9ba892), color-stop(1, #dbe6c4));
background:-moz-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:-webkit-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:-o-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:-ms-linear-gradient(top, #9ba892 5%, #dbe6c4 100%);
background:linear-gradient(to bottom, #9ba892 5%, #dbe6c4 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ba892', endColorstr='#dbe6c4',GradientType=0);
background-color:#9ba892;
}
.myButton:active {
position:relative;
top:1px;
}
p{
font-weight: bold; 
font-size:22px;
color: #777777; 
font-family: Arial, Verdana, sans-serif;
}

El estilo de los botones lo he obtenido en esta página.
Publicado por en
Etiquetas: , , ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)