MapPuzzle.xyz es una web experimento, desarrollada con React y Deck.gl. Es una forma accesible de aprender cartografía, a través de este proyecto trato de ofrecer una experiencia interactiva de aprendizaje con mapas.
Descripción del juego
El juego de MapPuzzle.xyz es una divertida forma de aprender geografía de una manera lúdica. El juego cuenta con una lista de piezas del puzzle en el lateral izquierdo de la pantalla, que pueden ser países, estados, ciudades o provincias, entre otros. Cada pieza se muestra con una ilustración del mapa y al hacer clic sobre ella, sigue el ratón y el jugador debe buscar su correspondencia en el mapa. También cuenta con un contador de piezas encontradas, piezas a buscar y fallos cometidos. Los jugadores pueden seleccionar el mapa que quieren jugar y filtrarlo por continente y región.
Una de las características interesantes del juego es que permite a los jugadores traducir los nombres de las piezas del puzzle a diferentes idiomas. Esto les permite aprender los nombres de los lugares en diferentes idiomas, lo que enriquece su experiencia de juego y les ayuda a desarrollar sus habilidades lingüísticas.
Además, cada vez que una pieza es colocada en el mapa, los jugadores pueden acceder a datos de Wikipedia sobre el lugar que están explorando. Esto les permite obtener información adicional sobre la geografía, la historia, la cultura y otras áreas relacionadas con el lugar, lo que les ayuda a aprender más sobre el mundo que nos rodea.
En resumen, el juego de puzzle de mapas ofrece una experiencia educativa completa y divertida para todas las edades. ¡No dejes de probarlo!
Puedes jugarlo en http://mappuzzle.xyz/
Idea
Desde el 2012, si no recuerdo mal, tenia pensado hacer un juego de puzzles mapas, algo parecido al trabajo de puzzles interactivos que hice para el Instituto Geográfico Nacional de España en 2006, que hasta hace poco mantenían en su web aún.
Pero aquellos eran otros tiempos, en la web dominaba la interactividad en Flash, actualmente algo obsoleto, pero que en su momento era una gran herramienta para desarrollar interfaces. Hoy en día, la tecnología ha evolucionado y el usuario demanda más interactividad, por lo que busque mecanismos que permitieran traducir la interactividad de Flash a HTML5 y JavaScript, precisamente en este contexto encontré la librería Deck.gl de Vis.gl, una librería que nos permite generar mapas interactivos en web.
Estuve barajando usar Unity 3D para hacer el juego, hice algunas pequeñas pruebas, pero tampoco me convención, quería algo más generalista, por lo que necesitaba que fuera web, no una aplicación que tuvieras que instalar.
Pensé hacerlo desde 0, con Javascript y Svg e hice algunas pequeñas pruebas, pero el trabajo por hacer era demasiado grande, además quería conseguir que el proceso para incorporar nuevos mapas fuera algo rápido.
Descripción del código
Para desarrollar el juego, se ha utilizado la librería Deck.gl, que permite crear mapas interactivos en web utilizando JavaScript y WebGL. Esta librería es una herramienta potente y versátil que facilita el desarrollo de aplicaciones de mapas en la web, ofreciendo una amplia variedad de componentes y capas que se pueden utilizar para crear mapas personalizados y altamente interactivos.
Además, se han utilizado otras tecnologías y herramientas como React, sqlite, PHP, typeorm y node.js para implementar diferentes funcionalidades y mejorar la experiencia de juego. React se ha utilizado como marco de desarrollo de interfaz de usuario, sqlite se ha utilizado para almacenar y recuperar datos en una base de datos local, PHP se ha utilizado para desarrollar scripts de servidor, typeorm se ha utilizado para gestionar la base de datos y node.js se ha utilizado como entorno de ejecución para ejecutar los scripts de servidor.
En cuanto a la estructura del proyecto, el juego está dividido en diferentes componentes y módulos que se encargan de diferentes tareas. Por ejemplo, hay componentes que se encargan de mostrar la lista de piezas del puzzle y el mapa, otros que gestionan la lógica de juego y la interacción con los jugadores, y otros que se encargan de obtener y procesar los datos de Wikipedia y de traducción.
En resumen, el juego de puzzle de mapas ha sido desarrollado utilizando tecnologías avanzadas y herramientas de desarrollo web, y está estructurado de forma modular y eficiente para facilitar su mantenimiento y expansión.
El repositorio del proyecto se encuentra en: https://github.com/alexwing/MapPuzzle.gl
Las siguientes líneas del código se refieren a diferentes formas de arrancar el proyecto:
- «dev»: «env-cmd -f ./environments/.env.development react-scripts start», Esta opción permite ejecutar el frontend en modo desarrollo, necesita tener el backend Node.js en ejecución para funcionar correctamente.
- «pro»: «env-cmd -f ./environments/.env react-scripts start», Esta opción permite ejecutar el frontend en modo desarrollo y conectarlo a una base de datos local sqlite3, sin necesidad del backend. La base de datos se encuentra en la carpeta «public».
- «dev-php-backend»: «env-cmd -f ./environments/.env.devphpbackend react-scripts start», Esta opción permite ejecutar el frontend en modo desarrollo y conectarlo a un backend PHP local en ejecución.
- «pro-php-backend»: «env-cmd -f ./environments/.env.phpbackend react-scripts start», Esta opción permite ejecutar el frontend en modo producción y conectarlo al backend PHP de produccion en ejecución.
- «build»: «env-cmd -f ./environments/.env react-scripts build», Esta opción permite construir el frontend en modo producción y conectarlo a una base de datos sqlite3 local, sin necesidad de un backend. La base de datos se encuentra en la carpeta «public».
- «build-php»: «env-cmd -f ./environments/.env.phpbackend react-scripts build», Esta opción permite construir el frontend y copiar los archivos a la carpeta del backend para su uso en un servidor PHP. Este servidor PHP es un script simple para ejecutar consultas a la base de datos sqlite3, similar a la versión del frontend. Se utiliza para desplegar la aplicación en un servidor PHP. Este script PHP solo permite consultas SELECT, no soporta consultas INSERT, UPDATE o DELETE y evita las inyecciones SQL.
