{"id":48,"date":"2026-02-09T13:20:06","date_gmt":"2026-02-09T06:20:06","guid":{"rendered":"https:\/\/blog.webie.my.id\/?p=48"},"modified":"2026-02-10T09:01:02","modified_gmt":"2026-02-10T02:01:02","slug":"proyek-robotik-11-game-adu-cepat","status":"publish","type":"post","link":"https:\/\/blog.webie.my.id\/?p=48","title":{"rendered":"Proyek Robotik #11: Game Adu Cepat"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Cara Kerja:<\/strong><\/p>\n\n\n\n

    \n
  1. ESP32 membuat jaringan WiFi dengan nama Game-Cepat dan password 12345678.<\/li>\n\n\n\n
  2. Setelah startup dan delay 5 detik, game dimulai secara otomatis dengan pertanyaan acak.<\/li>\n\n\n\n
  3. Pengguna menghubungkan perangkat ke WiFi ESP32 dan membuka browser ke IP (biasanya 192.168.4.1).<\/li>\n\n\n\n
  4. Halaman akan menampilkan satu soal kuis dan kolom untuk memasukkan jawaban.<\/li>\n\n\n\n
  5. Setelah menekan tombol “Jawab”, pengguna diminta untuk memasukkan nama.<\/li>\n\n\n\n
  6. Jika jawabannya benar dan belum ada pemenang:\n
      \n
    • Nama pengguna ditampilkan sebagai pemenang<\/li>\n\n\n\n
    • Waktu yang dibutuhkan untuk menjawab ditampilkan (dalam ms)<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Jika jawaban salah atau sudah ada pemenang, akan ditampilkan pesan kesalahan.<\/li>\n\n\n\n
    • Server tetap aktif dan dapat menerima jawaban baru jika game di-reset secara manual (fitur tambahan bisa ditambahkan untuk reset).<\/li>\n<\/ol>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Komponen yang Digunakan:<\/strong><\/p>\n\n\n\n

        \n
      • 1 \u00d7 ESP32<\/li>\n\n\n\n
      • 1 x Kabel USB (untuk upload dan power)<\/li>\n\n\n\n
      • 1 x Smartphone atau Laptop (untuk bermain game)<\/li>\n<\/ul>\n\n\n\n

        Fitur Tambahan yang Bisa Dikembangkan:<\/strong><\/p>\n\n\n\n

          \n
        • Tombol untuk reset game manual di halaman web<\/li>\n\n\n\n
        • Menampilkan daftar skor pemenang sebelumnya<\/li>\n\n\n\n
        • Membatasi waktu menjawab (dengan countdown)<\/li>\n\n\n\n
        • Audio feedback untuk jawaban benar\/salah<\/li>\n\n\n\n
        • Menambahkan timer dan animasi responsif<\/li>\n<\/ul>\n\n\n\n

          Kode:<\/strong><\/p>\n\n\n\n

          #include <WiFi.h>\n#include <WebServer.h>\n\nconst char* ssid = \"Game-Speed\";       \nconst char* password = \"12345678\"; \n\nWebServer server(80);\n\nbool gameDimulai = false;\nString pemenang = \"\";\nunsigned long waktuMulai = 0;\nunsigned long waktuMenang = 0;\n\nstruct Pertanyaan {\n    String soal;\n    String jawaban;\n};\n\nPertanyaan daftarPertanyaan[] = {\n    {\"5 + 3 = ?\", \"8\"},\n    {\"Ibukota Indonesia?\", \"Jakarta\"},\n    {\"Warna bendera Indonesia?\", \"Merah Putih\"},\n    {\"7 x 6 = ?\", \"42\"},\n    {\"Bahasa pemrograman untuk ESP32?\", \"C++\"},\n    {\"9 x 8 = ?\", \"72\"},\n    {\"Ibukota Australia?\", \"Canberra\"}\n};\nint totalPertanyaan = sizeof(daftarPertanyaan) \/ sizeof(daftarPertanyaan[0]);\nint pertanyaanSaatIni = -1;\n\nvoid mulaiGame() {\n    gameDimulai = true;\n    pemenang = \"\";\n    waktuMulai = millis();\n    pertanyaanSaatIni = random(0, totalPertanyaan); \/\/ Pilih pertanyaan acak\n}\n\nvoid handleRoot() {\n    String html = \"<html><head><title>Quiz Cepat!<\/title><\/head><body>\";\n    html += \"<h2>Game Quiz Cepat!<\/h2>\";\n\n    if (!gameDimulai) {\n        html += \"<p style='color:red;'>Game belum dimulai!<\/p>\";\n    } else {\n        html += \"<h3 style='color:blue;'>\" + daftarPertanyaan[pertanyaanSaatIni].soal + \"<\/h3>\";\n    }\n\n    html += \"<input type='text' id='jawaban' placeholder='Masukkan jawaban'>\";\n    html += \"<button onclick='jawab()' style='font-size: 20px;'>Jawab!<\/button>\";\n    html += \"<h3 id='hasil'><\/h3>\";\n\n    if (pemenang != \"\") {\n        html += \"<h3 style='color:green;'>Pemenang: \" + pemenang + \"<\/h3>\";\n    }\n\n    html += \"<script>\";\n    html += \"function jawab() {\";\n    html += \"  let nama = prompt('Masukkan nama Anda');\";\n    html += \"  let jawaban = document.getElementById('jawaban').value;\";\n    html += \"  fetch('\/jawab?nama=' + nama + '&jawaban=' + jawaban).then(res => res.text()).then(data => {\";\n    html += \"    document.getElementById('hasil').innerHTML = data;\";\n    html += \"  });\";\n    html += \"}\";\n    html += \"<\/script>\";\n\n    html += \"<\/body><\/html>\";\n\n    server.send(200, \"text\/html\", html);\n}\n\nvoid handleJawab() {\n    if (!server.hasArg(\"nama\") || !server.hasArg(\"jawaban\") || !gameDimulai) {\n        server.send(400, \"text\/plain\", \"Game belum dimulai atau data tidak valid.\");\n        return;\n    }\n\n    String nama = server.arg(\"nama\");\n    String jawaban = server.arg(\"jawaban\");\n\n    if (pemenang == \"\" && jawaban == daftarPertanyaan[pertanyaanSaatIni].jawaban) {\n        pemenang = nama;\n        waktuMenang = millis() - waktuMulai;\n        gameDimulai = false;\n        server.send(200, \"text\/html\", \"<h3 style='color:green;'>Selamat \" + pemenang + \"! Anda menang dalam \" + String(waktuMenang) + \" ms.<\/h3>\");\n    } else {\n        server.send(200, \"text\/html\", \"<h3 style='color:red;'>Jawaban salah atau sudah ada pemenang!<\/h3>\");\n    }\n}\n\nvoid setup() {\n    Serial.begin(115200);\n\n    WiFi.softAP(ssid, password);\n    IPAddress IP = WiFi.softAPIP();\n    Serial.print(\"Game tersedia di: \");\n    Serial.println(IP);\n\n    server.on(\"\/\", handleRoot);\n    server.on(\"\/jawab\", handleJawab);\n    server.begin();\n    Serial.println(\"Server dimulai!\");\n\n    \/\/ Mulai game setelah 5 detik\n    delay(5000);\n    mulaiGame();\n}\n\nvoid loop() {\n    server.handleClient();\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
          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…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[5,3],"tags":[],"class_list":["post-48","post","type-post","status-publish","format-standard","hentry","category-esp32","category-robotik"],"_links":{"self":[{"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=\/wp\/v2\/posts\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=48"}],"version-history":[{"count":1,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=\/wp\/v2\/posts\/48\/revisions"}],"predecessor-version":[{"id":50,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=\/wp\/v2\/posts\/48\/revisions\/50"}],"wp:attachment":[{"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}