A Customizable ESP32 Mini-game

by wengyucheng in Circuits > Wireless

97 Views, 0 Favorites, 0 Comments

A Customizable ESP32 Mini-game

unnamed.jpg
unnamed (1).jpg

Program code

Downloads

ESP32game.ino

Supplies

ESP32 C3*1

USB C LINE*1

A4 paper *9


Connect to Computer

unnamed (1).jpg

Connect the ESP32-C3 to the computer using a USB Type-C cable.

Open Arduino IDE

Screenshot 2026-05-18 095836.png

Open Arduino IDE, then select and connect the ESP32-C3.

Input Code

Screenshot 2026-05-18 100018.png

Paste the code into Arduino IDE.

Code

#include <WiFi.h>

#include <WebServer.h> // 使用內建的 WebServer，不用額外裝 ZIP


// --- 設定區SETTINGS ---

const char* ssid = "猜猜看遊戲機";

const char* password = "";


// 題目清單LIST OF QUESIONS

const char* topics[] = {"珍珠奶茶", "臭豆腐", "周杰倫", "長頸鹿", "鋼鐵人"};

int totalTopics = 5;


WebServer server(80); // 建立伺服器物件


void handleGame() {

String topic = "請掃描正確的卡片";

// 檢查網址參數 ?id=

if (server.hasArg("id")) {

int id = server.arg("id").toInt();

if (id >= 0 && id < totalTopics) {

topic = topics[id];

}

}


// 產生網頁

String html = "<html><head><meta charset='utf-8'>";

html += "<meta name='viewport' content='width=device-width, initial-scale=1.0'>";

html += "<style>body{display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background:#4CAF50;font-family:sans-serif;}";

html += ".box{background:white;padding:40px;border-radius:20px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,0.3);}";

html += "h1{font-size:60px;color:#333;}</style></head><body>";

html += "<div class='box'><h2>題目是：</h2><h1>" + topic + "</h1></div>";

html += "</body></html>";


server.send(200, "text/html", html);

}


void setup() {

Serial.begin(115200);


// 啟動熱點

WiFi.softAP(ssid, password);

Serial.println("熱點已啟動");

Serial.println(WiFi.softAPIP());


// 設定路由：當手機訪問 /game 時，執行 handleGame 函式

server.on("/game", handleGame);


server.begin();

Serial.println("HTTP 伺服器已啟動");

}


void loop() {

server.handleClient(); // 必須在 loop 裡持續處理連線

}

Modifiable Projects

All Chinese characters are editable.

猜猜看遊戲機 It's the game's name.

const char* topics[] = {"珍珠奶茶", "臭豆腐", "周杰倫", "長頸鹿", "鋼鐵人"}; It is a prompt word can increase

int totalTopics = 5; The questions need to be modified after they are added. Quantity: Number of items - 1

html += "<div class='box'><h2>題目是：</h2><h1>" + topic + "</h1></div>"; The title is




QR Code * 105

43.jpeg
44.jpeg
45.jpeg
46.jpeg
47.jpeg
48.jpeg
49.jpeg
50.jpeg
51.jpeg
52.jpeg
53.jpeg
54.jpeg
55.jpeg
56.jpeg
57.jpeg
58.jpeg
59.jpeg
60.jpeg
61.jpeg
62.jpeg
63.jpeg
64.jpeg
65.jpeg
66.jpeg
67.jpeg
68.jpeg
69.jpeg
70.jpeg
71.jpeg
72.jpeg
73.jpeg
74.jpeg
75.jpeg
76.jpeg
77.jpeg
78.jpeg
79.jpeg
80.jpeg
81.jpeg
82.jpeg
83.jpeg
84.jpeg
85.jpeg
86.jpeg
87.jpeg
88.jpeg
89.jpeg
90.jpeg
91.jpeg
92.jpeg
93.jpeg
94.jpeg
95.jpeg
96.jpeg
97.jpeg
98.jpeg
99.jpeg
100.jpeg
101.jpeg
102.jpeg
103.jpeg
104.jpeg
105.jpeg
1.jpeg
2.jpeg
3.jpeg
4.jpeg
5.jpeg
6.jpeg
7.jpeg
8.jpeg
9.jpeg
10.jpeg
11.jpeg
12.jpeg
13.jpeg
14.jpeg
15.jpeg
16.jpeg
17.jpeg
18.jpeg
19.jpeg
20.jpeg
21.jpeg
22.jpeg
23.jpeg
24.jpeg
25.jpeg
26.jpeg
27.jpeg
28.jpeg
29.jpeg
30.jpeg
31.jpeg
32.jpeg
33.jpeg
34.jpeg
35.jpeg
36.jpeg
37.jpeg
38.jpeg
39.jpeg
40.jpeg
41.jpeg
42.jpeg

A QR code for the corresponding project needs to be generated.

http://192.168.4.1/game?id=0 The numbers following are the question numbers.

I used 105 projects.

Here is my QR code file.


Downloads

mapping.csv

Making Cards

The required size is only after printing.

Connection Usage

截圖 2026-05-18 上午10.26.42.png

Connect your phone to the ESP32 C3's Wi-Fi hotspot.

Scanning

IMG_1987.jpeg
IMG_1988.PNG

Scanning the QR code will automatically open the website with the specified prompt.

Completed

Congratulations on completing the ESP32 C3 MINI GAME!