{"id":15105,"date":"2025-02-19T22:57:28","date_gmt":"2025-02-19T14:57:28","guid":{"rendered":"https:\/\/fgchen.com\/wpedu\/?p=15105"},"modified":"2026-03-30T14:28:56","modified_gmt":"2026-03-30T06:28:56","slug":"%e4%ba%95%e5%ad%97%e9%81%8a%e6%88%b2-%e8%88%87%e9%9b%bb%e8%85%a6%e5%b0%8d%e6%88%b0%e7%89%88%e6%9c%ac","status":"publish","type":"post","link":"https:\/\/fgchen.com\/wpedu\/2025\/02\/%e4%ba%95%e5%ad%97%e9%81%8a%e6%88%b2-%e8%88%87%e9%9b%bb%e8%85%a6%e5%b0%8d%e6%88%b0%e7%89%88%e6%9c%ac\/","title":{"rendered":"\u4e00\u500b\u4f60\u6253\u4e0d\u8d0f\u7684\u4e95\u5b57\u904a\u6232"},"content":{"rendered":"

\u7e7c\u4e4b\u524d\u7684\u96d9\u624b\u4e92\u535a\u7248\u672c\u7684\u4e95\u5b57\u904a\u6232<\/a>\uff0c\u9019\u6587\u7ae0\u63d0\u4f9b\u8207\u96fb\u8166\u5c0d\u6230\u7248\u672c<\/p>\n

\u4e95\u5b57\u904a\u6232<\/a><\/h3>\n

\u539f\u59cb\u78bc\uff1a<\/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>\u4e95\u5b57\u68cb\u904a\u6232<\/title>\n    <style>\nbody {\n    font-family: Arial, sans-serif;\n    text-align: center;\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    margin: 20px auto;\n    width: 320px;\n}\n\n.cell {\n    width: 100px;\n    height: 100px;\n    font-size: 36px;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 2px solid black;\n    cursor: pointer;\n    background-color: #f0f0f0;\n}\n\n.cell.x {\n    color: blue;\n}\n\n.cell.o {\n    color: red;\n}\n\n#reset {\n    padding: 10px 20px;\n    font-size: 16px;\n    cursor: pointer;\n}\n\n    <\/style>\n<\/head>\n<body>\n    <h1>\u4e95\u5b57\u68cb\u904a\u6232<\/h1>\n    <p id=\"status\">\u8f09\u5165\u4e2d...<\/p>\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    <button id=\"reset\">\u91cd\u65b0\u958b\u59cb<\/button>\n    <script>\nconst board = document.getElementById(\"board\");\nconst statusText = document.getElementById(\"status\");\nconst resetButton = document.getElementById(\"reset\");\nconst cells = document.querySelectorAll(\".cell\");\n\nlet playerSymbol, computerSymbol;\nlet currentPlayer;\nlet boardState = [\"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"];\nlet gameActive = true;\nlet isPlayerTurn;\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\n\/\/ \u8655\u7406\u73a9\u5bb6\u9ede\u64ca\u4e8b\u4ef6\nfunction handleCellClick(event) {\n    if (!isPlayerTurn || !gameActive) return;\n\n    const index = event.target.dataset.index;\n    if (boardState[index] !== \"\") return;\n\n    placeMove(index, currentPlayer);\n    if (!gameActive) return;\n\n    isPlayerTurn = false;\n    setTimeout(computerMove, 500); \/\/ \u96fb\u8166\u7a0d\u4f5c\u5ef6\u9072\u518d\u884c\u52d5\n}\n\n\/\/ \u96fb\u8166\u884c\u52d5\uff08\u5f37\u5316 AI\uff09\nfunction computerMove() {\n    if (!gameActive) return;\n\n    let bestMove = getBestMove();\n    placeMove(bestMove, currentPlayer);\n    isPlayerTurn = true;\n}\n\n\/\/ AI \u6700\u4f73\u9078\u64c7\nfunction getBestMove() {\n    let emptyCells = boardState\n        .map((value, index) => (value === \"\" ? index : null))\n        .filter(index => index !== null);\n\n    \/\/ 1. **\u6aa2\u67e5\u662f\u5426\u80fd\u76f4\u63a5\u7372\u52dd**\n    for (let index of emptyCells) {\n        boardState[index] = currentPlayer;\n        if (checkWin(currentPlayer)) {\n            boardState[index] = \"\";\n            return index;\n        }\n        boardState[index] = \"\";\n    }\n\n    \/\/ 2. **\u963b\u6b62\u73a9\u5bb6\u7372\u52dd**\n    let opponent = currentPlayer === playerSymbol ? computerSymbol : playerSymbol;\n    for (let index of emptyCells) {\n        boardState[index] = opponent;\n        if (checkWin(opponent)) {\n            boardState[index] = \"\";\n            return index;\n        }\n        boardState[index] = \"\";\n    }\n\n    \/\/ 3. **\u512a\u5148\u9078\u64c7\u4e2d\u5fc3**\n    if (boardState[4] === \"\") return 4;\n\n    \/\/ 4. **\u512a\u5148\u9078\u64c7\u89d2\u843d**\n    let corners = [0, 2, 6, 8].filter(i => boardState[i] === \"\");\n    if (corners.length > 0) return corners[Math.floor(Math.random() * corners.length)];\n\n    \/\/ 5. **\u9078\u64c7\u908a\u7de3**\n    let edges = [1, 3, 5, 7].filter(i => boardState[i] === \"\");\n    if (edges.length > 0) return edges[Math.floor(Math.random() * edges.length)];\n\n    \/\/ 6. **\u6700\u5f8c\u96a8\u6a5f\u9078\u64c7**\n    return emptyCells[Math.floor(Math.random() * emptyCells.length)];\n}\n\n\/\/ \u653e\u7f6e\u68cb\u5b50\u4e26\u6aa2\u67e5\u52dd\u8ca0\nfunction placeMove(index, player) {\n    boardState[index] = player;\n    cells[index].textContent = player;\n    cells[index].classList.add(player === \"X\" ? \"x\" : \"o\");\n\n    if (checkWin(player)) {\n        statusText.textContent = `${player === playerSymbol ? \"\u73a9\u5bb6\" : \"\u96fb\u8166\"} (${player}) \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 = `${currentPlayer === playerSymbol ? \"\u73a9\u5bb6\" : \"\u96fb\u8166\"} (${currentPlayer}) \u7684\u56de\u5408`;\n}\n\n\/\/ \u6aa2\u67e5\u662f\u5426\u52dd\u5229\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\", startGame);\n\nfunction startGame() {\n    boardState = [\"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\", \"\"];\n    gameActive = true;\n    cells.forEach(cell => {\n        cell.textContent = \"\";\n        cell.classList.remove(\"x\", \"o\");\n    });\n\n    \/\/ \u96a8\u6a5f\u6c7a\u5b9a\u73a9\u5bb6\u8207\u96fb\u8166\u7684\u7b26\u865f\n    if (Math.random() < 0.5) {\n        playerSymbol = \"X\";\n        computerSymbol = \"O\";\n    } else {\n        playerSymbol = \"O\";\n        computerSymbol = \"X\";\n    }\n\n    currentPlayer = \"X\"; \/\/ \u904a\u6232\u56fa\u5b9a\u5f9e X \u958b\u59cb\n    isPlayerTurn = (currentPlayer === playerSymbol);\n\n    statusText.textContent = `${isPlayerTurn ? \"\u73a9\u5bb6\" : \"\u96fb\u8166\"} (${currentPlayer}) \u5148\u624b`;\n\n    if (!isPlayerTurn) {\n        setTimeout(computerMove, 500);\n    }\n}\n\n\/\/ \u521d\u59cb\u5316\u904a\u6232\nstartGame();\n\n    <\/script>\n<\/body>\n<\/html>\n<\/pre>\n
\u00a0<\/p>\n
\u00a0<\/p>\n\n
\n
\"\"<\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"
\u7e7c\u4e4b\u524d\u7684\u96d9\u624b\u4e92\u535a\u7248\u672c\u7684\u4e95\u5b57\u904a\u6232\uff0c\u9019\u6587\u7ae0\u63d0\u4f9b\u8207\u96fb\u8166\u5c0d\u6230\u7248\u672c \u4e95\u5b57\u904a\u6232 \u539f\u59cb\u78bc\uff1a & … <\/p>\n","protected":false},"author":1,"featured_media":14707,"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-15105","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\/15105","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=15105"}],"version-history":[{"count":5,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/15105\/revisions"}],"predecessor-version":[{"id":15114,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/posts\/15105\/revisions\/15114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media\/14707"}],"wp:attachment":[{"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/media?parent=15105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/categories?post=15105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fgchen.com\/wpedu\/wp-json\/wp\/v2\/tags?post=15105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}