Cara Kerja:<\/strong><\/p>\n\n\n\n Komponen yang Digunakan:<\/strong><\/p>\n\n\n\n Skema:<\/strong><\/p>\n\n\n\n <\/p>\n\n\n\n Kode:<\/strong><\/p>\n\n\n\n Proyek ini adalah permainan tebak angka interaktif berbasis web yang berjalan secara lokal di ESP32. Pengguna terhubung ke hotspot WiFi yang dibuat oleh ESP32 dan mengakses permainan melalui browser. Setiap kali pengguna menebak angka, ESP32 akan memberikan umpan balik melalui web, serta indikator fisik seperti LED dan buzzer: Cara Kerja: Komponen yang Digunakan: Skema: Komponen…<\/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-52","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\/52","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=52"}],"version-history":[{"count":1,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=\/wp\/v2\/posts\/52\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=\/wp\/v2\/posts\/52\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.webie.my.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
\n
\n
\n
![\"\"](\"https:\/\/blog.webie.my.id\/wp-content\/uploads\/2026\/02\/image-10.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/blog.webie.my.id\/wp-content\/uploads\/2026\/02\/image-11.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/blog.webie.my.id\/wp-content\/uploads\/2026\/02\/image-12.png\")
<\/figure>\n\n\n\n\n
Komponen<\/strong><\/td> Koneksi ke ESP32<\/strong><\/td><\/tr><\/thead> LED Hijau (+)<\/td> GPIO 2 (via resistor 220\u03a9)<\/td><\/tr> LED Hijau (\u2013)<\/td> GND<\/td><\/tr> LED Merah (+)<\/td> GPIO 4 (via resistor 220\u03a9)<\/td><\/tr> LED Merah (\u2013)<\/td> GND<\/td><\/tr> Buzzer (+)<\/td> GPIO 5<\/td><\/tr> Buzzer (\u2013)<\/td> GND<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n #include <WiFi.h>\n#include <WebServer.h>\n#include <stdlib.h> \/\/ Untuk fungsi random()\n\n\/\/ Konfigurasi WiFi\nconst char* ssid = \"Game-Angka\";\nconst char* password = \"12345678\";\n\nWebServer server(80);\n\n\/\/ Pin LED dan buzzer\nconst int greenLed = 2; \/\/ LED hijau\nconst int redLed = 4; \/\/ LED merah\nconst int buzzer = 5; \/\/ Buzzer\n\nint targetNumber = 0; \/\/ Angka yang harus ditebak\nbool gameActive = false;\nint attemptCount = 0; \/\/ Jumlah percobaan\n\n\/\/ Halaman web\nString generateWebPage() {\n return R\"=====(\n<!DOCTYPE html>\n<html>\n<head>\n <title>Game Tebak Angka<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <style>\n body {\n font-family: Arial, sans-serif;\n text-align: center;\n margin: 0;\n padding: 0;\n background-color: #f4f4f9;\n }\n h1 {\n color: #333;\n font-size: 2rem;\n margin-top: 20px;\n }\n p {\n font-size: 1.5rem;\n color: #555;\n }\n input[type=\"number\"] {\n font-size: 1.5rem;\n padding: 10px;\n width: 100px;\n margin: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n }\n button {\n font-size: 1.5rem;\n padding: 10px 20px;\n margin: 10px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n }\n button:hover {\n background-color: #0056b3;\n }\n .result {\n font-size: 1.5rem;\n margin-top: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Game Tebak Angka<\/h1>\n <p>Masukkan angka antara 1 - 100<\/p>\n <input id=\"guess\" type=\"number\" min=\"1\" max=\"100\">\n <button onclick=\"submitGuess()\">Tebak<\/button>\n <p id=\"result\" class=\"result\"><\/p>\n <p id=\"attempts\" class=\"result\"><\/p>\n <button onclick=\"startGame()\">Mulai Game Baru<\/button>\n <script>\n function submitGuess() {\n const inputElement = document.getElementById('guess');\n const guess = inputElement.value;\n fetch('\/guess?number=' + guess)\n .then(response => response.text())\n .then(data => {\n document.getElementById('result').innerHTML = data;\n updateAttempts();\n inputElement.value = \"\"; \/\/ Kosongkan input\n });\n }\n\n function startGame() {\n fetch('\/start')\n .then(response => response.text())\n .then(data => {\n document.getElementById('result').innerHTML = data;\n document.getElementById('attempts').innerHTML = \"\";\n document.getElementById('guess').value = \"\"; \/\/ Kosongkan input\n });\n }\n\n function updateAttempts() {\n fetch('\/attempts')\n .then(response => response.text())\n .then(data => {\n document.getElementById('attempts').innerHTML = \"Jumlah Percobaan: \" + data;\n });\n }\n <\/script>\n<\/body>\n<\/html>\n)=====\";\n}\n\n\/\/ Fungsi untuk memulai game\nvoid startGame() {\n targetNumber = random(1, 101); \/\/ Pilih angka acak antara 1 hingga 100\n gameActive = true;\n attemptCount = 0; \/\/ Reset jumlah percobaan\n digitalWrite(greenLed, LOW); \/\/ Matikan LED hijau\n digitalWrite(redLed, LOW); \/\/ Matikan LED merah\n digitalWrite(buzzer, LOW); \/\/ Matikan buzzer\n server.send(200, \"text\/plain\", \"Game dimulai!<br \/>Tebak angka antara 1 hingga 100.\");\n}\n\n\n\/\/ Fungsi untuk memeriksa tebakan\nvoid checkGuess() {\n if (!gameActive) {\n server.send(200, \"text\/plain\", \"Game belum dimulai.<br \/>Klik 'Mulai Game Baru' untuk bermain.\");\n return;\n }\n\n if (!server.hasArg(\"number\")) {\n server.send(400, \"text\/plain\", \"Masukkan angka untuk menebak!\");\n return;\n }\n\n int guess = server.arg(\"number\").toInt();\n\n if (guess == targetNumber) {\n gameActive = false;\n digitalWrite(greenLed, HIGH); \/\/ Nyalakan LED hijau\n digitalWrite(buzzer, HIGH); \/\/ Nyalakan buzzer selama 3 detik\n delay(3000);\n digitalWrite(greenLed, LOW); \/\/ Matikan LED hijau\n digitalWrite(buzzer, LOW); \/\/ Matikan buzzer\n server.send(200, \"text\/plain\", \"Benar! Angkanya adalah \" + String(targetNumber) + \".<br \/>Klik 'Mulai Game Baru' untuk bermain lagi.\");\n } else {\n attemptCount++; \/\/ Tambahkan jumlah percobaan\n digitalWrite(redLed, HIGH); \/\/ Nyalakan LED merah\n digitalWrite(buzzer, HIGH); \/\/ Nyalakan buzzer selama 1 detik\n delay(1000);\n digitalWrite(redLed, LOW); \/\/ Matikan LED merah\n digitalWrite(buzzer, LOW); \/\/ Matikan buzzer\n\n if (guess < targetNumber) {\n server.send(200, \"text\/plain\", \"Salah! Angkanya lebih besar dari \" + String(guess) + \".\");\n } else {\n server.send(200, \"text\/plain\", \"Salah! Angkanya lebih kecil dari \" + String(guess) + \".\");\n }\n }\n}\n\n\/\/ Fungsi untuk mengirim jumlah percobaan\nvoid sendAttempts() {\n server.send(200, \"text\/plain\", String(attemptCount));\n}\n\nvoid setup() {\n Serial.begin(115200);\n\n \/\/ Inisialisasi pin\n pinMode(greenLed, OUTPUT);\n pinMode(redLed, OUTPUT);\n pinMode(buzzer, OUTPUT);\n\n digitalWrite(greenLed, LOW);\n digitalWrite(redLed, LOW);\n digitalWrite(buzzer, LOW);\n\n \/\/ Konfigurasi WiFi\n WiFi.softAP(ssid, password);\n Serial.println(\"WiFi AP dimulai\");\n\n \/\/ Rute server\n server.on(\"\/\", []() { server.send(200, \"text\/html\", generateWebPage()); });\n server.on(\"\/start\", startGame);\n server.on(\"\/guess\", checkGuess);\n server.on(\"\/attempts\", sendAttempts);\n\n server.begin();\n Serial.println(\"Server dimulai\");\n}\n\nvoid loop() {\n server.handleClient();\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"