20-30 五子棋游戏

20-分析五子棋的实现思路_哔哩哔哩_bilibili20-分析五子棋的实现思路是一次性学会 Canvas 动画绘图（核心精讲+50个案例）2023最新教程的第21集视频，该合集共计53集，视频收藏或关注UP主，及时了解更多相关视频内容。https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.player.switch&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=21https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.player.switch&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=21https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.player.switch&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=21https://www.bilibili.com/video/BV16T411B7kP?spm_id_from=333.788.player.switch&vd_source=9218320e7bcc2e793fa8493559f4acd7&p=21

20-分析五子棋的实现思路

逻辑处理用原生JavaScript写，画布与棋子用canvas画

21-绘制网格棋盘

视频里用的绿色太晃眼了，换了一个更像木质棋盘的颜色 #ebc78f 。

页面底色与棋盘颜色，代码如下：

html,
body {background: #eee;
}canvas {display: block;margin: 0 auto;background-color: #ebc78f;
}

棋盘是由多条横线和纵线组合而成，一格是50px，左右余宽 50px， (800-50-50) / 50 = 14，如果i从0开始算，0到14一共是15条线，为了方便计算，设 i 从1开始，for循环至 i < 16结束。

    // 1.创建canvaslet canvas = document.createElement('canvas')canvas.width = 800canvas.height = 800document.body.append(canvas)// 2.获取 contextlet context = canvas.getContext('2d')// 3.画棋盘// 3.1 棋盘是由多条横线和纵线组合而成，一格按50px算，左右余宽 50px, (800-50-50) / 50 = 14，所以我们需要15条线for (let i = 1; i < 16; i++) {// 把线段的开头表示出来(横线)context.moveTo(50, 50 * i)  // 起点context.lineTo(750, 50 * i)  // 终点context.stroke()}for (let i = 1; i < 16; i++) {// 把线段的开头表示出来（竖线）context.moveTo(50 * i, 50)  // 起点context.lineTo(50 * i, 750)  // 终点context.stroke()}

22-点击棋盘绘制棋子

通过 context.beginPath()，可以避免上图这种情况，要注意 .beginPath() 要写在画圆 .arc() 之前。

canvas.addEventListener('click', e => {let { offsetX: x, offsetY: y } = econtext.beginPath()  // 避免起点终点被fill()填充颜色context.arc(x, y, 20, 0, 2 * Math.PI)context.fill()context.closePath()  // 配合 .beginPath()  使用
})

因为一个格子是50px，我们设置 (offsetX+25)/2 ，这样计算后可以让偏左的对齐左边的线，偏右的对齐右边的线（offsetY也是同理），在 canvas.addEventListener 中设置如下：

let { offsetX, offsetY } = e
let x = Math.floor((offsetX + 25) / 50) * 50  // 让棋子在网格线正确的位置
let y = Math.floor((offsetY + 25) / 50) * 50

23-棋盘的边界判断

判断点击的位置边界，如果超出棋盘范围则不落棋子。如果offsetX < 25，则不落棋子（因为如果 offsetX >= 25，则可知落棋子在第一列上），offsetY与上下左右四边同理。

// 判断点击的位置边界，如果超出棋盘范围则不落棋子
if (offsetX < 25 || offsetY < 25 || offsetX > 775 || offsetY > 775) {return;
}

24-绘制不不同的棋子

context.beginPath()
context.arc(x, y, 20, 0, 2 * Math.PI)// 设置黑白棋子的渐变色
let gBlack = context.createRadialGradient(x - 8, y - 8, 0, x, y, 20)
gBlack.addColorStop(0, '#999')
gBlack.addColorStop(1, '#000')let gWhite = context.createRadialGradient(x - 5, y - 10, 18, x, y, 40)
gWhite.addColorStop(0, '#fff')
gWhite.addColorStop(1, '#666')// 判断当前棋子颜色变量，给棋子黑白不同颜色
context.fillStyle = isBlack ? gBlack : gWhite// 视频里老师的代码
// let tx = isBlack ? x - 10 : x + 10;
// let ty = isBlack ? y - 10 : y + 10;
// let g = context.createRadialGradient(tx, ty, 0, tx, ty, 30);
// g.addColorStop(0, isBlack ? '#ccc' : '#666');
// g.addColorStop(1, isBlack ? '#000' : '#fff');
// context.fillStyle = g
// 视频里老师的代码 ENDcontext.fill()
context.closePath()

25-处理重复落子的问题

第1个数组代表第一列的棋子内容（原点 (0,0) 在左上角，row 相当于 X轴，向右方向为正方向， col 是 Y轴，向下方向为正方向）。

