原生Javascript实现五子棋

棋盘绘制
五子棋赢法数组
五子棋人落子
五子棋判断人获胜
五子棋计算机落子思路
五子棋计算机落子实现

棋盘绘制

1.设置居中标题
2.使用html5 canvas画布标签，居中、宽高设置为450px、阴影
3.使用js画线条，横竖都有15条线，每条线间距为30px，即棋盘宽高为420px（1430px），剩余30px平分给上下和左右各15px。
方法：画横线和竖线，使用坐标设置起始点，横线x轴都是从15 - 435，y轴是15+i30px，竖线同上方法，画出十五条。
4.加上重置按钮，并将鼠标cursor设置为移到棋盘上和按钮上自动变成小手。

整个棋盘的绘制代码如下：
五子棋.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五子棋</title><style>.title{text-align: center;}.chess{/* canvas与image一样虽然可以设置高和宽，但是是行内块，所以把它变成块元素，方便用margin居中 */display: block;margin: 50px auto;/* 阴影往下往右是正数，前两个值代表往下往右的偏移量，第三个代表阴影宽度，最后一个是阴影颜色 */box-shadow: 5px 5px 5px #b9b9b9,-2px -2px 2px #efefef;cursor: pointer;}div{text-align: center;}.res{padding: 10px 20px;background-color: pink;border-radius: 10px;color: white;cursor: pointer;}</style>
</head>
<body><h3 class="title">--五子棋--</h3><canvas class="chess" width="450px" height="450px"></canvas><div><a class="res">restart</a></div>
</body><script>let chess = document.getElementsByClassName('chess')[0];// 获取2d画布的上下文let cxt = chess.getContext("2d");// 线的颜色cxt.strokeStyle = "#b9b9b9";window.onload = function(){drawChessBoard();}function drawChessBoard(){for(let i=0;i<15;i++){// 从canvas画布位置开始计算// 每条横线起始点位置cxt.moveTo(15,15+i*30);// 每条横线终点位置cxt.lineTo(435,15+i*30);// 使用stroke方法连cxt.stroke();// 竖线同上cxt.moveTo(15+i*30,15);cxt.lineTo(15+i*30,435);cxt.stroke();}}</script>
</html>

五子棋赢法数组

把每一个赢法存下来，需要初始化一个三维数组，前两个位置是存棋子在棋盘的位置坐标，最后一个存的是赢法的编号，每一个赢法编号都唯一。
赢法分为横着连成5子，竖着连成5子，正斜线连成五子和反斜线连成五子。
例：
// [0,0,0]/[1,0,0]/[2,0,0]/[3,0,0]/[4,0,0] 从棋盘左上角开始横着往右五个棋子
// [1,0,1]/[2,0,1]/[2,0,1]/[3,0,1]/[5,0,1] 从棋盘左上角后面一个开始横着往右五个棋子
js代码如下：

 // 初始化数组let wins = [];for(let i=0;i<15;i++){wins[i] = [];for(let j=0;j<15;j++){wins[i][j] = [];}}// 设置赢法编号let id = 0;// 统一横线赢法，即横着连成5个子// 横坐标i的起始位置只能到11，再往后就没法赢了for(let i = 0;i<11;i++){for(let j=0;j<15;j++){for(let k = 0;k<5;k++){wins[i+k][j][id] = true}id++;}}// 统计竖线赢法for(let i = 0;i<11;i++){for(let j=0;j<15;j++){for(let k = 0;k<5;k++){wins[j][i+k][id] = true}id++;}}// 统计正斜线,从左上连到右下角for(let i=0;i<11;i++){for(let j=0;j<11;j++){for(let k=0;k<5;k++){wins[j+k][i+k][id] = true;}id++;}}// 统计反斜线,从右上连到左下角for(let i=0;i<11;i++){for(let j=14;j>=4;j--){for(let k=0;k<5;k++){wins[i+k][j-k][id] = true;}id++;}}

五子棋人落子

1.首先定义一个棋盘数组chessBoard，用来判断当前位置是否已经存在棋子
2.定义一个变量me判断是否该人下棋的回合
3.为chess画布绑定点击事件，获取x轴、y轴偏移量
4.因为棋盘每个位置的偏移量都是15，45，75等15+30*n，所以令i和j = x偏移量/30,y偏移量/30,用（i，j）来代表下落在棋盘上的位置。
5.下棋，如果棋盘上没有子并且是自己下棋的回合，就可以下棋，下完后要记得改变棋盘标记以及回合标记
6.定义下棋方法，在棋盘对应位置画个黑色的圆出来，使用canvas上下文中的arc方法画圆，并且为中间填满颜色。
示例：

代码如下：

// 定义二维数组来存储每个坐标是否已经下了棋子let chessBoard = new Array(15).fill(0).map(() => new Array(15).fill(0));// 人下棋let me = true;//用来标记人是否可以下棋let over = false;//标记游戏是否结束chess.onclick = function(e){// 游戏结束或者不是自己下棋回合就停止下棋if(over) return;if(!me) return;// 获取x轴坐标,但这个坐标也是根据canvas父元素的偏移量let x = e.offsetX;// 获取y轴坐标let y = e.offsetY;let i = Math.floor(x/30);let j = Math.floor(y/30);// 此处没有棋子则可以下棋if(chessBoard[i][j]==0&&me){oneStep(i,j,me);// 并将此处标记为已经下过棋子chessBoard[i][j] == 1;me = false;}}// 落子的方法function oneStep(i,j,me){// 画圆cxt.beginPath();// 圆心坐标、半径、从0度到2pi度画个完整的圆出来cxt.arc(15+i*30,15+j*30,13,0,2*Math.PI);cxt.closePath();let color;if(me){color = 'black';}else{color = 'white';}cxt.fillStyle=color;cxt.fill();}

五子棋判断人获胜

1.初始化一个数组myWin来获得用户在每个赢法编号上下的分值
2.在点击事件里面添加循环方法，遍历当前位置符合哪个赢法数组内容，如果在同一个赢法编号下获得5分则代表用户胜利。并标记游戏结束。
3.改变标题，代表胜利。

 // 定义二维数组来存储每个坐标是否已经下了棋子let chessBoard = new Array(15).fill(0).map(() => new Array(15).fill(0));// 人下棋let me = true;//用来标记人是否可以下棋let over = false;//标记游戏是否结束let myWin = new Array(id).fill(0);//记录用户在每个赢法编号上的分值chess.onclick = function(e){// 游戏结束或者不是自己下棋回合就停止下棋if(over) return;if(!me) return;// 获取x轴坐标,但这个坐标也是根据canvas父元素的偏移量let x = e.offsetX;// 获取y轴坐标let y = e.offsetY;let i = Math.floor(x/30);let j = Math.floor(y/30);// 此处没有棋子则可以下棋if(chessBoard[i][j]==0){oneStep(i,j,me);// 并将此处标记为已经下过棋子chessBoard[i][j] == 1;for(let k=0;k<id;k++){// 遍历每一个赢法编号,如果同一个编号的分值到达了5个代表赢了if(wins[i][j][k]){myWin[k]++;if(myWin[k]==5){title.innerHTML = '恭喜你，你赢了';over = true;}}}// me = false;}}

展示：

五子棋计算机落子思路

主要分为两部分
一、拦截用户下的棋子
二、计算机自己已经下过的棋子
给两部分分别初始化与棋盘一样大的数组myScore和computerScore
分别对两者进行分数计算，只对棋盘中的空白格位置进行计算，已经下过棋子的位置不进行考虑。
得出分值最高的空白格位置就是计算机需要落子的位置。

五子棋计算机落子实现

定义计算机落子方法computerAI
1.初始化数组myScore和computerScore来存储用户以及计算机落子在空白格位置的总分值。
2.初始化max、x、y分别存储最大分值以及最大值在棋盘的位置
3.循环遍历每一个格子，碰到空白格时去判断当前赢法编号的已落子情况，分情况进行分数增加。
4.判断大小保存最大值以及位置，调用oneStep方法实现落子，并判断游戏是否结束，分情况设置over数值。
5.在chess的点击事件里面添加语句，调用计算机落子方法。
chess点击事件里添加的部分

  // 计算机落子if(!over&&!me){computerAI();if(!over){me = !me}}

计算机落子方法：

// 计算机落子方法function computerAI(){// 计算在用户旁边落子的分值以及在计算机落子旁边下棋的分值// 计算空白子在用户所占用赢法上的分值let myScore = new Array(15).fill(0).map(() => new Array(15).fill(0));// 空白子在计算机所占用赢法上的分值let computerScore = new Array(15).fill(0).map(() => new Array(15).fill(0));let max = 0,x = 0,y = 0;//分别存储空白子分数最大值以及空白子最大值所对应的坐标for(let i=0;i<15;i++){for(let j = 0;j<15;j++){// 要判断空白位置的分值，已落子的不用管if(chessBoard[i][j]==0){for(let k=0;k<id;k++){// 代表当前赢法编号上有棋子if(wins[i][j][k]){// 用户在此编号的分值if(myWin[k] == 1){myScore[i][j] += 200;}else if(myWin[k] == 2){myScore[i][j] += 400;}else if(myWin[k] == 3){myScore[i][j] += 2000;}else if(myWin[k] == 4){myScore[i][j] += 3000;}if(computerWin[k] == 1){computerScore[i][j] += 220;}else if(computerWin[k] == 2){computerScore[i][j] += 420;}else if(computerWin[k] == 3){computerScore[i][j] += 2200;}else if(computerWin[k] == 4){computerScore[i][j] += 3200;}}}// 思路就是先去拦截用户的棋子if(myScore[i][j]>max){max = myScore[i][j];x = i;y = j;}else if(myScore[i][j]==max){// 不需要拦截用户时，去判断怎么下棋能让计算机更有利if(computerScore[i][j]>max){max = computerScore[i][j];x = i;y = j;}}if(computerScore[i][j]>max){max = computerScore[i][j];x = i;y = j;}else if(computerScore[i][j]=max){if(myScore[i][j]>max){max = myScore[i][j];x = i;y = j;}}}}}oneStep(x,y,me);chessBoard[x][y]+=1;for(let k=0;k<id;k++){if(wins[x][y][k]){computerWin[k]++;if(computerWin[k]==5){title.innerHTML = '你输了！计算机已获胜'over = true;}}}}

游戏总界面：

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五子棋</title><style>.title{text-align: center;}.chess{/* canvas与image一样虽然可以设置高和宽，但是是行内块，所以把它变成块元素，方便用margin居中 */display: block;margin: 50px auto;/* 阴影往下往右是正数，前两个值代表往下往右的偏移量，第三个代表阴影宽度，最后一个是阴影颜色 */box-shadow: 5px 5px 5px #b9b9b9,-2px -2px 2px #efefef;cursor: pointer;}div{text-align: center;}.res{padding: 10px 20px;background-color: pink;border-radius: 10px;color: white;cursor: pointer;}</style>
</head>
<body><h3 class="title">--五子棋--</h3><canvas class="chess" width="450px" height="450px"></canvas><div><a class="res">restart</a></div>
</body><script>let chess = document.getElementsByClassName('chess')[0];//获取chess画布let title = document.getElementsByClassName('title')[0];//获取标题// 获取2d画布的上下文let cxt = chess.getContext("2d");// 线的颜色cxt.strokeStyle = "#b9b9b9";window.onload = function(){drawChessBoard();}function drawChessBoard(){for(let i=0;i<15;i++){// 从canvas画布位置开始计算// 每条横线起始点位置cxt.moveTo(15,15+i*30);// 每条横线终点位置cxt.lineTo(435,15+i*30);// 使用stroke方法连cxt.stroke();// 竖线同上cxt.moveTo(15+i*30,15);cxt.lineTo(15+i*30,435);cxt.stroke();}}// 设置赢法数组,3维数组，前两个代表坐标位置，赢法编号// 例：// [0,0,0]/[1,0,0]/[2,0,0]/[3,0,0]/[4,0,0] 从棋盘左上角开始往右五个棋子// [1,0,1]/[2,0,1]/[2,0,1]/[3,0,1]/[5,0,1] 从棋盘左上角后面一个开始往右五个棋子// 初始化数组let wins = [];for(let i=0;i<15;i++){wins[i] = [];for(let j=0;j<15;j++){wins[i][j] = [];}}// 设置赢法编号let id = 0;// 统一横线赢法，即横着连成5个子// 横坐标i的起始位置只能到11，再往后就没法赢了for(let i = 0;i<11;i++){for(let j=0;j<15;j++){for(let k = 0;k<5;k++){wins[i+k][j][id] = true}id++;}}// 统计竖线赢法for(let i = 0;i<11;i++){for(let j=0;j<15;j++){for(let k = 0;k<5;k++){wins[j][i+k][id] = true}id++;}}// 统计正斜线,从左上连到右下角for(let i=0;i<11;i++){for(let j=0;j<11;j++){for(let k=0;k<5;k++){wins[j+k][i+k][id] = true;}id++;}}// 统计反斜线,从右上连到左下角for(let i=0;i<11;i++){for(let j=14;j>=4;j--){for(let k=0;k<5;k++){wins[i+k][j-k][id] = true;}id++;}}// 定义二维数组来存储每个坐标是否已经下了棋子let chessBoard = new Array(15).fill(0).map(() => new Array(15).fill(0));// 人下棋let me = true;//用来标记人是否可以下棋let over = false;//标记游戏是否结束let myWin = new Array(id).fill(0);//记录用户在每个赢法编号上的分值let computerWin = new Array(id).fill(0);//记录计算机在每个赢法编号上的分值chess.onclick = function(e){// 游戏结束或者不是自己下棋回合就停止下棋if(over) return;if(!me) return;// 获取x轴坐标,但这个坐标也是根据canvas父元素的偏移量let x = e.offsetX;// 获取y轴坐标let y = e.offsetY;let i = Math.floor(x/30);let j = Math.floor(y/30);// 此处没有棋子则可以下棋if(chessBoard[i][j]==0&&me){oneStep(i,j,me);// 并将此处标记为已经下过棋子chessBoard[i][j] += 1;//此处要用+1而不能用==1me = !mefor(let k=0;k<id;k++){// 遍历每一个赢法编号,如果同一个编号的分值到达了5个代表赢了if(wins[i][j][k]){myWin[k]++;if(myWin[k]==5){title.innerHTML = '恭喜你，你赢了';over = true;}}}}// 计算机落子if(!over&&!me){computerAI();if(!over){me = !me}}}// 计算机落子方法function computerAI(){// 计算在用户旁边落子的分值以及在计算机落子旁边下棋的分值// 计算空白子在用户所占用赢法上的分值let myScore = new Array(15).fill(0).map(() => new Array(15).fill(0));// 空白子在计算机所占用赢法上的分值let computerScore = new Array(15).fill(0).map(() => new Array(15).fill(0));let max = 0,x = 0,y = 0;//分别存储空白子分数最大值以及空白子最大值所对应的坐标for(let i=0;i<15;i++){for(let j = 0;j<15;j++){// 要判断空白位置的分值，已落子的不用管if(chessBoard[i][j]==0){for(let k=0;k<id;k++){// 代表当前赢法编号上有棋子if(wins[i][j][k]){// 用户在此编号的分值if(myWin[k] == 1){myScore[i][j] += 200;}else if(myWin[k] == 2){myScore[i][j] += 400;}else if(myWin[k] == 3){myScore[i][j] += 2000;}else if(myWin[k] == 4){myScore[i][j] += 3000;}if(computerWin[k] == 1){computerScore[i][j] += 220;}else if(computerWin[k] == 2){computerScore[i][j] += 420;}else if(computerWin[k] == 3){computerScore[i][j] += 2200;}else if(computerWin[k] == 4){computerScore[i][j] += 3200;}}}// 思路就是先去拦截用户的棋子if(myScore[i][j]>max){max = myScore[i][j];x = i;y = j;}else if(myScore[i][j]==max){// 不需要拦截用户时，去判断怎么下棋能让计算机更有利if(computerScore[i][j]>max){max = computerScore[i][j];x = i;y = j;}}if(computerScore[i][j]>max){max = computerScore[i][j];x = i;y = j;}else if(computerScore[i][j]=max){if(myScore[i][j]>max){max = myScore[i][j];x = i;y = j;}}}}}oneStep(x,y,me);chessBoard[x][y]+=1;for(let k=0;k<id;k++){if(wins[x][y][k]){computerWin[k]++;if(computerWin[k]==5){title.innerHTML = '你输了！计算机已获胜'over = true;}}}}// 落子的方法function oneStep(i,j,me){// 画圆cxt.beginPath();// 圆心坐标、半径、从0度到2pi度画个完整的圆出来cxt.arc(15+i*30,15+j*30,13,0,2*Math.PI);cxt.closePath();let color;if(me==true){color = 'black';}else{color = 'red';}cxt.fillStyle=color;cxt.fill();}</script>
</html>