Tecna Webs - Desarrollo web Y Android ™
Pequeño código para el desarrollo de figuras en 2D del conocido puzle Serpiente de Rubik ™, usando el elemento canvas de HTML 5 para dibujar las figuras a partir de una serie de movimientos dados, que representan la pieza que se mueve 90 grados de las 24 piezas que forman la estructura básica del puzle. Mediante javascript calculamos las nuevas posiciones de la pieza que se mueve y de las que se ven afectadas por el movimiento de ésta y pintamos la nueva figura en el lienzo.
Además de los ejemplos disponibles, se incluye un lienzo en blanco que si se selecciona hace aparecer un campo de texto, en el que se pueden incluir valores numéricos separados por comas, que representan las piezas a mover, con los que se podrán generar nuevas figuras.
Para mayor simplicidad se han tenido en cuenta unicamente movimientos de 90 grados, por lo que sólo se pueden formar figuras en dos dimensiones. Por el mismo motivo no se han tenido en cuenta los movimientos imposibles.
El resultado del script es similar a la imagen animada que se muestra a continuación, partiendo de la posición base y realizando los siguientes movimientos: 1, 3, 4, 6, 9, 11, 12, 22. Cada número representa la pieza que se mueve y cada movimiento genera una nueva figura que se correspondería con cada fotograma.
En lugar de tener que crear una imagen para cada figura desarrollada, pintamos cada pieza de cada figura en un lienzo de HTML 5 de forma dinámica. La desventaja de este método es que algunos navegadores antiguos no lo soportan. Por esto se incluye la figura de ejemplo dentro de la etiqueta <canvas> junto con un texto de aviso para estos casos.
Como este código surgió como un mero entretenimiento y primer acercamiento a HTML 5, claramente es mejorable, entre otras cosas:
Como esta página tiene otro doctype por compatibilidad, no se incluye aquí el código directamente. Si su navegador tiene javascript activado y soporta el elemento canvas de documentos HTML 5, puede ver el código funcionando aquí
Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google según las condiciones descritas en la Creative Commons 3.0 Attribution. Más información en el enlace aviso legal del pie de página.