五子棋 AI - 開始後用滑鼠點擊舞台以啟用按鍵，重整畫面即可重新遊戲。 | JavaScript 程式專案

{"id":177835,"student_id":2589,"content":"","created_at":"2020-08-07T13:18:02.240+08:00","updated_at":"2023-03-14T11:16:43.890+08:00","name":"五子棋 AI - 開始後用滑鼠點擊舞台以啟用按鍵，重整畫面即可重新遊戲。","language":"javascript","screenshot":{"url":null},"parent_id":3,"plugin":"setBackdrop('bg.png');\n\nconst BLACK = 'b';\nconst WHITE = 'w';\nconst ZZ = [0, 0, 0, 0, 0, 0, 0, 0, 0];\nconst V1 = [4, 3, 2, 1, 0, -1, -2, -3, -4];\nconst V2 = [-4, -3, -2, -1, 0, 1, 2, 3, 4];\n\n\nvar game = (function () {\n\n    let grid = {};\n    for (let x = -14; x \u003c= 29; x++) {\n        grid[x] = {};\n        for (let y = -14; y \u003c= 29; y++) {\n            grid[x][y] = '';\n        }\n    }\n\n    function isWin (x, y, vx, vy) {\n        var re = grid[x + vx*0][y + vy*0] +\n                 grid[x + vx*1][y + vy*1] +\n                 grid[x + vx*2][y + vy*2] +\n                 grid[x + vx*3][y + vy*3] +\n                 grid[x + vx*4][y + vy*4];\n\n        if (re == 'bbbbb') {\n            drawText('黑方獲勝');\n            stop();\n        }\n        if (re == 'wwwww') {\n            drawText('白方獲勝');\n            stop();\n        }\n    }\n    \n    //當玩家點擊格子時\n    function onclick () {\n        var x = Math.floor((cursor.x - 97)/30);\n        var y = Math.floor((cursor.y - 17)/30);\n\n        if (x \u003c 0 || x \u003e= 15 || y \u003c 0 || y \u003e= 15) return;\n        \n        place(x, y) \u0026\u0026 AI();\n    }\n\n    //繪製棋子\n    function render () {\n        for (var x = 0; x \u003c 15; x++) {\n            for (var y = 0; y \u003c 15; y++) {\n                pen.size = 0;\n                if (grid[x][y] == '') continue;\n                if (grid[x][y] == BLACK) pen.fillColor = 'black';\n                if (grid[x][y] == WHITE) pen.fillColor = 'white';\n                pen.drawCircle(x*30 + 110, y*30 + 30, 14);\n            }\n        }\n        for (var x = 0; x \u003c 15; x++) {\n            for (var y = 0; y \u003c 15; y++) {\n                isWin(x, y, 1, 0);\n                isWin(x, y, -1, 0);\n                isWin(x, y, 0, 1);\n                isWin(x, y, 0, -1);\n                isWin(x, y, 1, 1);\n                isWin(x, y, -1, 1);\n                isWin(x, y, 1, -1);\n                isWin(x, y, -1, -1);\n            }\n        }\n    }\n\n    function place (x, y) {\n\n        if (grid[x][y] !== '') return false;\n\n        var count = 0;\n        for (var xx = 0; xx \u003c 15; xx++) {\n            for (var yy = 0; yy \u003c 15; yy++) {\n                if (grid[xx][yy] !== '') count++;\n            }\n        }\n        grid[x][y] = count%2 === 0 ? BLACK: WHITE;\n        \n        return true;\n    }\n\n    function check(color, x, y) {\n\n        if (color == 'white' || color == BLACK) color = WHITE;\n        if (color == 'black' || color == WHITE) color = BLACK;\n\n        var temp = grid[x][y];\n        grid[x][y] = color;\n        var result = [0, 1, 0, 0, 0, 0];\n        var a, b, c;\n        var start, len;\n        for (len = 5; len \u003e= 2; len--) {\n            for (start = 5 - len; start \u003c= 4; start++) {\n                z = ZZ.slice(start, start + len);\n                d = V1.slice(start, start + len);\n                i = V2.slice(start, start + len);\n                if (checkLine(grid, x, y, d, z, color)) result[len]++;\n                if (checkLine(grid, x, y, z, d, color)) result[len]++;\n                if (checkLine(grid, x, y, d, d, color)) result[len]++;\n                if (checkLine(grid, x, y, d, i, color)) result[len]++;\n            }\n        }\n\n        grid[x][y] = temp;\n\n        return result;\n    }\n\n    function checkLine(grid, x, y, vx, vy, who) {\n        for (var i = 0; i \u003c vx.length; i++) {\n            var xx = x + vx[i];\n            var yy = y + vy[i];\n            if (grid[xx][yy] != who) return false;\n        }\n        return true;\n    }\n\n    when('click', onclick);\n    forever(render);\n\n    return {\n        place: place,\n        current: BLACK,\n        grid: grid,\n    };\n})();\n\ngrid = game.grid;\n\n// 黑子(電腦)先下\ngrid[7][7] = 'b';\n\nforever(update);\n\n// 印出評估函式計算的分數在每個格子上\nfunction update () {\n    for (var x = 0; x \u003c 15; x++) {\n        for (var y = 0; y \u003c 15; y++) {\n            if (grid[x][y] == '') {\n                grid[x][y] = 'b';\n                var score = evaluate(x, y, grid);\n                grid[x][y] = 'w';\n                score += evaluate(x, y, grid);\n                grid[x][y] = '';\n                drawText(score, 115 + x*30, 35 + y*30, 'black', 10);\n            }\n        }\n    }\n}\n\n// 當玩家下完會觸發 AI 函式換電腦下棋\nfunction AI() {\n    var bestScore = 0;\n    var bestX;\n    var bestY;\n    for (var x = 0; x \u003c 15; x++) {\n        for (var y = 0; y \u003c 15; y++) {\n            if (grid[x][y] == '') {\n                grid[x][y] = 'b';\n                var score = evaluate(x, y, grid)*1.1;\n                grid[x][y] = 'w';\n                score += evaluate(x, y, grid);\n                grid[x][y] = '';\n                if (score \u003e bestScore) {\n                    bestScore = score;\n                    bestX = x;\n                    bestY = y;\n                }\n            }\n        }\n    }\n    grid[bestX][bestY] = 'b';\n}\n\n// 評估函式，組合八個方向的分數\n// top(上)、bottom(下)、right(右)、left(左)\n// topRight(上右)、topLeft(上左)、bottomRight(下右)、bottomLeft(下左)\nfunction evaluate (x, y) {\n    var G = grid;\n    var t  = getScore(G[x][y], G[x][y-1], G[x][y-2], G[x][y-3], G[x][y-4]);\n    var b  = getScore(G[x][y], G[x][y+1], G[x][y+2], G[x][y+3], G[x][y+4]);\n    var r  = getScore(G[x][y], G[x+1][y], G[x+2][y], G[x+3][y], G[x+4][y]);\n    var l  = getScore(G[x][y], G[x-1][y], G[x-2][y], G[x-3][y], G[x-4][y]);\n    var tr = getScore(G[x][y], G[x+1][y-1], G[x+2][y-2], G[x+3][y-3], G[x+4][y-4]);\n    var bl = getScore(G[x][y], G[x-1][y+1], G[x-2][y+2], G[x-3][y+3], G[x-4][y+4]);\n    var tl = getScore(G[x][y], G[x-1][y-1], G[x-2][y-2], G[x-3][y-3], G[x-4][y-4]);\n    var br = getScore(G[x][y], G[x+1][y+1], G[x+2][y+2], G[x+3][y+3], G[x+4][y+4]);\n    \n    return t*b + r*l + tr*bl + tl*br;\n}\n\n// 傳入五個格子內容，計算連成幾個\nfunction getScore (a, b, c, d, e) {\n    if (b != a) return 1;\n    if (c != a) return 10;\n    if (d != a) return 100;\n    if (e != a) return 1000;\n    return 10000;\n}","description":null,"note":null,"status":"public","like_student_ids":[7689,8469,11396,7625,16868,16888],"is_featured":false,"views":474,"hashid":"d5ms59qg","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}