DIY ESP32 15 Puzzle game on TFT touch Display

2025-05-12 | By Mirko Pavleski

License: General Public License ESP32

The "15 Puzzle" is a classic sliding puzzle that consists of a 4×4 grid with 15 numbered square tiles and one empty space. The objective is to rearrange the tiles from a scrambled initial state into numerical order (1 to 15, left to right, top to bottom) by sliding them into the empty space.

jgyu

The objective of the game is to arrange the tiles in ascending order, with the empty space in the bottom-right corner. There are 15! = 1.3 trillion possible tile arrangements, but only half are solvable.

In this project, I will present you with an electronic version of this puzzle which also has many useful improvements and options compared to the original mechanical version.

The game is played on a color touch-sensitive display, so there is no sticking or difficult movement of the tiles, which is a common case with mechanical versions.

The hardware part is extremely simple and consists of only three components:

- ESP32 Development Board

- 3.2-inch TFT LCD Display ILI9341 driver with Touchscreen

- and small Buzzer

This project is sponsored by PCBWay. They have all the services you need to create your project at the best price, whether it's a school project or a complex professional project. On PCBWay you can share your experiences or get inspiration for your next project. They also provide completed Surface mount SMT PCB assembly service and ISO9001 quality control.

ghi

It is very important to emphasize that if you use the display connection to the microcontroller in an identical way as in the given schematic diagram, then you must also use the given TFTesPI library adapted specifically for this project. I compiled the code using Arduino IDE version 1.8.16 and, more importantly, the ESP32 core version 2.0.4.

First, I will describe how to begin as well as the options in the game. After turning on the device, a guide to calibrating the touch screen appears on the display.

This is important because the game itself is played by touching the screen, and it is crucial that it is well calibrated. We perform the calibration by pressing the four corners of the display in the specified order. Then the name of the game appears, and we start the game by pressing the button. The playing field takes up most of the display, and on the right side, there are three control-information buttons.

vcgbc

- The top button displays the current number of moves played. In fact, here we monitor the course and success of the game. Namely, the goal of the game is to arrange the numbers in as few moves as possible.

- With the middle button, we can choose one of the five colors of the board we are playing on. This is a particularly useful option, and we can use it at any moment of the game, without affecting the result.

- The bottom button is also used to start a new game. This button is functional both at the beginning and at any moment of the current game, if we get stuck with some positions. With each press of this button, a new game is randomly generated, so we can choose a game that at least visually seems easier to solve. All touches on the screen are accompanied by an appropriate sound, which makes playing easier and more interesting.

hjhg

Finally, when we finish the game, a screen appears with information showing how many steps the puzzle was solved in, as well as a button to start a new game.

Just a few words about the code.

xsgf

You can see that it is designed in a way that allows you to easily change most parameters, from tile spacing and size to adjusting the sounds and colors in the game.

And finally, a short conclusion. This is an extremely simple way to make this fun puzzle game, which only requires three components, and will provide you with many hours of fun.

hbvj