使用一个二维数组，把所有的棋子位置存储起来。棋盘有15横列，每个 i 代表一列，循环15次，设置 circles[i] 为一个空数组。

// 6. 使用一个二维数组把所有的棋子位置存储起来
let circles = [];
// 棋盘有15列，每个i指代每一列
for (let i = 1; i < 16; i++) {// circles[i]里的每一项都是一个空数组circles[i] = []
}
console.log(circles);

设置 x = i * 50, y = j * 50 ，可以让棋子在网格线十字中心的位置上，添加一个布尔变量 isBlack，用来控制棋子黑白颜色的切换。

let x = i * 50  // 让棋子在网格线十字中心的位置
let y = j * 50
context.beginPath()
context.arc(x, y, 20, 0, 2 * Math.PI)// 6.1 把棋子的坐标存到二维数组里
circles[i][j] = isBlack ? 'black' : 'white'
// console.log(circles);

如果 circles[i][j] 不为空，说明里面已经有内容，那么不允许重复落子。

// 6.2 判断当前位置是否已经存在棋子
if (circles[i][j]) {// 提醒用户， 这里已有棋子tip.innerText = `不能重复落子！当前是${isBlack ? '黑' : '白'}棋的回合`return;
}

设置顶部的文字提示。

 <div class="tip">请黑棋落子</div>// ...
// 提醒用户换人
let text = isBlack ? '请黑棋落子' : '请白棋落子'
tip.innerText = text
// ...

26-纵向判断棋子连续

连成线的4种情况：

将坐标(row,col)视作(x,y)更加直观，在纵轴（竖轴）方向上检索是否有5个连续的棋子可以想象为：在X轴位置不变，Y轴加减坐标上下移动，在此期间判断各个棋子是否为同一种颜色。

代码逻辑草稿：

// 以 row， col 为起点，在二维数组里向上和向下查找
circles[row][col-1]
circles[row][col-2]
circles[row][col-3]
circles[row][col-4]circles[row][col+1]
circles[row][col+2]
circles[row][col+3]
// ...

设置一个 checkVertical 函数，来判断在竖轴方向上是否有五子相连，它的返回值是 return count >=5 ，如果 count 是 5，那么函数结果返回 true，会在下面的步骤中将结果传递给一个 endGame变量作为判断结束游戏的依据（其他三个方向的设计逻辑也是这样）。

【b站视频内提供的代码（有bug）】

// 纵向查找是否有5个连续相同的棋子
function checkVertical(row, col) {// 记录向上的次数let up = 0;// 记录向下的次数let down = 0;let times = 0;// 定义当前总共有几个已经连在一起let count = 1; // 初始值，自己本身算1个// 为避免出现死循环，设置一个循环上限 10000while (times < 17) {times++;// 如果棋子已经大于一个指定的次数，就不找了if (count >= 5) {break;}let target = isBlack ? 'black' : 'white';// 以 row， col 为起点，在二维数组里向上查找up++;if (circles[row][col - up] && circles[row][col - up] == target) {count++;};// 以 row， col 为起点，在二维数组里向下查找down++;if (circles[row][col + down] && circles[row][col + down] == target) {count++;};}return count >= 5;
}

27-处理获胜的逻辑

添加一个 endGame 布尔值变量，初始值为 false，通过将当前棋子的(i, j) 值传递给四个方向的五子相连函数来判断是否有 true 值存在，如果有，那么游戏结束，棋盘无法再被点击。

// 8.1 定义一个变量标识，是否结束游戏
let endGame = false// ...
// 8. 判断是否有人已经获胜，endGame为true，则无法点击
if (endGame) {// 游戏结束return
}// ...
// 7.判断当前是否已有对应的棋子连成5颗，endGame为true则出现获胜提示字
endGame = checkVertical(i, j)
if(endGame) {tip.innerText = `${isBlack?'黑': '白'}方获胜！`return
}

28-处理棋子非连续的情况

如果相邻的棋子都不是同色的，直接 break 这次的判断循环。

// 如果棋子已经大于一个指定的次数，或者相邻棋子不是同色的（同色棋子不连续），就不找了
if (count >= 5 || (circles[row][col - up] != target && circles[row][col + down] != target)) {break;
}

29-横向判断是否获胜

【b站视频内提供的代码（有bug）】

