MapPuzzle.xyz is an experimental website, developed with React and Deck.gl. It is an accessible way to learn cartography, through this project I try to offer an interactive learning experience with maps.
Description of the game
MapPuzzle.xyz is a fun way to learn geography in a playful way. The game features a list of puzzle pieces on the left side of the screen, which can be countries, states, cities, or provinces, among others. Each piece is shown with a map illustration and when clicked, it follows the mouse and the player must find its match on the map. It also has a counter for found pieces, pieces to be found, and mistakes made. Players can choose the map they want to play and filter it by continent and region.
One of the interesting features of the game is that it allows players to translate the names of the puzzle pieces into different languages. This allows them to learn the names of the places in different languages, enriching their gaming experience and helping them develop their language skills.
In addition, every time a piece is placed on the map, players can access Wikipedia data about the place they are exploring. This allows them to obtain additional information about the geography, history, culture, and other areas related to the place, helping them learn more about the world around them.
In summary, the map puzzle game offers a complete and fun educational experience for all ages. Don’t miss out on trying it!
You can play it at http://mappuzzle.xyz/
Idea
Since 2012, if I remember correctly, I was planning to make a map puzzle game, something similar to the interactive puzzle work I did for the Spanish National Geographic Institute in 2006, which until recently they still had on their website.
But those were other times, the web was dominated by Flash interactivity, nowadays a bit obsolete, but at that time it was a great tool to develop interfaces. Today, technology has evolved and the user demands more interactivity, so I looked for mechanisms that would allow translating Flash interactivity into HTML5 and JavaScript. It was precisely in this context that I found the Vis.gl Deck.gl library, a library that allows us to generate interactive maps on the web.
I was considering using Unity 3D to make the game, I did some small tests, but I didn’t want to be conventional either, I wanted something more generalist, so I needed it to be web, not an application that you had to install.
I thought about doing it from 0, with Javascript and Svg, and I did some small tests, but the work to be done was too big, and I also wanted to make the process to incorporate new maps a bit fast.
Code description
To develop the game, the Deck.gl library was used, which allows creating interactive maps on the web using JavaScript and WebGL. This library is a powerful and versatile tool that facilitates the development of map applications on the web, offering a wide variety of components and layers that can be used to create custom and highly interactive maps.
In addition, other technologies and tools such as React, sqlite, PHP, typeorm, and node.js have been used to implement different functionalities and improve the game experience. React has been used as a user interface development framework, sqlite has been used to store and retrieve data in a local database, PHP has been used to develop server scripts, typeorm has been used to manage the database, and node.js has been used as an execution environment to run the server scripts.
In terms of the project structure, the game is divided into different components and modules that are responsible for different tasks. For example, there are components that are responsible for displaying the puzzle piece list and the map, others that manage the game logic and interact with players, and others that are responsible for obtaining and processing Wikipedia and translation data.
In summary, the map puzzle game has been developed using advanced technologies and web development tools, and is structured in a modular and efficient way to facilitate its maintenance and expansion.
The project repository can be found at: https://github.com/alexwing/MapPuzzle.gl
The following lines of code refer to different ways of starting the project:
- “dev”: “env-cmd -f ./environments/.env.development react-scripts start”, This option allows you to run the frontend in development mode, it needs to have the Node.js backend running to work properly.
- “pro”: “env-cmd -f ./environments/.env react-scripts start”, This option allows you to run the frontend in development mode and connect it to a local sqlite3 database, without the need of the backend. The database is located in the “public” folder.
- “dev-php-backend”: “env-cmd -f ./environments/.env.devphpbackend react-scripts start”, This option allows you to run the frontend in development mode and connect it to a local PHP backend running.
- “pro-php-backend”: “env-cmd -f ./environments/.env.phpbackend react-scripts start”, This option allows you to run the frontend in production mode and connect it to the production PHP backend running.
- “build”: “env-cmd -f ./environments/.env react-scripts build”, This option allows you to build the frontend in production mode and connect it to a local sqlite3 database, without the need of a backend. The database is located in the “public” folder.
- “build-php”: “env-cmd -f ./environments/.env.phpbackend react-scripts build”, This option allows you to build the frontend and copy the files to the backend folder for use in a PHP server. This PHP server is a simple script to execute queries to the sqlite3 database, similar to the frontend version. It is used to deploy the application on a PHP server. This PHP script is limited to SELECT queries, does not support INSERT, UPDATE or DELETE query and prevents SQL injection.
