Hangman遊戲WebApp
Prompt: 產生一個hangman遊戲的 Web應用，程式碼全部放於index.html，單字為常見的程式語言，測試次數設定為10。
<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hangman - 程式語言猜單字遊戲</title> <style> body { font-family: Arial, sans-serif; text-align: center; background-color: #f4f4f4; } h1 { color: #333; } .word-display { font-size: 2em; letter-spacing: 10px; margin: 20px 0; } .info { font-size: 1.2em; margin: 10px; } .letters { display: flex; flex-wrap: wrap; justify-content: center; max-width: 400px; margin: 20px auto; } .letter { width: 40px; height: 40px; margin: 5px; font-size: 1.2em; border: 1px solid #000; background-color: #fff; cursor: pointer; } .letter:disabled { background-color: #ccc; cursor: not-allowed; } .status { font-size: 1.5em; margin: 20px; color: #d9534f; } #reset { margin-top: 20px; padding: 10px 20px; font-size: 1em; background-color: #007bff; color: white; border: none; cursor: pointer; border-radius: 5px; } #reset:hover { background-color: #0056b3; } </style> </head> <body> <h1>Hangman - 猜單字遊戲</h1> <p class="info">猜測的單字為常見的程式語言</p> <div class="word-display" id="word-display"></div> <p class="info">剩餘嘗試次數：<span id="attempts">10</span></p> <div class="letters" id="letters"></div> <p class="status" id="status"></p> <button id="reset">重新開始</button> <script> const words = ["JAVASCRIPT", "PYTHON", "JAVA", "RUBY", "GO", "SWIFT", "KOTLIN", "PHP", "PERL", "HTML", "CSS"]; let chosenWord = words[Math.floor(Math.random() * words.length)]; let guessedLetters = new Set(); let maxAttempts = 10; let remainingAttempts = maxAttempts; const wordDisplay = document.getElementById("word-display"); const lettersContainer = document.getElementById("letters"); const attemptsDisplay = document.getElementById("attempts"); const statusDisplay = document.getElementById("status"); const resetButton = document.getElementById("reset"); function updateWordDisplay() { wordDisplay.textContent = chosenWord.split("").map(letter => guessedLetters.has(letter) ? letter : "_" ).join(" "); } function checkGameStatus() { if (wordDisplay.textContent.replace(/\s/g, "") === chosenWord) { statusDisplay.textContent = "🎉 恭喜！你猜對了！"; disableAllButtons(); } else if (remainingAttempts <= 0) { statusDisplay.textContent = `😢 你輸了！正確答案是：${chosenWord}`; disableAllButtons(); } } function disableAllButtons() { document.querySelectorAll(".letter").forEach(button => button.disabled = true); } function handleLetterClick(event) { const letter = event.target.textContent; if (chosenWord.includes(letter)) { guessedLetters.add(letter); } else { remainingAttempts--; attemptsDisplay.textContent = remainingAttempts; } event.target.disabled = true; updateWordDisplay(); checkGameStatus(); } function createLetterButtons() { lettersContainer.innerHTML = ""; for (let i = 65; i <= 90; i++) { const button = document.createElement("button"); button.textContent = String.fromCharCode(i); button.classList.add("letter"); button.addEventListener("click", handleLetterClick); lettersContainer.appendChild(button); } } function resetGame() { chosenWord = words[Math.floor(Math.random() * words.length)]; guessedLetters.clear(); remainingAttempts = maxAttempts; attemptsDisplay.textContent = remainingAttempts; statusDisplay.textContent = ""; createLetterButtons(); updateWordDisplay(); } resetButton.addEventListener("click", resetGame); createLetterButtons(); updateWordDisplay(); </script> </body> </html>
