Hope in Learning To Code: Rose From Concrete’s Hangman Game

/* Scope everything to #hangmanGame */ #hangmanGame { font-family: Arial, sans-serif; margin: 20px auto; /* Centers the entire container on the page */ max-width: 600px; border: 3px solid red; /* 3px red border around the container */ padding: 10px; /* Optional padding so content isn’t up against the border */ /* NEW: Make it a flex container that aligns items to the center horizontally */ display: flex; /* Use Flexbox */ flex-direction: column; /* Stack items vertically */ align-items: center; /* Center child elements horizontally */ } #hangmanGame #wordDisplay { font-size: 1.5rem; letter-spacing: 0.2rem; /* The text will remain left-aligned by default, but the element is centered as a block */ } #hangmanGame #hangmanStage { margin-top: 1rem; white-space: pre-line; /* Preserves line breaks for ASCII art */ font-family: monospace; /* So ASCII art looks aligned */ } #hangmanGame #wrongLetters { margin-top: 1rem; font-weight: bold; color: #d00; /* Dark red for visibility, adjust to taste */ } #hangmanGame #message { margin: 1rem 0; font-weight: bold; } #hangmanGame input[type=”text”] { width: 100px; font-size: 1rem; padding: 0.2rem; } #hangmanGame button { font-size: 1rem; padding: 0.3rem 0.5rem; cursor: pointer; margin-top: 0.5rem; /* Slight spacing above buttons */ } #hangmanGame #restartBtn { display: none; background-color: #007BFF; color: #fff; border: none; } #hangmanGame #restartBtn:hover { background-color: #0056b3; } Guess Play Again // A list of 100 single words at about 8th-grade vocabulary level const words = [ “adventure”, “ambition”, “anniversary”, “appreciate”, “bargain”, “consequence”, “curriculum”, “demonstration”, “diversity”, “encyclopedia”, “enthusiasm”, “evaluate”, “evidence”, “extracurricular”, “foreshadowing”, “formulate”, “fortitude”, “honesty”, “hypothesis”, “inference”, “inheritance”, “innovation”, “magnitude”, “maturation”, “memoir”, “metaphor”, “millennium”, “novelty”, “perception”, “perspective”, “phenomenon”, “photosynthesis”, “pollination”, “probability”, “procrastination”, “prosperity”, “reflection”, “responsibility”, “analysis”, “appendage”, “authority”, “avalanche”, “boundary”, “camouflage”, “candidate”, “category”, “celestial”, “chemistry”, “clarify”, “corrosion”, “crystalline”, “deficiency”, “deliberate”, “diminish”, “directory”, “distortion”, “ecosystem”, “electron”, “equality”, “equation”, “equitable”, “estimate”, “expository”, “friction”, “gradient”, “hemisphere”, “hydrogen”, “imbalance”, “immortal”, “invaluable”, “irrigation”, “legislation”, “library”, “machinery”, “marvelous”, “migration”, “narrative”, “objective”, “offspring”, “ominous”, “parallel”, “particle”, “persistent”, “physical”, “polygon”, “predator”, “prejudice”, “primitive”, “radiation”, “revision”, “rigorous”, “rotation”, “sanctuary”, “sediment”, “sequence”, “sociology”, “solitary”, “triumphant”, “variable”, “velocity” ]; // ASCII stages of Hangman const hangmanStages = [ “”, “________”, “| |”, “| 0”, “| /|\\”, “| / \\”, “|” ]; let secretWord = “”; let scoreBoard = []; let stage = 0; let gameOver = false; let wrongGuesses = []; // Track wrong letters const wordDisplay = document.getElementById(“wordDisplay”); const hangmanStage = document.getElementById(“hangmanStage”); const wrongLettersDiv = document.getElementById(“wrongLetters”); const message = document.getElementById(“message”); const guessInput = document.getElementById(“guessInput”); const guessBtn = document.getElementById(“guessBtn”); const restartBtn = document.getElementById(“restartBtn”); // —————————– // Initialization / Start Game // —————————– function initGame() { stage = 0; gameOver = false; message.textContent = “”; hangmanStage.textContent = “”; restartBtn.style.display = “none”; wrongGuesses = []; wrongLettersDiv.textContent = “”; secretWord = words[Math.floor(Math.random() * words.length)]; scoreBoard = Array(secretWord.length).fill(“_”); wordDisplay.textContent = scoreBoard.join(” “); } // —————————– // Handle a Guess // —————————– function makeGuess() { if (gameOver) return; const guess = guessInput.value.toLowerCase(); guessInput.value = “”; // clear input if (!guess.match(/^[a-z]$/)) { message.textContent = “Please enter a single letter (a-z).”; return; } if (secretWord.includes(guess)) { for (let i = 0; i = hangmanStages.length – 1) { message.textContent = `You lose! The word was “${secretWord}”.`; endGame(); } } // —————————– // Update the ASCII Hangman // —————————– function updateHangmanStage(currentStage) { const partialStages = hangmanStages.slice(0, currentStage + 1); hangmanStage.textContent = partialStages.join(“\n”); } // —————————– // End the Game // —————————– function endGame() { gameOver = true; restartBtn.style.display = “inline-block”; } // —————————– // Restart Button Listener // —————————– function restartGame() { initGame(); } // —————————– // Event Listeners // —————————– guessBtn.addEventListener(“click”, makeGuess); restartBtn.addEventListener(“click”, restartGame); guessInput.addEventListener(“keyup”, function(event) { if (event.key === “Enter”) { makeGuess(); } }); initGame();