{"id":15098,"date":"2025-02-17T08:28:26","date_gmt":"2025-02-17T00:28:26","guid":{"rendered":"https:\/\/fgchen.com\/wpedu\/?p=15098"},"modified":"2026-03-30T14:28:58","modified_gmt":"2026-03-30T06:28:58","slug":"hangman%e9%81%8a%e6%88%b2webapp","status":"publish","type":"post","link":"https:\/\/fgchen.com\/wpedu\/2025\/02\/hangman%e9%81%8a%e6%88%b2webapp\/","title":{"rendered":"Hangman\u904a\u6232WebApp"},"content":{"rendered":"

Prompt: \u7522\u751f\u4e00\u500bhangman\u904a\u6232\u7684\u00a0Web\u61c9\u7528\uff0c\u7a0b\u5f0f\u78bc\u5168\u90e8\u653e\u65bcindex.html\uff0c\u55ae\u5b57\u70ba\u5e38\u898b\u7684\u7a0b\u5f0f\u8a9e\u8a00\uff0c\u6e2c\u8a66\u6b21\u6578\u8a2d\u5b9a\u70ba10\u3002<\/strong><\/p>\n


<!DOCTYPE html>\n<html lang=\"zh-TW\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Hangman - \u7a0b\u5f0f\u8a9e\u8a00\u731c\u55ae\u5b57\u904a\u6232<\/title>\n    <style>\n        body {\n            font-family: Arial, sans-serif;\n            text-align: center;\n            background-color: #f4f4f4;\n        }\n        h1 {\n            color: #333;\n        }\n        .word-display {\n            font-size: 2em;\n            letter-spacing: 10px;\n            margin: 20px 0;\n        }\n        .info {\n            font-size: 1.2em;\n            margin: 10px;\n        }\n        .letters {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: center;\n            max-width: 400px;\n            margin: 20px auto;\n        }\n        .letter {\n            width: 40px;\n            height: 40px;\n            margin: 5px;\n            font-size: 1.2em;\n            border: 1px solid #000;\n            background-color: #fff;\n            cursor: pointer;\n        }\n        .letter:disabled {\n            background-color: #ccc;\n            cursor: not-allowed;\n        }\n        .status {\n            font-size: 1.5em;\n            margin: 20px;\n            color: #d9534f;\n        }\n        #reset {\n            margin-top: 20px;\n            padding: 10px 20px;\n            font-size: 1em;\n            background-color: #007bff;\n            color: white;\n            border: none;\n            cursor: pointer;\n            border-radius: 5px;\n        }\n        #reset:hover {\n            background-color: #0056b3;\n        }\n    <\/style>\n<\/head>\n<body>\n    <h1>Hangman - \u731c\u55ae\u5b57\u904a\u6232<\/h1>\n    <p class=\"info\">\u731c\u6e2c\u7684\u55ae\u5b57\u70ba\u5e38\u898b\u7684\u7a0b\u5f0f\u8a9e\u8a00<\/p>\n    <div class=\"word-display\" id=\"word-display\"><\/div>\n    <p class=\"info\">\u5269\u9918\u5617\u8a66\u6b21\u6578\uff1a<span id=\"attempts\">10<\/span><\/p>\n    <div class=\"letters\" id=\"letters\"><\/div>\n    <p class=\"status\" id=\"status\"><\/p>\n    <button id=\"reset\">\u91cd\u65b0\u958b\u59cb<\/button>\n\n    <script>\n        const words = [\"JAVASCRIPT\", \"PYTHON\", \"JAVA\", \"RUBY\", \"GO\", \"SWIFT\", \"KOTLIN\", \"PHP\", \"PERL\", \"HTML\", \"CSS\"];\n        let chosenWord = words[Math.floor(Math.random() * words.length)];\n        let guessedLetters = new Set();\n        let maxAttempts = 10;\n        let remainingAttempts = maxAttempts;\n\n        const wordDisplay = document.getElementById(\"word-display\");\n        const lettersContainer = document.getElementById(\"letters\");\n        const attemptsDisplay = document.getElementById(\"attempts\");\n        const statusDisplay = document.getElementById(\"status\");\n        const resetButton = document.getElementById(\"reset\");\n\n        function updateWordDisplay() {\n            wordDisplay.textContent = chosenWord.split(\"\").map(letter => \n                guessedLetters.has(letter) ? letter : \"_\"\n            ).join(\" \");\n        }\n\n        function checkGameStatus() {\n            if (wordDisplay.textContent.replace(\/\\s\/g, \"\") === chosenWord) {\n                statusDisplay.textContent = \"\ud83c\udf89 \u606d\u559c\uff01\u4f60\u731c\u5c0d\u4e86\uff01\";\n                disableAllButtons();\n            } else if (remainingAttempts <= 0) {\n                statusDisplay.textContent = `\ud83d\ude22 \u4f60\u8f38\u4e86\uff01\u6b63\u78ba\u7b54\u6848\u662f\uff1a${chosenWord}`;\n                disableAllButtons();\n            }\n        }\n\n        function disableAllButtons() {\n            document.querySelectorAll(\".letter\").forEach(button => button.disabled = true);\n        }\n\n        function handleLetterClick(event) {\n            const letter = event.target.textContent;\n            if (chosenWord.includes(letter)) {\n                guessedLetters.add(letter);\n            } else {\n                remainingAttempts--;\n                attemptsDisplay.textContent = remainingAttempts;\n            }\n            event.target.disabled = true;\n            updateWordDisplay();\n            checkGameStatus();\n        }\n\n        function createLetterButtons() {\n            lettersContainer.innerHTML = \"\";\n            for (let i = 65; i <= 90; i++) {\n                const button = document.createElement(\"button\");\n                button.textContent = String.fromCharCode(i);\n                button.classList.add(\"letter\");\n                button.addEventListener(\"click\", handleLetterClick);\n                lettersContainer.appendChild(button);\n            }\n        }\n\n        function resetGame() {\n            chosenWord = words[Math.floor(Math.random() * words.length)];\n            guessedLetters.clear();\n            remainingAttempts = maxAttempts;\n            attemptsDisplay.textContent = remainingAttempts;\n            statusDisplay.textContent = \"\";\n            createLetterButtons();\n            updateWordDisplay();\n        }\n\n        resetButton.addEventListener(\"click\", resetGame);\n\n        createLetterButtons();\n        updateWordDisplay();\n    <\/script>\n<\/body>\n<\/html>\n<\/pre>\n
\u00a0<\/p>\n\n
\n
\"\"<\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"
Prompt: \u7522\u751f\u4e00\u500bhangman\u904a\u6232\u7684\u00a0Web\u61c9\u7528\uff0c\u7a0b\u5f0f\u78bc\u5168\u90e8\u653e\u65bcinde … <\/p>\n","protected":false},"author":1,"featured_media":14979,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[266],"tags":[],"class_list":["post-15098","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-266"],"_links":{"self":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/15098","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/comments?post=15098"}],"version-history":[{"count":2,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/15098\/revisions"}],"predecessor-version":[{"id":15102,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/15098\/revisions\/15102"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media\/14979"}],"wp:attachment":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media?parent=15098"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/categories?post=15098"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/tags?post=15098"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}