This project turns an ESP32 with LED Matrix and Joystick into a customizable minigame platform.
- 4 stock games: Drawing Canvas, Arrow Game, Memory Game, Dice Roll
- Expandable game library (you can add your own minigame by implementing the
IGame
interface) - Webpage with remote control and scoreboard
- Uses AsyncWebServer for hosting the website
- Uses WebSocket for real time updates
- ESP32 microcontroller (tested on ESP32-WROOM-32U)
- 8x8 LED dot matrix (without controller)
- Analog Joystick
- 8 x 220ohm resistors
- wires
- breadboard
I recommend using the Arduino IDE, because the project was coded and tested with it. The following libraries should be installed in order to successfully compile the program:
The image below shows the required circuit. In order to protect the LEDs from burning, place the 8x220ohm resistors to the 8 column pins of the matrix, like on the diagram.
Joystick pin | ESP pin no. |
---|---|
GND | GND |
VCC (+5V) | 3V3 |
VRx (VER) | 35 |
VRy (HOR) | 34 |
SW (SEL) | 32 |
Matrix pin no. | Row | Column | ESP pin no. |
---|---|---|---|
1 | 5 | - | 33 |
2 | 7 | - | 25 |
3 | - | 2 | 26 |
4 | - | 3 | 27 |
5 | 8 | - | 14 |
6 | - | 5 | 12 |
7 | 6 | - | 13 |
8 | 3 | - | 15 |
9 | 1 | - | 2 |
10 | - | 4 | 0 |
11 | - | 6 | 4 |
12 | 4 | - | 16 |
13 | - | 1 | 17 |
14 | 2 | - | 5 |
15 | - | 7 | 18 |
16 | - | 8 | 19 |
After loading the program to the ESP, it needs to be powered by a 5V power supply (PC USB port, mobile phone charger, external power bank) in order to work. The program starts immediately after plugging in the ESP. It creates a Wi-Fi Access Point, named ESP32-Games with no password. You can connect to it with a smartphone or laptop. If the connection was successful, open the browser and navigate to 192.168.4.1
. Now you should see web interface with the digital version of the LED Matrix and the remote controller. Here you can switch between the games and you can use the D-pad to control the ESP. You can start the selected game by pressing the Joystick button or by clicking the middle button of the digital D-pad. The results of the gameplay will appear above the LED Matrix on the webpage.
- Drawing Canvas: This is a simple drawing game. The cursor can be moved with the joystick and the pixel under the cursor can be toggled with the button on the joystick.
- Arrow Game: In this game randomly appear on the screen images indicating the direction or the buttonpress. The player should follow the instruction to earn points. After 15 images, appears on the webpage the number of correct movements, the elapsed time and the calculated score.
- Memory Game: It starts with 15 randomly placed pixels on the screen, which should be memorized by the player. After 2.5 seconds the image disappears and the player should recreate that with the same drawing method as in Drawing Canvas game. When the number of pixels turned on reaches 15, the game is over and the results appear on the UI.
- Dice Roll: This just "rolls" 4 dices and places them in the corners of the LED matrix.
The formula for calculating the final score where applicable:
Here are some screenshots of the web interface:
Screenshot #1 (Drawing Cavas) | Screenshot #2 (Arrow Game) | Screenshot #3 (Dice Roll) |
---|---|---|
![]() |
![]() |
![]() |
Feel free to ask any questions or report any errors. Happy coding!