{"id":45,"date":"2026-02-09T13:17:36","date_gmt":"2026-02-09T06:17:36","guid":{"rendered":"https:\/\/blog.webie.my.id\/?p=45"},"modified":"2026-02-10T09:01:06","modified_gmt":"2026-02-10T02:01:06","slug":"proyek-robotik-10","status":"publish","type":"post","link":"https:\/\/blog.webie.my.id\/?p=45","title":{"rendered":"Proyek Robotik #10: Game Tebak Warna"},"content":{"rendered":"\n

Proyek ini adalah game edukatif interaktif berbasis ESP32 yang memungkinkan pengguna untuk bermain Tebak Warna melalui halaman web yang diakses lewat WiFi Access Point (tanpa internet). ESP32 menampilkan kotak berwarna secara acak, dan pemain diminta memilih nama warna yang sesuai dari tiga pilihan. Jika tebakan benar, skor bertambah. Jika salah, skor direset ke nol. Halaman akan otomatis memuat warna baru setelah jawaban diberikan.<\/p>\n\n\n\n

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

    \n
  1. ESP32 membuat hotspot WiFi sendiri (Access Point) dengan SSID dan password yang ditentukan (“Game-Warna”, “12345678”).<\/li>\n\n\n\n
  2. Pengguna menghubungkan HP atau laptop ke WiFi tersebut.<\/li>\n\n\n\n
  3. Akses ke halaman game cukup dengan membuka alamat IP yang dicetak di Serial Monitor (biasanya 192.168.4.1).<\/li>\n\n\n\n
  4. Di halaman web:\n
      \n
    • Sebuah kotak warna ditampilkan.<\/li>\n\n\n\n
    • Pemain memilih salah satu dari tiga nama warna.<\/li>\n\n\n\n
    • Jika benar \u2192 muncul pesan \u201cBenar!\u201d, skor bertambah, dan otomatis lanjut ke warna baru.<\/li>\n\n\n\n
    • Jika salah \u2192 muncul pesan \u201cSalah! Coba lagi.\u201d, dan skor kembali ke nol.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Semuanya dijalankan di dalam ESP32 tanpa perlu koneksi internet atau server eksternal.<\/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 Game:<\/strong><\/p>\n\n\n\n

          \n
        • Menampilkan warna acak dari daftar: Merah, Hijau, Biru, Kuning, Ungu, Coklat.<\/li>\n\n\n\n
        • Mengacak posisi jawaban (pilihan ganda).<\/li>\n\n\n\n
        • Menampilkan skor secara real-time.<\/li>\n\n\n\n
        • Interaksi penuh berbasis JavaScript & Fetch API.<\/li>\n\n\n\n
        • Responsif & ringan, cocok untuk pembelajaran IoT interaktif.<\/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-Warna\";       \nconst char* password = \"12345678\"; \n\nWebServer server(80);\n\nString warna[] = {\"Merah\", \"Hijau\", \"Biru\", \"Kuning\", \"Ungu\", \"Coklat\"};\nString warnaKode[] = {\"#FF0000\", \"#00FF00\", \"#0000FF\", \"#FFFF00\", \"#800080\", \"#8B4513\"};\n\nint warnaAcakIndex;\nint skor = 0;\n\nvoid pilihWarnaBaru() {\n    warnaAcakIndex = random(0, 6);\n}\n\nvoid handleRoot() {\n    pilihWarnaBaru();\n    String html = \"<html><head><title>Tebak Warna<\/title><\/head><body>\";\n    html += \"<h2>Tebak Warna!<\/h2>\";\n    html += \"<div style='width:100px; height:100px; background-color:\" + warnaKode[warnaAcakIndex] + \";'><\/div>\";\n    html += \"<p>Pilih nama warna yang sesuai:<\/p>\";\n\n    int pilihanBenar = warnaAcakIndex;\n    int pilihanSalah1 = (pilihanBenar + random(1, 5)) % 6;\n    int pilihanSalah2 = (pilihanBenar + random(2, 6)) % 6;\n\n    String opsi[3] = {warna[pilihanBenar], warna[pilihanSalah1], warna[pilihanSalah2]};\n    for (int i = 0; i < 3; i++) {\n        int j = random(i, 3);\n        String temp = opsi[i];\n        opsi[i] = opsi[j];\n        opsi[j] = temp;\n    }\n\n    for (int i = 0; i < 3; i++) {\n        html += \"<button onclick='pilih(\\\"\" + opsi[i] + \"\\\")'>\" + opsi[i] + \"<\/button> \";\n    }\n\n    html += \"<h3 id='hasil'><\/h3><h3>Skor: <span id='skor'>\" + String(skor) + \"<\/span><\/h3>\";\n    html += \"<script>\";\n    html += \"function pilih(namaWarna) { fetch('\/cek?jawaban=' + namaWarna).then(res => res.text()).then(data => {\";\n    html += \"document.getElementById('hasil').innerHTML = data;\";\n    html += \"if (data.includes('Benar')) { document.getElementById('skor').innerText = parseInt(document.getElementById('skor').innerText) + 1; setTimeout(() => location.reload(), 1000); }\";\n    html += \"else { setTimeout(() => location.reload(), 1500); }\";\n    html += \"}); }\";\n    html += \"<\/script>\";\n    html += \"<\/body><\/html>\";\n\n    server.send(200, \"text\/html\", html);\n}\n\nvoid handleCek() {\n    if (!server.hasArg(\"jawaban\")) {\n        server.send(400, \"text\/plain\", \"Jawaban tidak valid.\");\n        return;\n    }\n\n    String jawaban = server.arg(\"jawaban\");\n\n    if (jawaban == warna[warnaAcakIndex]) {\n        skor++;\n        server.send(200, \"text\/html\", \"<h3 style='color:green;'>Benar!<\/h3>\");\n    } else {\n        skor = 0;\n        server.send(200, \"text\/html\", \"<h3 style='color:red;'>Salah! Coba lagi.<\/h3>\");\n    }\n}\n\nvoid setup() {\n    Serial.begin(115200);\n\n    \/\/ Mode Access Point (Hotspot)\n    WiFi.softAP(ssid, password);\n    IPAddress IP = WiFi.softAPIP();\n    Serial.print(\"Hotspot aktif! Akses game di: \");\n    Serial.println(IP);\n\n    pilihWarnaBaru();\n\n    server.on(\"\/\", handleRoot);\n    server.on(\"\/cek\", handleCek);\n\n    server.begin();\n    Serial.println(\"Server dimulai!\");\n}\n\nvoid loop() {\n    server.handleClient();\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
          Proyek ini adalah game edukatif interaktif berbasis ESP32 yang memungkinkan pengguna untuk bermain Tebak Warna melalui halaman web yang diakses lewat WiFi Access Point (tanpa internet). ESP32 menampilkan kotak berwarna secara acak, dan pemain diminta memilih nama warna yang sesuai dari tiga pilihan. Jika tebakan benar, skor bertambah. Jika salah, skor direset ke nol. Halaman…<\/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-45","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\/45","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=45"}],"version-history":[{"count":2,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":51,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=\/wp\/v2\/posts\/45\/revisions\/51"}],"wp:attachment":[{"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}