Game Tebak Hewan HTML Javascript

Ini adalah contoh game tebak gambar yang sederhana, namun cukup menarik untuk dikembangkan. Hanya dengan memanfaatkan gambar dari emoji kita bisa membuat permainan tebak gambar yang menarik yang menyertakan fitur skor dan limit waktu permainan. Bagi yang ingin mengembangkan untuk soal dalam bentuk emoji/gambar lain atau dalam bentuk soal text, kode ini juga bisa dimanfaatkan untuk modifikasi kearah tersebut.

Tebak Hewan

Skor: 0
Percobaan: 5
Waktu: 30s


  
<style>  
   .bungkusnye {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
   }  
      .judulnye {text-align:center;  
           padding-bottom : 25px}  
   .bingkai {  
    background: #FFF;  
    color: black;  
    border-radius: 10px;  
    padding: 2em;  
    margin-top: 2em;  
    width: 90%;  
    max-width: 500px;  
    box-shadow: 0 0 10px rgba(0,0,0,0.3);  
   }  
   .status-bar {  
    display: flex;  
    justify-content: space-between;  
    margin-bottom: 1em;  
   }  
   .Objek-container {  
    font-size: 5em;  
    text-align: center;  
   }  
   #KeyBoard-container {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 10px;  
    justify-content: center;  
    margin-bottom: 1em;  
   }  
   .KeyBoard {  
    width: 1.8em;  
    height: 1.8em;  
    font-size: 1.5em;  
      -webkit-box-shadow: 0 3.5px 11.5px -1.5px #a4a4a4;  
      -moz-box-shadow: 0 3.5px 11.5px -1.5px #a4a4a4;  
      box-shadow: 0 3.5px 11.5px -1.5px #a4a4a4;  
    cursor: pointer;  
   }  
      .KeyBoard:hover{  
      background:#3da1ff;  
      color: #FFF;  
      }       
   .used {  
      -webkit-box-shadow: 0 3.5px 0 -32px #a4a4a4;  
      -moz-box-shadow: 0 3.5px 0 -32px #a4a4a4;  
      box-shadow: 0 3.5px 0 -32px #a4a4a4;  
    cursor: not-allowed;  
   }  
   .inputSpace {  
    font-weight: bold;  
   }  
   #userInputSection {  
    display: flex;  
    justify-content: center;  
    gap: 10px;  
    margin-bottom: 1em;  
   }  
   #result {  
    font-size: 1.2em;  
    margin: 1em 0;  
    color: darkgreen;  
    text-align: center;  
   }  
      #start{width:100%;padding:10px;font-size:1em;font-weight:bold;border:none;border-radius:10px;background:#007bff;color:#fff;cursor:pointer;display:none;}  
      #start:hover{background:#0056b3}  
   #waktu {  
    font-weight: bold;  
   }  
   #nilai {  
    font-weight: bold;  
   }  
   #usaha {  
    font-weight: bold;  
   }  
  </style>  
 </head>  
 <body>  
 <div class="bungkusnye">  
  <div class="bingkai">  
  <h2 class="judulnye">Tebak Hewan</h2>  
   <div class="status-bar">  
    <div id="nilai">Skor: 0</div>  
    <div id="usaha">Percobaan: 5</div>  
    <div id="waktu">Waktu: 30s</div>  
   </div>  
   <div class="Objek-container" id="ObjekNye"></div>  
   <div id="userInputSection"></div>  
   <div id="KeyBoard-container"></div>  
   <div id="result"></div>  
   <button id="start">Main Lagi</button>  
  </div>  
  </div>  
 <script>  
 // array dari gambar objek dan textnya  
 const soal = {  
      "ðŸĶ’": "Jerapah",  
      "ðŸĶŽ": "Banteng",  
      "ðŸĶ“": "Zebra",  
      "ðŸĶŒ": "Rusa",  
      "ðŸĶ˜": "Kanguru",  
      "ðŸĶĨ": "Kungkang",  
      "ðŸĶŦ": "Berang Berang",  
      "ðŸŋ️": "Bajing",  
      "ðŸĶ­": "Anjing Laut",  
      "ðŸĒ": "Kura Kura",  
      "ðŸĶ§": "Orang Utan",  
      "🐍": "Ular",  
      "ðŸĶŽ": "Kadal",  
      "🐅": "Harimau",  
      "🐆": "Macan Tutul",  
      "🐊": "Unta",  
      "🐘": "Gajah",  
      "ðŸĶ": "Badak",  
      "ðŸĶ›": "Kuda Nil",  
      "🐐": "Kambing",  
      "🐏": "Domba",  
      "🐎": "Kuda",  
      "🐃": "Kerbau",  
      "🐄": "Sapi",  
      "🐖": "Babi",  
      "ðŸĶ‡": "Kelelawar",  
      "🐒": "Monyet",  
      "ðŸĶ": "Gorila",  
      "🐝": "Lebah",  
      "🐛": "Ulat",  
      "ðŸĶ‹": "Kupu Kupu",  
      "🐌": "Siput",  
      "🐞": "Kumbang",  
      "🐜": "Semut",  
      "ðŸŠą": "Cacing",  
      "ðŸŠģ": "Kecoa",  
      "ðŸĶ—": "Jangkrik",  
      "ðŸĶ‚": "Kalajengking",  
      "ðŸĶŸ": "Nyamuk",  
      "🐊": "Buaya",  
      "🐋": "Paus",  
      "ðŸĶˆ": "Hiu",  
      "🐎": "Lumba Lumba",  
      "ðŸĶ": "Udang",  
      "ðŸĶ€": "Kepiting",  
      "ðŸĶ‘": "Cumi Cumi",  
      "🐙": "Gurita",  
      "🐓": "Ayam",  
      "ðŸĶ…": "Rajawali",  
      "ðŸĶĒ": "Angsa",  
      "ðŸĶ†": "Bebek",  
      "ðŸĶĐ": "Flamingo",  
      "ðŸĶœ": "Kakatua",  
      "ðŸĶ‰": "Burung Hantu",  
      "ðŸĶš": "Merak",  
      "🐕": "Anjing",  
      "🐈": "Kucing",  
      "🐇": "Kelinci",  
      "🐀": "Tikus",  
      "ðŸĶĻ": "Sigung",  
      "ðŸĶĄ": "Luwak",  
      "ðŸĶ”": "Landak",  
      "🊞": "Ubur Ubur",  
      "🕷": "Laba Laba",  
      "🊰": "Lalat",  
      "🐧": "Pinguin",  
      "ðŸĶŠ": "Kerang",  
 };  
 const SetDetik = 30;          // set berapa detik waktu untuk menjawab  
 const SetNyawa = 5;               // set berapa banyak percobaan yang tersedia dalam 1 jawaban  
 const NamaObjek = Object.keys(soal);  
 let usedHints = [];  
 let nilai = 0, lossCount = SetNyawa, winCount = 0, waktu = SetDetik, timerInterval;  
 let randomHint = "", randomWord = "";  
 const nilaiDisplay = document.getElementById("nilai");  
 const usahaDisplay = document.getElementById("usaha");  
 const waktuDisplay = document.getElementById("waktu");  
 const TampilinObjek = document.getElementById("ObjekNye");  
 const userInput = document.getElementById("userInputSection");  
 const KeyBoardContainer = document.getElementById("KeyBoard-container");  
 const resultDisplay = document.getElementById("result");  
 const startButton = document.getElementById("start");  
 function updateDisplays() {  
      nilaiDisplay.textContent = "Skor: " + nilai;  
      usahaDisplay.textContent = "Percobaan: " + lossCount;  
      waktuDisplay.textContent = "Waktu: " + waktu + " Detik";  
 }  
 function startwaktu() {  
      clearInterval(timerInterval);  
      waktu = SetDetik;  
      waktuDisplay.textContent = "Waktu: " + waktu + " Detik";  
      timerInterval = setInterval(() => {  
      waktu--;  
      waktuDisplay.textContent = "Waktu: " + waktu + " Detik";  
      if (waktu === 0) {  
           clearInterval(timerInterval);  
           Berakhir("⏰ Waktu Habis Bro!"); // set pernyataan kalo waktu abis dan tidak bisa jawab.  
      }  
      }, 1000);  
 }  
 function RandomObjek() {  
      if (usedHints.length === NamaObjek.length) usedHints = [];  
      let availableHints = NamaObjek.filter(h => !usedHints.includes(h));  
      randomHint = availableHints[Math.floor(Math.random() * availableHints.length)];  
      usedHints.push(randomHint);  
      randomWord = soal[randomHint];  
 }  
 function NamaHewan() {  
      userInput.innerHTML = "";  
      winCount = 0;  
      randomWord.split("").forEach(char => {  
           let span = document.createElement("span");  
           span.className = "inputSpace";  
           if (char === " ") {  
                span.textContent = " ";  
                winCount++;  
           } else {  
                span.textContent = "_";  
           }  
      userInput.appendChild(span);  
      });  
 }  
 function BuatKey() {  
      KeyBoardContainer.innerHTML = "";  
      for (let i = 65; i <= 90; i++) {  
           let btn = document.createElement("button");  
           btn.className = "KeyBoard";  
           btn.textContent = String.fromCharCode(i);  
           btn.addEventListener("click", handleGuess);  
           KeyBoardContainer.appendChild(btn);  
      }  
 }  
 function handleGuess(e) {  
      const btn = e.target;  
      const char = btn.textContent;  
      btn.classList.add("used");  
      btn.disabled = true;  
      let charArray = randomWord.toUpperCase().split("");  
      let inputSpaces = document.getElementsByClassName("inputSpace");  
      if (charArray.includes(char)) {  
           charArray.forEach((c, i) => {  
                if (c === char) {  
                     inputSpaces[i].textContent = c;  
                     winCount++;  
                }  
           });  
           if (winCount === charArray.length) {  
                clearInterval(timerInterval);  
                nilai++;  
                resultDisplay.textContent = "✅ Benar!";     // set kalau jawaban benar.  
                updateDisplays();  
                setTimeout(Lanjutin, 1000);  
           }  
      } else {  
           lossCount--;  
           updateDisplays();  
           if (lossCount === 0) {  
                clearInterval(timerInterval);  
                Berakhir("❌ Kamu Gagal Jawab!");          // set kalau gagal menjawab untuk beberapa kali perobaan.  
           }  
      }  
 }  
 function Lanjutin() {  
      resultDisplay.textContent = "";  
      lossCount = SetNyawa;  
      updateDisplays();  
      RandomObjek();  
      TampilinObjek.textContent = randomHint;  
      NamaHewan();  
      BuatKey();  
      startwaktu();  
 }  
 function Berakhir(message) {  
      resultDisplay.textContent = message;  
      KeyBoardContainer.innerHTML = "";  
      startButton.style.display = "inline-block";  
      startButton.onclick = () => {  
           nilai = 0;  
           lossCount = SetNyawa;  
           updateDisplays();  
           startButton.style.display = "none";  
           resultDisplay.textContent = "";  
           Lanjutin();  
      };  
 }  
 window.onload = () => {  
      updateDisplays();  
      Lanjutin();  
 };  
 </script>  
 </body>

Komentar

Posting Komentar