Proyek Robotik #11: Game Adu Cepat
Proyek ini adalah sebuah kuis cepat (real-time quiz) yang dijalankan melalui web server lokal di ESP32. ESP32 akan menjadi Access Point (Hotspot WiFi) dan menyajikan halaman web ke perangkat (HP/ laptop) tanpa membutuhkan internet. Permainan memilih satu pertanyaan acak dan menampilkan form untuk menjawab. Peserta pertama yang menjawab dengan benar akan menjadi pemenang, dan waktu yang dibutuhkan akan ditampilkan.
Cara Kerja:
- ESP32 membuat jaringan WiFi dengan nama Game-Cepat dan password 12345678.
- Setelah startup dan delay 5 detik, game dimulai secara otomatis dengan pertanyaan acak.
- Pengguna menghubungkan perangkat ke WiFi ESP32 dan membuka browser ke IP (biasanya 192.168.4.1).
- Halaman akan menampilkan satu soal kuis dan kolom untuk memasukkan jawaban.
- Setelah menekan tombol “Jawab”, pengguna diminta untuk memasukkan nama.
- Jika jawabannya benar dan belum ada pemenang:
- Nama pengguna ditampilkan sebagai pemenang
- Waktu yang dibutuhkan untuk menjawab ditampilkan (dalam ms)
- Jika jawaban salah atau sudah ada pemenang, akan ditampilkan pesan kesalahan.
- Server tetap aktif dan dapat menerima jawaban baru jika game di-reset secara manual (fitur tambahan bisa ditambahkan untuk reset).
Komponen yang Digunakan:
- 1 × ESP32
- 1 x Kabel USB (untuk upload dan power)
- 1 x Smartphone atau Laptop (untuk bermain game)
Fitur Tambahan yang Bisa Dikembangkan:
- Tombol untuk reset game manual di halaman web
- Menampilkan daftar skor pemenang sebelumnya
- Membatasi waktu menjawab (dengan countdown)
- Audio feedback untuk jawaban benar/salah
- Menambahkan timer dan animasi responsif
Kode:
#include <WiFi.h>
#include <WebServer.h>
const char* ssid = "Game-Speed";
const char* password = "12345678";
WebServer server(80);
bool gameDimulai = false;
String pemenang = "";
unsigned long waktuMulai = 0;
unsigned long waktuMenang = 0;
struct Pertanyaan {
String soal;
String jawaban;
};
Pertanyaan daftarPertanyaan[] = {
{"5 + 3 = ?", "8"},
{"Ibukota Indonesia?", "Jakarta"},
{"Warna bendera Indonesia?", "Merah Putih"},
{"7 x 6 = ?", "42"},
{"Bahasa pemrograman untuk ESP32?", "C++"},
{"9 x 8 = ?", "72"},
{"Ibukota Australia?", "Canberra"}
};
int totalPertanyaan = sizeof(daftarPertanyaan) / sizeof(daftarPertanyaan[0]);
int pertanyaanSaatIni = -1;
void mulaiGame() {
gameDimulai = true;
pemenang = "";
waktuMulai = millis();
pertanyaanSaatIni = random(0, totalPertanyaan); // Pilih pertanyaan acak
}
void handleRoot() {
String html = "<html><head><title>Quiz Cepat!</title></head><body>";
html += "<h2>Game Quiz Cepat!</h2>";
if (!gameDimulai) {
html += "<p style='color:red;'>Game belum dimulai!</p>";
} else {
html += "<h3 style='color:blue;'>" + daftarPertanyaan[pertanyaanSaatIni].soal + "</h3>";
}
html += "<input type='text' id='jawaban' placeholder='Masukkan jawaban'>";
html += "<button onclick='jawab()' style='font-size: 20px;'>Jawab!</button>";
html += "<h3 id='hasil'></h3>";
if (pemenang != "") {
html += "<h3 style='color:green;'>Pemenang: " + pemenang + "</h3>";
}
html += "<script>";
html += "function jawab() {";
html += " let nama = prompt('Masukkan nama Anda');";
html += " let jawaban = document.getElementById('jawaban').value;";
html += " fetch('/jawab?nama=' + nama + '&jawaban=' + jawaban).then(res => res.text()).then(data => {";
html += " document.getElementById('hasil').innerHTML = data;";
html += " });";
html += "}";
html += "</script>";
html += "</body></html>";
server.send(200, "text/html", html);
}
void handleJawab() {
if (!server.hasArg("nama") || !server.hasArg("jawaban") || !gameDimulai) {
server.send(400, "text/plain", "Game belum dimulai atau data tidak valid.");
return;
}
String nama = server.arg("nama");
String jawaban = server.arg("jawaban");
if (pemenang == "" && jawaban == daftarPertanyaan[pertanyaanSaatIni].jawaban) {
pemenang = nama;
waktuMenang = millis() - waktuMulai;
gameDimulai = false;
server.send(200, "text/html", "<h3 style='color:green;'>Selamat " + pemenang + "! Anda menang dalam " + String(waktuMenang) + " ms.</h3>");
} else {
server.send(200, "text/html", "<h3 style='color:red;'>Jawaban salah atau sudah ada pemenang!</h3>");
}
}
void setup() {
Serial.begin(115200);
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("Game tersedia di: ");
Serial.println(IP);
server.on("/", handleRoot);
server.on("/jawab", handleJawab);
server.begin();
Serial.println("Server dimulai!");
// Mulai game setelah 5 detik
delay(5000);
mulaiGame();
}
void loop() {
server.handleClient();
}