{"id":15074,"date":"2025-02-16T10:25:59","date_gmt":"2025-02-16T02:25:59","guid":{"rendered":"https:\/\/fgchen.com\/wpedu\/?p=15074"},"modified":"2026-03-30T14:29:00","modified_gmt":"2026-03-30T06:29:00","slug":"%e5%88%a9%e7%94%a8ai%e5%8d%94%e5%8a%a9%e7%94%9f%e6%88%90web%e8%88%87%e8%a1%8c%e5%8b%95%e6%87%89%e7%94%a8-%e4%ba%95%e5%ad%97%e9%81%8a%e6%88%b2","status":"publish","type":"post","link":"https:\/\/fgchen.com\/wpedu\/2025\/02\/%e5%88%a9%e7%94%a8ai%e5%8d%94%e5%8a%a9%e7%94%9f%e6%88%90web%e8%88%87%e8%a1%8c%e5%8b%95%e6%87%89%e7%94%a8-%e4%ba%95%e5%ad%97%e9%81%8a%e6%88%b2\/","title":{"rendered":"\u53ea\u898110\u5206\u9418\uff01\u5229\u7528AI\u5354\u52a9\u751f\u6210Web\u8207\u884c\u52d5\u61c9\u7528 – \u4e95\u5b57\u904a\u6232"},"content":{"rendered":"

\u4e00\u500b\u50c5\u9700\u7c21\u55ae\u57fa\u790e\u7a0b\u5f0f\u8a2d\u8a08\u89c0\u5ff5\uff0c\u751a\u81f3\u5b8c\u5168\u7a0b\u5f0f\u8a2d\u8a08\u4e0d\u61c2\u7684\u4eba\uff0c\u53ef\u4ee5\u88fd\u4f5c\u51fa\u4e00\u500bWeb\u8207Mobile\u61c9\u7528\u3002\u4ee5\u4e0b\u662f\u4f7f\u7528\u7684\u5de5\u5177\uff1a<\/p>\n

    \n
  1. ChatGPT<\/strong><\/li>\n
  2. Codepen<\/strong><\/li>\n
  3. Webintoapp<\/strong><\/li>\n<\/ol>\n

    \u7b2c\u4e00\u6b65\uff1a\u4f7f\u7528ChatGPT\u751f\u6210html, css, JavaScript\u7a0b\u5f0f\u78bc
    Prompt: \u7522\u751f\u4e00\u500bTic-Tac-Toe\u904a\u6232\u7684 Web\u61c9\u7528\uff0c\u5206\u6210html, css, javascript\u4e09\u500b\u90e8\u4efd\uff0c\u5206\u5225\u5217\u51fa\u3002<\/h2>\n

    index.html<\/h3>\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>Tic-Tac-Toe \u4e95\u5b57\u904a\u6232<\/title>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n    <h1>Tic-Tac-Toe \u4e95\u5b57\u904a\u6232<\/h1>\n    <div class=\"game-container\">\n        <div id=\"board\">\n            <div class=\"cell\" data-index=\"0\"><\/div>\n            <div class=\"cell\" data-index=\"1\"><\/div>\n            <div class=\"cell\" data-index=\"2\"><\/div>\n            <div class=\"cell\" data-index=\"3\"><\/div>\n            <div class=\"cell\" data-index=\"4\"><\/div>\n            <div class=\"cell\" data-index=\"5\"><\/div>\n            <div class=\"cell\" data-index=\"6\"><\/div>\n            <div class=\"cell\" data-index=\"7\"><\/div>\n            <div class=\"cell\" data-index=\"8\"><\/div>\n        <\/div>\n        <p id=\"status\">\u73a9\u5bb6 X \u7684\u56de\u5408<\/p>\n        <button id=\"reset\">\u91cd\u65b0\u958b\u59cb<\/button>\n    <\/div>\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n<\/pre>\n
    styles.css<\/h3>\n
    body {\n    font-family: Arial, sans-serif;\n    text-align: center;\n    background-color: #f4f4f4;\n}\n\nh1 {\n    color: #333;\n}\n\n.game-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-top: 20px;\n}\n\n#board {\n    display: grid;\n    grid-template-columns: repeat(3, 100px);\n    grid-template-rows: repeat(3, 100px);\n    gap: 5px;\n}\n\n.cell {\n    width: 100px;\n    height: 100px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 2em;\n    background-color: white;\n    border: 2px solid #000;\n    cursor: pointer;\n}\n\n.cell:hover {\n    background-color: #ddd;\n}\n\n#status {\n    font-size: 1.2em;\n    margin-top: 10px;\n}\n\n#reset {\n    margin-top: 10px;\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\n#reset:hover {\n    background-color: #0056b3;\n}\n<\/pre>\n
    Script.js<\/h3>\n
    const board = document.getElementById(\"board\");\nconst statusText = document.getElementById(\"status\");\nconst resetButton = document.getElementById(\"reset\");\nconst cells = document.querySelectorAll(\".cell\");\n\nlet currentPlayer = \"X\";\nlet boardState = [\"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"];\nlet gameActive = true;\n\nconst winPatterns = [\n    [0, 1, 2], [3, 4, 5], [6, 7, 8], \/\/ \u6a6b\u6392\n    [0, 3, 6], [1, 4, 7], [2, 5, 8], \/\/ \u76f4\u6392\n    [0, 4, 8], [2, 4, 6]             \/\/ \u659c\u7dda\n];\n\n\/\/ \u76e3\u807d\u73a9\u5bb6\u9ede\u64ca\u683c\u5b50\ncells.forEach(cell => {\n    cell.addEventListener(\"click\", handleCellClick);\n});\n\nfunction handleCellClick(event) {\n    const index = event.target.dataset.index;\n    \n    if (boardState[index] !== \"\" || !gameActive) return;\n\n    boardState[index] = currentPlayer;\n    event.target.textContent = currentPlayer;\n\n    if (checkWin(currentPlayer)) {\n        statusText.textContent = `\u73a9\u5bb6 ${currentPlayer} \u7372\u52dd\uff01`;\n        gameActive = false;\n        return;\n    }\n\n    if (boardState.every(cell => cell !== \"\")) {\n        statusText.textContent = \"\u5e73\u5c40\uff01\";\n        gameActive = false;\n        return;\n    }\n\n    currentPlayer = currentPlayer === \"X\" ? \"O\" : \"X\";\n    statusText.textContent = `\u73a9\u5bb6 ${currentPlayer} \u7684\u56de\u5408`;\n}\n\nfunction checkWin(player) {\n    return winPatterns.some(pattern => \n        pattern.every(index => boardState[index] === player)\n    );\n}\n\n\/\/ \u91cd\u65b0\u958b\u59cb\u904a\u6232\nresetButton.addEventListener(\"click\", () => {\n    boardState = [\"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"];\n    gameActive = true;\n    currentPlayer = \"X\";\n    statusText.textContent = \"\u73a9\u5bb6 X \u7684\u56de\u5408\";\n    cells.forEach(cell => cell.textContent = \"\");\n});\n<\/pre>\n\n\n
    \u7b2c\u4e8c\u6b65\uff1a\u4f7f\u7528CodePen\u5c07\u4e0a\u9762\u4e09\u6bb5\u7a0b\u5f0f\u5206\u5225\u8cbc\u4e0a\uff0c\u4e26\u4e14\u9032\u884c\u6e2c\u8a66\u3002<\/h2>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    \u7b2c\u4e09\u6b65\uff1a\u4f7f\u7528\u700f\u89bd\u5668\u6e2c\u8a66\u7a0b\u5f0f<\/h2>\n\n\n\n
    \u5728\u96fb\u8166\u7aef\u5efa\u7acb\u4e00\u500b\u8cc7\u6599\u593e(\u4f8b\uff1aminigame)\uff0c\u5c07\u4e0a\u9762\u4e09\u6bb5\u7a0b\u5f0f\u78bc\uff0c\u5132\u5b58\u6210index.html, styles.css, script.js<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    \u7b2c\u56db\u6b65\uff1a\u4f7f\u7528Webintoapp\u5c07\u904a\u6232Web\u61c9\u7528\u8f49\u63db\u70ba\u79fb\u52d5\u61c9\u7528<\/h2>\n\n\n\n
    \u5c07\u4e09\u500b\u6a94\u6848\u58d3\u7e2e\u6210zip\uff0c\u5230Webintoapp\u7db2\u7ad9\u8f49\u63db\u61c9\u7528\u8b8a\u6210Android app(APK)\uff0c\u4e0b\u8f09\u6253\u958bzip\uff0c\u53d6\u51faapk\u6a94\uff0c\u4e0a\u50b3\u81f3Android\u624b\u6a5f\/\u6a21\u64ec\u5668\u3002<\/p>\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    \u4e00\u500b\u50c5\u9700\u7c21\u55ae\u57fa\u790e\u7a0b\u5f0f\u8a2d\u8a08\u89c0\u5ff5\uff0c\u751a\u81f3\u5b8c\u5168\u7a0b\u5f0f\u8a2d\u8a08\u4e0d\u61c2\u7684\u4eba\uff0c\u53ef\u4ee5\u88fd\u4f5c\u51fa\u4e00\u500bWeb\u8207M … <\/p>\n","protected":false},"author":1,"featured_media":14977,"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":[251,266],"tags":[],"class_list":["post-15074","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category--ai-","category-266"],"_links":{"self":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/15074","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=15074"}],"version-history":[{"count":12,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/15074\/revisions"}],"predecessor-version":[{"id":15093,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/15074\/revisions\/15093"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media\/14977"}],"wp:attachment":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media?parent=15074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/categories?post=15074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/tags?post=15074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}