how to make hangman
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Hangman Game</title> <style> body { font-family: Arial, sans-serif; background: #222; color: #f5f5f5; display: flex; flex-direction: column; align-items: center; padding-top: 40px; } h1 { margin-bottom: 10px; } #word { font-size: 2rem; letter-spacing: 8px; margin: 20px 0; } #message { margin: 10px 0; min-height: 20px; } #tries { margin: 10px 0; } #letters { margin-top: 20px; } #letters button { margin: 3px; padding: 6px 10px; border: none; border-radius: 4px; background: #444; color: #f5f5f5; cursor: pointer; } #letters button:disabled { background: #666; cursor: default; } #reset { margin-top: 20px; padding: 8px 14px; border: none; border-radius: 4px; background: #1e90ff; color: white; cursor: pointer; } </style> </head> <body> <h1>Hangman</h1> <div id=”word”></div> <div id=”message”></div> <div id=”tries”></div> <div id=”letters”></div> <button id=”reset”>New Game</button> <script> const words = [“javascript”, “hangman”, “computer”, “browser”, “coding”, “programming”, “internet”]; let secretWord = “”; let guessedLetters = []; let remainingTries = 6; const maxTries = 6; const wordDiv = document.getElementById(“word”); const messageDiv = document.getElementById(“message”); const triesDiv = document.getElementById(“tries”); const lettersDiv = document.getElementById(“letters”); const resetBtn = document.getElementById(“reset”); function pickWord() { secretWord = words[Math.floor(Math.random() * words.length)]; } function updateWordDisplay() { let display = “”; for (let char of secretWord) { if (guessedLetters.includes(char)) { display += char + ” “; } else { display += “_ “; } } wordDiv.textContent = display.trim(); } function updateTriesDisplay() { triesDiv.textContent = “Tries left: ” + remainingTries; } function checkGameStatus() { const allRevealed = secretWord.split(“”).every(c => guessedLetters.includes(c)); if (allRevealed) { messageDiv.textContent = “You win! The word was: ” + secretWord; disableAllButtons(); } else if (remainingTries <= 0) { messageDiv.textContent = “You lost! The word was: ” + secretWord; disableAllButtons(); } } function disableAllButtons() { const buttons = lettersDiv.querySelectorAll(“button”); buttons.forEach(btn => btn.disabled = true); } function handleGuess(letter, button) { if (guessedLetters.includes(letter) || remainingTries <= 0) return; guessedLetters.push(letter); button.disabled = true; if (!secretWord.includes(letter)) { remainingTries–; } updateWordDisplay(); updateTriesDisplay(); checkGameStatus(); } function createLetterButtons() { lettersDiv.innerHTML = “”; const alphabet = “abcdefghijklmnopqrstuvwxyz”; for (let char of alphabet) { const btn = document.createElement(“button”); btn.textContent = char; btn.addEventListener(“click”, () => handleGuess(char, btn)); lettersDiv.appendChild(btn); } } function newGame() { guessedLetters = []; remainingTries = maxTries; messageDiv.textContent = “”; pickWord(); updateWordDisplay(); updateTriesDisplay(); createLetterButtons(); } resetBtn.addEventListener(“click”, newGame); // Start first game newGame(); </script> </body>
Leave a Reply