Spaces:
Running
Running
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Permainan Tebak Kata dengan Clue</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| text-align: center; | |
| background-color: #f0f0f0; | |
| margin: 0; | |
| padding: 20px; | |
| } | |
| h1 { | |
| color: #333; | |
| } | |
| #word-display { | |
| font-size: 2em; | |
| letter-spacing: 5px; | |
| margin: 20px 0; | |
| } | |
| #input { | |
| padding: 10px; | |
| font-size: 1em; | |
| width: 50px; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| font-size: 1em; | |
| margin: 10px; | |
| } | |
| #message { | |
| margin: 20px 0; | |
| font-weight: bold; | |
| } | |
| #chances { | |
| font-size: 1.2em; | |
| } | |
| #clue-display { | |
| margin: 10px 0; | |
| font-style: italic; | |
| color: #666; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Permainan Tebak Kata dengan Clue</h1> | |
| <p>Tebak kata dengan menebak huruf satu per satu. Kamu punya 6 kesempatan! Gunakan clue untuk bantuan (hanya sekali, kurangi 1 kesempatan).</p> | |
| <div id="word-display"></div> | |
| <div id="chances">Kesempatan tersisa: 6</div> | |
| <div id="clue-display"></div> | |
| <input type="text" id="input" maxlength="1" placeholder="Huruf"> | |
| <button onclick="guessLetter()">Tebak</button> | |
| <button onclick="showClue()" id="clue-btn">Clue</button> | |
| <button onclick="resetGame()">Reset</button> | |
| <div id="message"></div> | |
| <script> | |
| const wordList = [ | |
| { word: "anggur", category: "Buah" }, | |
| { word: "truck", category: "Kendaraan" }, | |
| { word: "rumah", category: "Bangunan" }, | |
| { word: "kucing", category: "Hewan" }, | |
| { word: "buku", category: "Benda" }, | |
| { word: "pantai", category: "Tempat" } | |
| ]; // Daftar kata dengan kategori | |
| let selectedWord = ""; | |
| let displayWord = []; | |
| let chances = 6; | |
| let guessedLetters = []; | |
| let clueUsed = false; | |
| let currentCategory = ""; | |
| function initGame() { | |
| const randomItem = wordList[Math.floor(Math.random() * wordList.length)]; | |
| selectedWord = randomItem.word; | |
| currentCategory = randomItem.category; | |
| displayWord = Array(selectedWord.length).fill("_"); | |
| chances = 6; | |
| guessedLetters = []; | |
| clueUsed = false; | |
| document.getElementById("clue-btn").disabled = false; | |
| updateDisplay(); | |
| } | |
| function updateDisplay() { | |
| document.getElementById("word-display").textContent = displayWord.join(" "); | |
| document.getElementById("chances").textContent = `Kesempatan tersisa: ${chances}`; | |
| document.getElementById("clue-display").textContent = clueUsed ? `Clue: ${currentCategory}` : ""; | |
| document.getElementById("message").textContent = ""; | |
| } | |
| function guessLetter() { | |
| const input = document.getElementById("input").value.toLowerCase(); | |
| if (!input || guessedLetters.includes(input)) { | |
| document.getElementById("message").textContent = "Huruf sudah ditebak atau kosong!"; | |
| return; | |
| } | |
| guessedLetters.push(input); | |
| let correct = false; | |
| for (let i = 0; i < selectedWord.length; i++) { | |
| if (selectedWord[i] === input) { | |
| displayWord[i] = input; | |
| correct = true; | |
| } | |
| } | |
| if (!correct) { | |
| chances--; | |
| } | |
| if (displayWord.join("") === selectedWord) { | |
| document.getElementById("message").textContent = "Selamat! Kamu menang!"; | |
| } else if (chances === 0) { | |
| document.getElementById("message").textContent = `Kalah! Kata aslinya: ${selectedWord}`; | |
| } | |
| updateDisplay(); | |
| document.getElementById("input").value = ""; | |
| } | |
| function showClue() { | |
| if (!clueUsed) { | |
| clueUsed = true; | |
| chances--; // Penalti 1 kesempatan | |
| document.getElementById("clue-btn").disabled = true; | |
| updateDisplay(); | |
| document.getElementById("message").textContent = "Clue digunakan! Kesempatan berkurang."; | |
| } | |
| } | |
| function resetGame() { | |
| initGame(); | |
| } | |
| initGame(); // Mulai permainan | |
| </script> | |
| </body> | |
| </html> | |