井字棋 AI 大師_概念版 | Programming Project

{"id":159667,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003e井字遊戲\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"game\\\"\u003e\\n        \u003ch1\u003e{{status}}\u003c/h1\u003e\\n        \u003cdiv class=\\\"grid\\\"\u003e\\n            \u003cdiv v-for=\\\"cell, key in grid\\\" :class=\\\"cellClass(cell)\\\" @click=\\\"click(key)\\\"\u003e\\n                {{cell}}\\n                \u003cspan\u003e{{scores[key]}}\u003c/span\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cbutton @click=\\\"newGame\\\"\u003e新遊戲\u003c/button\u003e\\n        \u003cbutton @click=\\\"aiFirst\\\"\u003e電腦先攻\u003c/button\u003e\\n    \u003c/div\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    background-color: #14bdac;\\n    padding: 30px;\\n    font-family: \\\"Trebuchet MS\\\", Helvetica, sans-serif;\\n    text-align: center;\\n}\\n\\n.grid {\\n    width: 324px;\\n    height: 324px;\\n    margin: auto;\\n    border: 4px solid #00000055;\\n}\\n\\n.cell {\\n    position: relative;\\n    width: 100px;\\n    height: 100px;\\n    border: 4px solid #00000055;\\n    float: left;\\n    font-size: 4rem;\\n    font-weight: bold;\\n\\n    text-shadow: 0px 0px 10px #999;\\n    text-align: center;\\n    line-height: 100px;\\n    cursor: pointer;\\n}\\n\\n.cell \u003e span {\\n    position: absolute;\\n    z-index: -1;\\n    top: 0;\\n    left: 0;\\n    right: 0;\\n    bottom: 0;\\n    color: #00000055;\\n    font-size: 1rem;\\n}\\n\\n\\n.o-player {\\n    color: #fff;\\n}\\n\\n.x-player{\\n    color: #333;\\n}\",\"js\":\"var status = 'playing';\\nvar turn = 'O';\\n\\nvar grid = {\\n    '0': '',\\n    '1': '',\\n    '2': '',\\n    '3': '',\\n    '4': '',\\n    '5': '',\\n    '6': '',\\n    '7': '',\\n    '8': '',\\n}\\n\\nvar scores = {\\n    '0': 0,\\n    '1': 0,\\n    '2': 0,\\n    '3': 0,\\n    '4': 0,\\n    '5': 0,\\n    '6': 0,\\n    '7': 0,\\n    '8': 0,\\n}\\n\\nfunction click (index) {\\n    grid[index] = turn;\\n    turn = turn == 'O' ? 'X': 'O';\\n    AI();\\n}\\n\\nfunction AI () {\\n\\n    var best = 0;\\n    var bestScore = 0;\\n\\n    for (var i = 0; i \u003c 9; i++) {\\n        if (grid[i] == '') {\\n            grid[i] = 'X';\\n            var attack = evaluation(grid);\\n            grid[i] = 'O';\\n            var defense = evaluation(grid);\\n            grid[i] = '';\\n            scores[i] = attack + defense;\\n\\n            if (scores[i] \u003e bestScore) {\\n                best = i;\\n                bestScore = scores[i];\\n            }\\n        }\\n    }\\n\\n    grid[best] = turn;\\n    turn = turn == 'O' ? 'X': 'O';\\n}\\n\\n// 評估函式\\nfunction evaluation (g) {\\n    return  getScore(g[0] + g[1] + g[2]) +\\n            getScore(g[3] + g[4] + g[5]) +\\n            getScore(g[6] + g[7] + g[8]) +\\n            getScore(g[0] + g[3] + g[6]) +\\n            getScore(g[1] + g[4] + g[7]) +\\n            getScore(g[2] + g[5] + g[8]) +\\n            getScore(g[0] + g[4] + g[8]) +\\n            getScore(g[2] + g[4] + g[6])\\n}\\n\\n// 計算某一條線的分數\\nfunction getScore (s) {\\n    if (s == 'OOO') return 100;\\n    if (s == 'XXX') return 100;\\n    if (s == 'OO') return 10;\\n    if (s == 'XX') return 10;\\n    if (s == 'O') return 1;\\n    if (s == 'X') return 1;\\n    return 0; // s == ''\\n}\\n\\nfunction aiFirst () {\\n    grid[4] = turn;\\n    turn = turn == 'O' ? 'X': 'O';\\n}\"}","created_at":"2020-06-18T11:14:43.469+08:00","updated_at":"2020-07-20T11:43:47.161+08:00","name":"井字棋 AI 大師_概念版","language":"web","screenshot":{"url":"/uploads/project/screenshot/159667/038ef4464c085e83d5cf9225358e11f3.jpg"},"parent_id":3,"plugin":"function init () {\n\n    new Vue({\n        el: '#game',\n\n        data: function () {\n            var scores = {}\n            var grid = {}\n            for (var i=0; i\u003c9; i++) {\n                scores[i] = undefined;\n                grid[i] = '';\n            }\n            return {\n                grid: window.grid || grid,\n                scores: window.scores || scores,\n            }\n        },\n\n        methods: {\n            click: function (index) {\n                if (grid[index] == '') {\n                    window.click \u0026\u0026 window.click(index);\n                }\n            },\n\n            cellClass: function (cell) {\n                return ['cell', cell == 'O' ? 'o-player': 'x-player'];\n            },\n            \n            newGame: function () {\n                for (var i=0; i\u003c9; i++) {\n                    this.grid[i] = '';\n                    this.scores[i] = 0;\n                }\n            },\n            \n            aiFirst: function () {\n                window.aiFirst \u0026\u0026 window.aiFirst();\n            }\n        },\n        \n        computed: {\n            status: function () {\n                var g = this.grid;\n                var s = '';\n                for (var i=0; i\u003c9; i++) {\n                    s += g[i];\n                }\n                return s.length;    \n            }\n            \n        }\n    });\n\n}\n\nsetTimeout(init, 0);","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":416,"hashid":"2pdsnv9p","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}