Untitled
unknown
plain_text
10 months ago
5.2 kB
4
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hangman Game</title> <style> body, html { height: 100%; margin: 0; display: flex; justify-content: center; align-items: center; background-color: #f0f0f0; font-family: Arial, sans-serif; } #hangman-container { text-align: center; } #word-display { font-size: 2em; margin-bottom: 20px; } #keyboard { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 20px; } .key { padding: 10px; font-size: 1.5em; text-align: center; background-color: #4CAF50; color: white; cursor: pointer; transition: background-color 0.3s; } .key:hover { background-color: #45a049; } .key.used { background-color: #ccc; cursor: default; } #hangman-image { margin-top: 20px; max-width: 100%; display: none; /* Hidden initially */ } #game-over { display: none; font-size: 1.5em; margin-top: 20px; } </style> </head> <body> <div id="hangman-container"> <h1>Hangman Game</h1> <div id="word-display"></div> <div id="keyboard"></div> <img id="hangman-image" src="hangman0.png" alt="Hangman" /> <div id="game-over"></div> </div> <script> const words = ["JAVASCRIPT", "HTML", "CSS", "PYTHON", "JAVA", "PHP", "RUBY", "SWIFT", "GO"]; let chosenWord = words[Math.floor(Math.random() * words.length)]; let guessedWord = []; let wrongAttempts = 0; const maxAttempts = 6; // Hangman image has 6 stages const wordDisplay = document.getElementById("word-display"); const keyboard = document.getElementById("keyboard"); const hangmanImage = document.getElementById("hangman-image"); const gameOver = document.getElementById("game-over"); // Initialize the game function initializeGame() { chosenWord = words[Math.floor(Math.random() * words.length)]; guessedWord = Array(chosenWord.length).fill("_"); wordDisplay.textContent = guessedWord.join(" "); wrongAttempts = 0; updateHangmanImage(); displayKeyboard(); hangmanImage.style.display = "none"; gameOver.style.display = "none"; } // Update the hangman image function updateHangmanImage() { hangmanImage.src = `hangman${wrongAttempts}.png`; } // Display keyboard function displayKeyboard() { keyboard.innerHTML = ""; const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; for (let letter of alphabet) { const button = document.createElement("button"); button.textContent = letter; button.classList.add("key"); button.addEventListener("click", () => { handleGuess(letter); button.classList.add("used"); button.disabled = true; }); keyboard.appendChild(button); } } // Handle letter guess function handleGuess(letter) { let foundLetter = false; for (let i = 0; i < chosenWord.length; i++) { if (chosenWord[i] === letter) { guessedWord[i] = letter; foundLetter = true; } } wordDisplay.textContent = guessedWord.join(" "); if (!foundLetter) { wrongAttempts++; updateHangmanImage(); } checkGameOver(); } // Check if game is over function checkGameOver() { if (wrongAttempts >= maxAttempts) { gameOver.textContent = `Game Over! The word was "${chosenWord}".`; gameOver.style.color = "red"; gameOver.style.display = "block"; disableKeyboard(); } else if (!guessedWord.includes("_")) { gameOver.textContent = "You Win!"; gameOver.style.color = "green"; gameOver.style.display = "block"; disableKeyboard(); } } // Disable keyboard after game over function disableKeyboard() { const keys = document.querySelectorAll(".key"); keys.forEach(key => { key.disabled = true; }); } // Start the game initializeGame(); </script> </body> </html>
Editor is loading...
Leave a Comment