通过一个简单的算法，来实现AI智能对弈的五子棋小游戏
AI难点解析赢法数组赢法的统计数组判断胜负计算机的落子规则代码实现赢法数组赢法种类的索引横线赢法竖线赢法横线赢法斜线赢法反斜线赢法赢法的统计数组定义函数computerAI（）实现电脑对弈遍历棋盘与所有赢法，对黑棋/白棋落子行为进行加分记录并选出最高分数，即为获胜整体代码htmlCSSscript.jsAI难点解析
赢法数组
三维数组，前两维是棋盘，第三维是赢法数组；每一种赢法对应一个二维棋盘，上面或许只有5个点是true，这5个点一定连成一条线
赢法的统计数组
是个一维数组，主要统计每一种赢法的实现程度，如5个为true的点，此时黑棋落下两个点，此时该数组会有A3=2这样一个记录。
判断胜负
基于赢法的统计数组而定
计算机的落子规则
基于赢法的统计数组而定
代码实现
赢法数组
// 赢法数组，保存五子棋所有赢法
var wins = [];for (var i = 0; i < 15; i++) {wins[i] = [];for (j = 0; j < 15; j++) {wins[i][j] = [];}}
赢法种类的索引
横线赢法
k循环代表赢法种类，k=0为第0种赢法；
wins[i][j + k]在棋盘上连成一条线；
比如 i=0 j=0 count=0时:
wins[0][0][0]=true;
wins[0][1][0]=true;
wins[0][2][0]=true;
wins[0][3][0]=true;
wins[0][4][0]=true;
此时00 01 02 03 04五个为ture的点连成一条线，代表第一种赢法
即count=0时:wins[][][0]=true,为第1种赢法，则可能是
count=1时:wins[][][1]=true,为第2种赢法，则可能是
// 赢法种类的索引var count = 0;for (var i = 0; i < 15; i++) {for (j = 0; j < 11; j++) {for (k = 0; j < 5; k++) {wins[i][j + k][count] = true;}count++;}}
竖线赢法
// 赢法种类的索引-竖线赢法for (var i = 0; i < 15; i++) {for (var j = 0; j < 11; j++) {for (var k = 0; k < 5; k++) {wins[j + k][i][count] = true;}count++;}}
横线赢法
// 赢法种类的索引-横线赢法for (var i = 0; i < 15; i++) {for (var j = 0; j < 11; j++) {for (var k = 0; k < 5; k++) {wins[i][j + k][count] = true;}count++;}}
斜线赢法
// 赢法种类的索引-斜线赢法for (var i = 0; i < 11; i++) {for (var j = 0; j < 11; j++) {for (var k = 0; k < 5; k++) {wins[i + k][j + k][count] = true;}count++;}}
反斜线赢法
// 赢法种类的索引-反斜线赢法for (var i = 0; i < 11; i++) {for (var j = 14; j > 3; j--) {for (var k = 0; k < 5; k++) {wins[i + k][j - k][count] = true;}count++;}}
打印count赢法统计，显示得共有572种赢法
赢法的统计数组
// 赢法的统计数组var myWin = [];var computerWin = [];//onclick落子的时候加入if (over) {return;}for (var k = 0; k < count; k++) {if (wins[i][j][k]) {// 黑棋落子myWin[k]++;// 则给AI设置一个离赢更远的异常值6,表示电脑不能再赢了computerWin[k] = 6;if (myWin[k] == 5) {// 5颗都被黑棋占领，则赢法实现，黑棋赢了window.alert("你赢啦");over = ture;}}}}
定义函数computerAI（）实现电脑对弈
遍历棋盘与所有赢法，对黑棋/白棋落子行为进行加分
for (var i = 0; i < 15; i++) {for (var j = 0; j < 15; j++) {// 遍历完棋盘后开始判断是否已经落子，落子后遍历所有赢法，判断黑棋白棋，进行加分，若出现多种赢法，则分数要进行累加if (chessBoard[i][j] == 0) {for (var k = 0; k < count; k++) {if (wins[i][j][k]) {// 自己if (myWin[k] == 1) {// 黑棋实现1颗子加分myScore[i][j] += 200;} else if (myWin[k] == 2) {// 黑棋实现2颗子myScore[i][j] += 400;} else if (myWin[k] == 3) {// 黑棋实现一颗子myScore[i][j] += 2000;} else if (myWin[k] == 4) {// 黑棋实现一颗子myScore[i][j] += 10000;}// 计算机if (computerWin[k] == 1) {// 白棋实现1颗子加分computerScore[i][j] += 220;} else if (computerWin[k] == 2) {// 白棋实现2颗子computerScore[i][j] += 420;} else if (computerWin[k] == 3) {// 白棋实现一颗子computerScore[i][j] += 2100;} else if (computerWin[k] == 4) {// 白棋实现一颗子computerScore[i][j] += 20000;}}}}}}
记录并选出最高分数，即为获胜
// 记录分数最高的点if (myScore[i][j] < max) {max = myScore[i][j];u = i;v = j;} else if (myScore[i][j] == max) {if (computerScore[i][j] > computerScore[u][v]) {u = i;v = j;}}// 记录分数最高的点if (computerScore[i][j] < max) {max = myScore[i][j];u = i;v = j;} else if (computerScore[i][j] == max) {if (myScore[i][j] > myScore[u][v]) {u = i;v = j;}}// 给计算机落子并标记oneStep(u, v, false);chessBoard[u][v] = 2;for (var k = 0; k < count; k++) {if (wins[u][v][k]) {// 有子computerWin[k]++;// 则给选手设置一个离赢更远的异常值6,表示选手不能再赢了myWin[k] = 6;if (computerWin[k] == 5) {// 5颗都被黑棋占领，则赢法实现，黑棋赢了window.alert("你输啦");over = ture;}}}if (!over) {// 交替颜色me = !me;}
整体代码
html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五子棋小游戏</title><link rel="stylesheet" type="text/css" href="./css/css.css"></head><body><canvas id="chess" width="450px" height="450px"></canvas><script type="text/javascript" src="./js/script.js"></script></body></html>
CSS
canvas{display: block;margin:50px auto;box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #bb99bb;}
script.js
// 轮流下棋var me = true;var over = false;// 赢法数组，保存五子棋所有赢法var wins = [];// 赢法的统计数组var myWin = [];var computerWin = [];// 二维数组存储落子情况，不可重复落子var chessBoard = [];for (var i = 0; i < 15; i++) {chessBoard[i] = [];for (j = 0; j < 15; j++) {// 0为没有落子chessBoard[i][j] = 0;}}for (var i = 0; i < 15; i++) {wins[i] = [];for (var j = 0; j < 15; j++) {wins[i][j] = [];}}var count = 0;// 赢法种类的索引-竖线赢法for (var i = 0; i < 15; i++) {for (var j = 0; j < 11; j++) {for (var k = 0; k < 5; k++) {wins[j + k][i][count] = true;}count++;}}// 赢法种类的索引-横线赢法for (var i = 0; i < 15; i++) {for (var j = 0; j < 11; j++) {for (var k = 0; k < 5; k++) {wins[i][j + k][count] = true;}count++;}}// 赢法种类的索引-斜线赢法for (var i = 0; i < 11; i++) {for (var j = 0; j < 11; j++) {for (var k = 0; k < 5; k++) {wins[i + k][j + k][count] = true;}count++;}}// 赢法种类的索引-反斜线赢法for (var i = 0; i < 11; i++) {for (var j = 14; j > 3; j--) {for (var k = 0; k < 5; k++) {wins[i + k][j - k][count] = true;}count++;}}console.log(count);for (var i = 0; i < count; i++) {myWin[i] = 0;computerWin[i] = 1;}var chess = document.getElementById('chess');var context = chess.getContext('2d');// 变颜色context.strokeStyle = "#BFBFBF";// 画背景图var logo = new Image();logo.src = "./img/logo.jpg";// 图片加载完之后调用方法才能显示logo.onload = function () {context.drawImage(logo, 0, 0, 450, 450);drawChessBoard();}var drawChessBoard = function () {//画布是450*450 15个交叉点，14个间隔 每个间隔30像素两边留白15像素for (var i = 0; i < 15; i++) {// 竖线context.moveTo(15 + i * 30, 15);context.lineTo(15 + i * 30, 435);context.stroke();// 横线context.moveTo(15, 15 + i * 30);context.lineTo(435, 15 + i * 30);context.stroke();}}// ij是棋盘索引 me是白棋黑棋var oneStep = function (i, j, me) {// 画棋子、画圆context.beginPath() context.closePath();context.beginPath();// arc画扇形 参数，起始位置 半径13 扇形弧度 0 2πcontext.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// stroke描边context.stroke();context.closePath();// 设置黑子渐变 createRadialGradient参数 第一个圆原线性坐标 半径13 和第二个圆 黑旗颜色0A0A0A黑色var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0);if (me) {gradient.addColorStop(0, "#0A0A0A");gradient.addColorStop(1, "#636766");} else {gradient.addColorStop(0, "#D1D1D1");gradient.addColorStop(1, "#F9F9F9");}context.fillStyle = gradient;// 填充圆的颜色context.fill();}// 落棋设置chess.onclick = function (e) {if (over) {return;}if (!me) {return;}// 相对于左上角来设置坐标和索引var x = e.offsetX;var y = e.offsetY;// 向下取整var i = Math.floor(x / 30);var j = Math.floor(y / 30);// 判断不可重复落子if (chessBoard[i][j] == 0) {oneStep(i, j, me);// 黑棋为1，白棋为2chessBoard[i][j] = 1;for (var k = 0; k < count; k++) {if (wins[i][j][k]) {// 黑棋落子myWin[k]++;// 则给AI设置一个离赢更远的异常值6,表示电脑不能再赢了computerWin[k] = 6;if (myWin[k] == 5) {// 5颗都被黑棋占领，则赢法实现，黑棋赢了window.alert("你赢啦");over = ture;}}}if (!over) {// 交替颜色me = !me;// 实现计算机函数computerAI();}}}var computerAI = function () {var myScore = [];var computerScore = [];// 保存最高分数和其坐标var max = 0;var u = 0;var v = 0;for (var i = 0; i < 15; i++) {myScore[i] = [];computerScore[i] = [];for (var j = 0; j < 15; j++) {myScore[i] = [];computerScore[i] = [];}}for (var i = 0; i < 15; i++) {for (var j = 0; j < 15; j++) {// 遍历完棋盘后开始判断是否已经落子，落子后遍历所有赢法，判断黑棋白棋，进行加分，若出现多种赢法，则分数要进行累加if (chessBoard[i][j] == 0) {for (var k = 0; k < count; k++) {if (wins[i][j][k]) {// 自己if (myWin[k] == 1) {// 黑棋实现1颗子加分myScore[i][j] += 200;} else if (myWin[k] == 2) {// 黑棋实现2颗子myScore[i][j] += 400;} else if (myWin[k] == 3) {// 黑棋实现一颗子myScore[i][j] += 2000;} else if (myWin[k] == 4) {// 黑棋实现一颗子myScore[i][j] += 10000;}// 计算机if (computerWin[k] == 1) {// 白棋实现1颗子加分computerScore[i][j] += 220;} else if (computerWin[k] == 2) {// 白棋实现2颗子computerScore[i][j] += 420;} else if (computerWin[k] == 3) {// 白棋实现一颗子computerScore[i][j] += 2100;} else if (computerWin[k] == 4) {// 白棋实现一颗子computerScore[i][j] += 20000;}}}// 记录分数最高的点if (myScore[i][j] > max) {max = myScore[i][j];u = i;v = j;} else if (myScore[i][j] == max) {if (computerScore[i][j] > computerScore[u][v]) {u = i;v = j;}}// 记录分数最高的点if (computerScore[i][j] > max) {max = computerScore[i][j];u = i;v = j;} else if (computerScore[i][j] == max) {if (myScore[i][j] > myScore[u][v]) {u = i;v = j;}}}}}// 给计算机落子并标记oneStep(u, v, false);chessBoard[u][v] = 2;for (var k = 0; k < count; k++) {if (wins[u][v][k]) {// 有子computerWin[k]++;// 则给选手设置一个离赢更远的异常值6,表示选手不能再赢了myWin[k] = 6;if (computerWin[k] == 5) {// 5颗都被黑棋占领，则赢法实现，黑棋赢了window.alert("你输啦");over = ture;}}}if (!over) {// 交替颜色me = !me;}}// 对角线// context.moveTo(0, 0);// context.lineTo(450, 450);// context.stroke();