// 横向查找是否有5个连续相同的棋子
function checkHorizontal(row, col) {// 记录向左的次数let left = 0;// 记录向右的次数let right = 0;let times = 0;// 定义当前总共有几个已经连在一起let count = 1; // 初始值，自己本身算1个// 为避免出现死循环，设置一个循环上限 10000while (times < 17) {times++;let target = isBlack ? 'black' : 'white';// 以 row， col 为起点，在二维数组里向左查找left++;if (circles[row-left][col] && circles[row-left][col] == target) {count++;};// 以 row， col 为起点，在二维数组里向右查找right++;if (circles[row+right][col] && circles[row+right][col] == target) {count++;};// 如果棋子已经大于一个指定的次数，或者相邻棋子不是同色的（同色棋子不连续），就不找了if (count >= 5 || (circles[row-left][col] != target && circles[row+right][col] != target)) {break;}}return count >= 5;
}

最终我们需要4个方向的判断，所以这里会有4个判断函数，上下、左右、左上右下、右上左下。

// 7.判断当前是否已有对应的棋子连成5颗，endGame为true则出现获胜提示字
endGame = checkVertical(i, j) || checkHorizontal(i, j)

30-斜向判断是否获胜

判断方向在左上右下时，方向往左上延伸，那么X-, Y-，方向往右下延伸，那么X+, Y+。

判断方向在右上左下时，方向往右上延伸，那么X+, Y-，方向往左下延伸，那么X-, Y+。

【完整代码-bug修复版本】

落子靠近棋盘四周一圈时，如果要判断（不存在的）超出棋盘范围的棋子代码会报错，所以进行了 if 判断。

