Rompecabezas URJC
Este es mi primer tutorial de como hacer un juego utilizando html, javascrip y css. El ejemplo del tutorial es: Programar un rompecabezas en 4 PASOS.
La idea de la función consiste, en crearse una lista de 15 elementos enumerados del 1 al 15.
¿Qué es un rompecabezas y en que consiste?
Tenemos una tabla dividida en una matriz de 4X4 (16 celdas), con una de sus casillas en blanco, la cual nos servirá para poder mover las piezas y así resolver el rompecabezas.
PASO 1.
Lo primero es el documento html con sus correspondientes etiquetas para crear una tabla de 4x4 y en que cada una de ellas vaya asociada una imagen por defecto que sera la solución del rompecabezas.
<!DOCTYPE html>
<html>
<head>
<title>ROMPE-CABEZAS</title>
</head>
<body>
<table width="320" height="320" border="1">
<tr>
<td><img src="1.png" width="80" height="80"id="F1C1"/></td>
<td><img src="2.png" width="80" height="80" id="F1C2"/></td>
<td><img src="3.png" width="80" height="80" id="F1C3"/></td>
<td><img src="4.png" width="80" height="80" id="F1C4"/></td>
</tr>
<tr>
<td><img src="5.png" width="80" height="80" id="F2C1" /></td>
<td><img src="6.png" width="80" height="80" id="F2C2"/></td>
<td><img src="7.png" width="80" height="80" id="F2C3"/></td>
<td><img src="8.png" width="80" height="80" id="F2C4"/></td>
</tr>
<tr>
<td><img src="9.png" width="80" height="80" id="F3C1"/></td>
<td><img src="10.png" width="80" height="80" id="F3C2"/></td>
<td><img src="11.png" width="80" height="80" id="F3C3"/></td>
<td><img src="12.png" width="80" height="80" id="F3C4"/></td>
</tr>
<tr>
<td><img src="13.png" width="80" height="80" id="F4C1"/></td>
<td><img src="14.png" width="80" height="80"id="F4C2"/></td>
<td><img src="15.png" width="80" height="80" id="F4C3"/></td>
<td><img src="blanco.png" width="80" height="80" id="F4C4"/></td>
</tr>
</table>
</body>
</html>
En el código, aparte de la tabla, en cada celda va asociado un identificador que corresponde con el numero de columna "Cx" y el numero de fila "Fy" de cada casilla.
Este juego esta pensado para insertarle cualquier imagen para jugar a colocarla en orden. En mi caso he puesto números que también son imagen, para que la resolución del rompecabezas cuando juguemos sea más sencillo.
* Dentro del paso 1 comentamos que para dividir una imagen en 16 piezas iguales, puedes utilizar cualquier herramienta de edición de imagen, recomiendo photoshop, el cual te permite dividir la imagen en piezas iguales de manera muy rápida. Si tenéis algún problema en este punto comentármelo y os contesto, pero en principio no debería dar problemas.
PASO 2
A continuación y como segundo paso en nuestro Rompecabezas, es desordenar la imagen de forma aleatoria, para ello he pensado crearme un boton en html y asociarle el evento onclick.
<button onClick="DesordenaPiezas">START</button>
Cuando hagamos click en ese boton, invocaremos al metodo onClick, el cual activara la función DesordenarFicha().
function DesordenaPiezas() {
function DesordenaPiezas() {
var list = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
list = list.sort(function() {return Math.random() - 0.5});
index = 0;
for (i=1; i < 5; i++) {
for (j=1; j < 5; j++) {
identity = "F" + i.toString() + "C" + j.toString();
document.getElementById(identity).src = list[index].toString() + ".png";
index++;
}
}
}
La idea de la función consiste, en crearse una lista de 15 elementos enumerados del 1 al 15.
En la segunda linea del código de la función desordenamos esa lista de forma aleatoria. Una vez que tenemos una lista de 15 elementos desordenados, nos tenemos que recorrer todos los elementos de la tabla, y la manera de hacerlos es con un bucle anidado de 4X4. En cada iteración de las 16 posibles, lo que haremos sera lo siguiente: Nombrar al elementos en el que estamos, para luego asignarle una imagen aleatoria. Para que todo esto tenga sentido, ni que decir tiene que nuestras imágenes tienen que tener un nombre particular [1.png,2.png....,15.png]. Si tenéis algún problema con esta función DesordenarFicha() comentármelo y os contesto.
PASO 3
Como tercer paso vamos a realizar una función en java scrip que nos permita hacer click en una pieza y que esa pieza se cambie por la imagen en blanco.
Por ejemplo la función CambiarFicha se la voy asignar a la celda F1C1 y deberá cambiarse por el blanco.
<td><img onclick="CambiarFicha(this)" src="media/1.png" width="80" height="80" id="F1C1"/></td>
Para esto he pensado asignarle el metodo onClick a cada casilla, con la función CambiarFicha(this).
La función CambiarFicha(this) es la siguiente:
function CambiarFicha(in) {
identy = white.id;
var aux = document.getElementById(identy);
aux.src = in.src;
in.src = "media/blanco.png";
white = in;
}
Como observamos en el codigo hace falta de una variable empty que es global.
var white = {src: "blanco.png", id: "F4C4"};
Analizando un poco las lineas de codigo de la función vemos que el campo identy en nuestro caso "F4C4", que la variable aux="F1C1", a continuación itroducimos la imagen de la pieza en la posición del blanco y la imagen del blanco en la posición de la pieza y por ultimo dejamos actualizada la posición del blanco var white = {src: "blanco.png", id: "F4C4"};
PASO 4
Analizando un poco las lineas de codigo de la función vemos que el campo identy en nuestro caso "F4C4", que la variable aux="F1C1", a continuación itroducimos la imagen de la pieza en la posición del blanco y la imagen del blanco en la posición de la pieza y por ultimo dejamos actualizada la posición del blanco var white = {src: "blanco.png", id: "F4C4"};
PASO 4
Esta función nos permite cambiar cualquier ficha por la que esta en blanco, pero el juego nos obliga a que sean las abyacentes al blanco. Entonces la solución que se me ocurrio fue llamar a otra función cuando se active el metodo onclick en la casilla seleccionada.
<td><img onclick="CambiarFichaCercana(this)" src="media/1.png" width="80" height="80" id="F1C1"/></td>
La función es la siguiente:
function CambiarFichaCercana(entrada) {
identy1 = white.id;
identy2 = entrada.id;
i = parseInt(identy1.charAt(1));
j = parseInt(identy1.charAt(3));
x = parseInt(identy2.charAt(1));
y = parseInt(identy2.charAt(3));
switch (Math.abs(i - x)) {
case 0:
if (Math.abs(j - y) == 1) {
CambiarFicha(entrada);
}
break;
case 1:
if (j == y) {
CambiarFicha(entrada);
}
break;
}
}
Vamos analizando poco a poco el código js implementado. Tenemos dos variables indety1 e identy2 que guardan el nombre del identificador de la pieza seleccionada y del blanco. A continuación buscamos a partir de los identificadores las coordenadas de la pieza. Una vez que tenemos almacenadas las coordenadas de las piezas, aplicamos el concepto de celdas abyacentes que no es otro que si en el eje de las x la diferencia de su modulo es "0", se tiene que cumplir que la diferencia del modulo del eje y tiene que ser = "1". Lo mismo ocurre en caso contrario, si el modulo de la diferencia del eje y es "0", entonces la diferencia del modulo de x debera ser "1".
Ejemplo:
Si vamos analizando poco a poco el codigo, con un caso para ver si lo entendemos mejor. Imaginemos que pinchamos en el id="F4C3" y el blanco esta en "F4C4", debería dejarnos mover la pieza según la norma del juego.
Ejemplo:
Si vamos analizando poco a poco el codigo, con un caso para ver si lo entendemos mejor. Imaginemos que pinchamos en el id="F4C3" y el blanco esta en "F4C4", debería dejarnos mover la pieza según la norma del juego.
Lo primero que hace el codigo es inicializar las variables:
identy1 = "F4C4";
identy2 = "F4C3";
i = 4;
j = 4;
x = 4;
y = 3;
Siguiendo el flujo, calculamos el valor absoluto de la resta.
|x-i| = |4-4| = 0
Si da "0" entonces:
Calculamos el valor absoluto de |y-j|, si da igual a 1 entonces CambiarFicha(Entrada);
|3-4|=1;
|3-4|=1;
Si ocurre esto se produce un break, por lo que el programa se para aquí.
Bueno y aquí termino con la publicación de mi primer tutorial sobre este rompecabezas, espero que se entienda bien y seguiremos haciendo mejoras. Un saludo.
No hay comentarios:
Publicar un comentario