Saltar al contenido
Alejandro ArandaAlejandro Aranda
Volver a proyectos
4 min de lecturaProyectosjavascriptReact

MapPuzzle.xyz

Código fuente

MapPuzzle.xyz es un juego de puzles de mapas. Arrastras una pieza —una provincia, un estado, un condado— hasta su sitio, y de paso aprendes dónde estaba. Empezó como un experimento con React y Deck.gl y hoy son 70 mapas, más de 2.300 piezas y un quiz de banderas en 49 de ellos.

Puedes jugar en mappuzzle.xyz.

De dónde viene

En 2006 hice unos puzles interactivos para el Instituto Geográfico Nacional de España. Estaban en Flash, que era lo que había, y funcionaron bien durante años en su web. Después Flash murió, y con él se fue aquel trabajo: no hay forma de abrirlo hoy, ni de recuperarlo.

Esa es, en el fondo, la razón de este proyecto. Hacia 2012 empecé a darle vueltas a rehacer aquello, pero con una condición que entonces no supe formular y ahora tengo clara: que no dependiera de nada que pudiera desaparecer. Nada de complementos del navegador, nada de instalar, nada de tiendas de aplicaciones. Una web, y punto.

Barajé Unity y llegué a hacer pruebas, pero pedía instalar algo, y quería lo contrario: que se abriera en cualquier sitio. También probé a escribirlo desde cero con JavaScript y SVG, y ahí topé con lo que de verdad decide un proyecto así: el juego se hace una vez, pero los mapas se hacen setenta. Si añadir uno nuevo era una tarde de trabajo manual, el proyecto se moría solo. Buscando una manera de dibujar mapas interactivos en el navegador di con Deck.gl, y con ella la pieza que faltaba.

De aquella pérdida sale también lo otro que me importa: el juego es gratuito, no pide registro y no guarda nada de quien juega. Ni cuentas, ni datos personales, ni clasificaciones en un servidor. Lo que sabe de ti vive en tu navegador. Es una decisión deliberada, y no solo por privacidad: cuanto menos necesite el juego para funcionar, más tiempo seguirá funcionando.

Cómo se juega

A un lado, la lista de piezas con su silueta; al otro, el mapa. Coges una pieza, sigue al cursor, y la sueltas donde crees que va. El marcador lleva la cuenta de aciertos, de lo que queda y de los fallos. Los mapas se filtran por continente y región, así que puedes ir de las fronteras del mundo a las provincias de Sevilla.

Dos cosas lo convierten en algo más que un juego de arrastrar. La primera: al colocar una pieza puedes abrir su artículo de Wikipedia sin salir de la partida, y leer sobre el sitio que acabas de encontrar. La segunda: los nombres de las piezas están traducidos a decenas de idiomas, así que puedes jugar el mapa de Japón con los nombres en japonés, o en griego, y aprender de paso cómo se llaman las cosas en otra lengua.

En los mapas que tienen banderas propias hay además un Quiz de Banderas: una bandera ondeando y seis opciones para acertar a quién pertenece.

Un puzle de MapPuzzle.xyz con la lista de piezas a la izquierda y el mapa a la derecha
Las piezas a un lado, el mapa al otro

Cómo está hecho

El juego es React con Deck.gl, que dibuja los mapas sobre WebGL, y se puede instalar como aplicación desde el propio navegador para jugar sin conexión.

Lo que se publica son ficheros estáticos y una pequeña pasarela PHP de solo lectura sobre un fichero SQLite: no hace falta Node.js en el servidor, ni nada que administrar. Es un alojamiento corriente, y esa modestia es intencionada, por lo dicho más arriba.

Aparte vive el editor de mapas, que es donde está el trabajo de verdad y que solo corre en mi máquina. Lee los ficheros shapefile del mapa nuevo, trae de Wikipedia los enlaces, las banderas y las traducciones, y calcula lo que el juego necesita de cada pieza. Gracias a eso, incorporar un mapa nuevo es cuestión de minutos, que era justo la condición de la que dependía todo.

El código está en github.com/alexwing/MapPuzzle.gl, con licencia MIT.

Dónde está hoy

Setenta mapas, 2.371 piezas, 1.871 de ellas enlazadas a su artículo de Wikipedia y más de 73.000 nombres traducidos a 40 idiomas. La interfaz está en siete, y cada una tiene su propia dirección, así que se puede enlazar directamente la versión en español o en alemán.

Sigue creciendo despacio, mapa a mapa, que es el ritmo que le corresponde a algo que se hace por gusto.

Apoyar el proyecto

Setenta mapas son muchas tardes, y el juego no las cobra de ninguna manera: ni anuncios, ni cuentas, ni datos de quien juega. Si te ha servido —o se lo has puesto a alguien que está aprendiendo geografía— puedes apoyarlo en GitHub Sponsors. Lo que se financia ahí es tiempo, que es justo lo que hace falta para el mapa siguiente.

También te puede interesar