* 如果还有其他bug，建议自己修正一下。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html,body {background: #eee;}canvas {display: block;margin: 0 auto;background-color: #ebc78f;}.tip {text-align: center;padding: 16px;color: #666;}</style>
</head><body><div class="tip">请黑棋落子</div><script>// 1.创建canvaslet canvas = document.createElement('canvas')canvas.width = 800canvas.height = 800document.body.append(canvas)// 获取文字提示 tip 元素let tip = document.querySelector('.tip')// 2.获取 contextlet context = canvas.getContext('2d')// 3.画棋盘// 3.1 棋盘是由多条横线和纵线组合而成，一格按50px算，左右余宽 50px, (800-50-50) / 50 = 14，所以我们需要14条线for (let i = 1; i < 16; i++) {// 把线段的开头表示出来(横线)context.moveTo(50, 50 * i)  // 起点context.lineTo(750, 50 * i)  // 终点context.stroke()}for (let i = 1; i < 16; i++) {// 把线段的开头表示出来（竖线）context.moveTo(50 * i, 50)  // 起点context.lineTo(50 * i, 750)  // 终点context.stroke()}// 6. 使用一个二维数组把所有的棋子位置存储起来let circles = [];// 棋盘有15列，每个i指代每一列for (let i = 1; i < 16; i++) {// circles[i]里的每一项都是一个空数组circles[i] = []}// console.log(circles);// 5.使用一个变量保存当前的棋子颜色let isBlack = true// 8.1 定义一个变量标识，是否结束游戏let endGame = false// 4. 当点击在棋盘里的时候，绘制一个棋子canvas.addEventListener('click', e => {let { offsetX, offsetY } = e// 判断点击的位置边界，如果超出棋盘范围则不落棋子if (offsetX < 25 || offsetY < 25 || offsetX > 775 || offsetY > 775) {return;}// 格子所在的位置let i = Math.floor((offsetX + 25) / 50)let j = Math.floor((offsetY + 25) / 50)// 8. 判断是否有人已经获胜，endGame为true，则无法点击if (endGame) {// 游戏结束return}// 6.2 判断当前位置是否已经存在棋子if (circles[i][j]) {// 提醒用户， 这里已有棋子tip.innerText = `不能重复落子！当前是${isBlack ? '黑' : '白'}棋的回合`return;}let x = i * 50  // 让棋子在网格线正确的位置let y = j * 50context.beginPath()context.arc(x, y, 20, 0, 2 * Math.PI)// 6.1 把棋子的坐标存到二维数组里circles[i][j] = isBlack ? 'black' : 'white'// console.log(circles);        // 设置黑白棋子的渐变色let gBlack = context.createRadialGradient(x - 8, y - 8, 0, x, y, 20)gBlack.addColorStop(0, '#999')gBlack.addColorStop(1, '#000')let gWhite = context.createRadialGradient(x - 5, y - 10, 18, x, y, 40)gWhite.addColorStop(0, '#fff')gWhite.addColorStop(1, '#666')// 判断当前棋子颜色变量，给棋子黑白不同颜色context.fillStyle = isBlack ? gBlack : gWhite// 视频里老师的代码// let tx = isBlack ? x - 10 : x + 10;// let ty = isBlack ? y - 10 : y + 10;// let g = context.createRadialGradient(tx, ty, 0, tx, ty, 30);// g.addColorStop(0, isBlack ? '#ccc' : '#666');// g.addColorStop(1, isBlack ? '#000' : '#fff');// context.fillStyle = g// 视频里老师的代码 ENDcontext.fill()context.closePath()// 7.判断当前是否已有对应的棋子连成5颗，endGame为true则出现获胜提示字endGame = checkVertical(i, j) || checkHorizontal(i, j) || checkNWtoSE(i, j) || checkNEtoSW(i, j)if (endGame) {tip.innerText = `${isBlack ? '黑' : '白'}方获胜！`return}// 提醒用户换人let text = isBlack ? '请白棋落子' : '请黑棋落子'tip.innerText = textisBlack = !isBlack})// // 开始判断4个方向的棋子相连情况//// 纵向查找是否有5个连续相同的棋子function checkVertical(row, col) {// 记录向上的次数let up = 0;// 记录向下的次数let down = 0;let target = isBlack ? 'black' : 'white';let times = 0;// 定义当前总共有几个已经连在一起let count = 1; // 初始值，自己本身算1个// 5个棋子连成线即可结束 times < 6while (times < 6) {times++;// 探寻上边up++;// 当col - up > 0，说明棋子的上侧还在棋盘内，开始进行判断if (col - up > 0) {if (circles[row][col - up] == target) {count++;}}// 探寻下边down++;// 当col+down < 16，说明棋子的下侧还在棋盘内，开始进行判断if (col + down < 16) {if (circles[row][col + down] == target) {count++;}}// 在col - up与col + down都在棋盘里的情况在，如果相邻棋子不是target，则break，或如果count已满足5颗相连，则breakif (col - up > 0 && col + down < 16) {if (count >= 5 || (circles[row][col - up] != target && circles[row][col + down] != target)) {break;}}}return count >= 5;}// 横向查找是否有5个连续相同的棋子function checkHorizontal(row, col) {// 记录向左的次数let left = 0;// 记录向右的次数let right = 0;let target = isBlack ? 'black' : 'white';let times = 0;// 定义当前总共有几个已经连在一起let count = 1; // 初始值，自己本身算1个// 为避免出现死循环，设置一个循环上限 5while (times < 6) {times++;// 探寻左边left++;// 当row-left>0，说明棋子的左侧还在棋盘内，开始进行判断if (row - left > 0) {if (circles[row - left][col] == target) {count++;}}right++;// 当row+right<16，说明棋子的右侧还在棋盘内，开始进行判断if (row + right < 16) {if (circles[row + right][col] == target) {count++;}}if (row + right < 16 && row - left > 0) {if (count >= 5 || (circles[row + right][col] != target && circles[row - left][col] != target)) {break;}}}return count >= 5;}// 判断 \ 左上到右下的方向function checkNWtoSE(row, col) {let lt = 0; // 左上let rb = 0; // 右下let target = isBlack ? 'black' : 'white';let times = 0;let count = 1; // 初始值，自己本身算1个while (times < 5) {times++;// 探寻左上方向lt++;if (col - lt > 0 && row - lt > 0) {if (circles[row - lt][col - lt] == target) {count++;}}// 探寻右下方向rb++;if (row + rb < 16 && col + rb < 16) {if (circles[row + rb][col + rb] == target) {count++;}}if (row - lt > 0 && col - lt && row + rb < 16 && col + rb < 16) {if (count >= 5 || (circles[row - lt][col - lt] != target && circles[row + rb][col + rb] != target)) {break;}}}return count >= 5;}// 判断 / 右上到左下的方向function checkNEtoSW(row, col) {let rt = 0; // 右上let lb = 0; // 左下let target = isBlack ? 'black' : 'white';let times = 0;let count = 1; // 初始值，自己本身算1个while (times < 5) {times++;// 探寻右上rt++;if (col - rt > 0 && row + rt < 16) {if (circles[row + rt][col - rt] && circles[row + rt][col - rt] == target) {count++;};}// 探寻左下lb++;if (row - lb > 0 && col + lb < 16) {if (circles[row - lb][col + lb] && circles[row - lb][col + lb] == target) {count++;};}if (row - lb > 0 && col + lb < 16) {if (count >= 5 || (circles[row + rt][col - rt] != target && circles[row - lb][col + lb] != target)) {break;}}}return count >= 5;}</script>
</body></html>