Lienzo Abierto: una galería de imágenes para aprender, adaptar y hacer tuya
Una galería de imágenes con búsqueda, favoritos e importación local. Código abierto, ilustraciones de ejemplo y un recorrido para adaptarla.
Cuatro juegos de navegador con ilustraciones incluidas, controles de teclado y código abierto para aprender a cambiar imágenes, reglas y estados.

Un puzzle tiene una ventaja estupenda como proyecto de programación: el resultado se ve. Mueves una pieza y cambia el tablero. Encuentras una pareja y permanece descubierta. Terminas la imagen y el juego puede comprobarlo.
He preparado una edición abierta de Freeverso Puzzles, con cuatro modalidades, ilustraciones incluidas y una interfaz en español. Está en GitHub, con licencia MIT y los pasos para ejecutarla en tu equipo.

Captura real de la web. Las imágenes de ejemplo son ilustraciones originales generadas con IA.
En Piezas, eliges dos casillas para intercambiarlas hasta reconstruir la imagen. Puedes hacerlo tocando la pantalla, con el ratón o con Tab y Espacio. También hay arrastre con ratón.
En Parejas, descubres dos tarjetas y buscas los seis pares de símbolos. Si no coinciden, vuelven a ocultarse después de un momento. En Deslizar, solo se mueve una pieza junto al hueco. Y en Palabras, eliges letras para descubrir una palabra asociada a la ilustración.
No hay vidas, cuenta atrás ni clasificación pública. Puedes pausar o reiniciar. La partida se mantiene mientras la pestaña siga abierta, pero no se guarda al recargar o cerrar; el juego lo explica junto al tablero.

Para jugar basta con abrir una instalación de la web. No hay registro ni una cuenta de IA. Para ejecutar el código por primera vez, la preparación corresponde a una persona adulta con Node.js y npm:
npm ci
npm run dev
Después abre http://127.0.0.1:3000. El README detalla la versión recomendada de Node y las comprobaciones del proyecto. No hay claves ni servicios cloud obligatorios.
Una propuesta sencilla para probarlo en compañía: elegid la misma imagen en dos modos. Primero reconstruidla con Piezas; después probad Deslizar. La pregunta útil es «¿por qué ahora no puedo mover cualquier casilla?». El código del segundo modo tiene una regla concreta: solo acepta una pieza vecina del hueco.
Esto es una propuesta de actividad, no el relato de una prueba con una familia ni una afirmación sobre beneficios terapéuticos.
No basta con mezclar nueve casillas al azar para crear un puzzle deslizante. Algunas disposiciones no se pueden resolver con sus reglas.
El proyecto empieza con el tablero completo y realiza movimientos legales para mezclarlo. Por eso existe un camino de vuelta. Las pruebas comprueban mil tableros, su contenido y su paridad, además de rechazar saltos y diagonales. En el navegador también se ha completado una partida mediante los controles.

El catálogo está en src/lib/puzzles.ts. Cada entrada define la imagen, el título, la palabra y su pista. La lógica del tablero está separada en src/lib/engine.mjs.
Para añadir un dibujo, utiliza una imagen propia o con una licencia compatible, dale una ruta local y elige una palabra que encaje con ella. Mantener la proporción 3:2 de los ejemplos evita deformaciones en el tablero.
Un prompt útil para pedir ayuda:
Quiero añadir una quinta ilustración a Freeverso Puzzles.
Explícame qué entrada debo añadir al catálogo y qué características
necesita la imagen. No cambies las reglas de los juegos, no añadas
cuentas ni telemetría y conserva los controles con teclado.
Se han completado las cuatro modalidades mediante sus controles, se ha comprobado pausa y reinicio, y se han revisado las vistas de escritorio y móvil emulado. La captura móvil corresponde a Chrome con una ventana de 390 píxeles, no a un teléfono físico. No se han hecho pruebas con niños ni estudios educativos.
El proyecto está pensado como una base que puedas leer y adaptar. No incluye anuncios, pagos, generación remota de imágenes ni datos personales. Las ilustraciones vienen con el código y su procedencia está documentada.
Descarga Freeverso Puzzles desde GitHub y empieza por una modificación pequeña: otra imagen, otra palabra o un mensaje de victoria distinto.