目录
首先棋盘是一个3*3的二维数组，而我们的二维数组又是分别由一个一个的一维数组组成的。如下图所示。
给我们的每个棋盘空间绑定事件hePosition(row,col)，表示鼠标下落点的坐标。在这个函数中，我们首先拿到一个棋盘，初始情况是默认空的状态，假定A玩家先走，那么我们就把当前的A玩家走的位置坐标赋给棋盘的（row,col），由于我们使用了一个一维数组来表示3*3的三子棋棋盘格子，我们这里将获取到的二维坐标（row,col）映射到一维数组的索引，这样就可以方便的找到鼠标点击的对应的格子并将其标志为当前玩家的标记。这里我们使用innerText显示文本标记。
在处理好获取到指定格子的坐标标记后， 此时我们单独封装一个函数去检查获胜的判定方法。如下图所示获胜判定规则。每一行相同、每一列相同、斜对角相同。
首先我先设置一个只读变量piece让它等于棋盘的某个坐标上的元素，也就是分别从列、行、对角的角度去获取特定行和列位置上的元素。简单来见piect这个变量它可能的值是A、B、空，如果当前位置为空，那么玩家就可以标记显示，不为空，不操作。然后在hePosition(row,col)函数中调用，如果返回的是true那么就会弹出当前哪个玩家获胜了，然后重置棋盘。这里需要注意的是，使用setTimeout()定时器的原因是因为整个页面加载速度非常快，单线程执行，如果不设置定时器延时作用的话那么我们胜利玩家下的最后一个棋子是看不到的，所以设置了延时显示后在重置棋盘。如果棋盘已经下满了，那么就手动触发重置按钮，将棋盘清空。
因为我们下棋是A走了换B，所以这里我们处理的条件是使用三目运算符，判断上面的currentPlayer是否获胜，没有获胜，那么就更新到另一个玩家。
同样的也是单独使用一个函数resetBoard()去重置，重置也就是回到初始时候，此时先落子的换成A，然后嵌套for循环分别去遍历行和列，将棋盘board[row][col]置为空（''），同时把每个格子也置为空document.getElementsByClassName('he')[row * 3 + col].innerText = '';当获胜后，或者棋盘满了后我们调用这个函数达到目的。
对于棋盘盘满，和重置棋盘类似，我们也是使用for嵌套循环，去遍历行和列，看每个格子上是否为空，都不为空则说明每个格子都有标志。此时我们就返回true，如果有没满的情况那就返回false。
<!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>Document</title>
<style>
.con {
width: 600px;
/* background: pink; */
height: 400px;
display: flex;
flex-direction: row;
margin: 0 auto;
justify-content: space-around;
}
.con button {
width: 100px;
height: 100px;
border-radius: 50%;
margin-top: 100px;
background: yellow;
font-size: 20px;
}
.container {
width: 300px;
height: 300px;
background: pink;
display: flex;
flex-direction: column;
box-sizing: border-box;
border: 2px solid black;
}
.row {
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
}
.row .he {
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
font-size: 30px;
line-height: 100px;
}
body {
text-align: center;
}
button {
width: 150px;
height: 40px;
background: yellow;
border: none;
}
</style>
</head>
<body>
<div class="con">
<button>A玩家</button>
<div class="container">
<div class="row">
<div class="he" onclick="hePosition(0,0)"></div>
<div class="he" onclick="hePosition(0,1)"></div>
<div class="he" onclick="hePosition(0,2)"></div>
</div>
<div class="row">
<div class="he" onclick="hePosition(1,0)"></div>
<div class="he" onclick="hePosition(1,1)"></div>
<div class="he" onclick="hePosition(1,2)"></div>
</div>
<div class="row">
<div class="he" onclick="hePosition(2,0)"></div>
<div class="he" onclick="hePosition(2,1)"></div>
<div class="he" onclick="hePosition(2,2)"></div>
</div>
</div>
<button>B玩家</button>
</div>
<button onclick="resetBoard()">重置棋盘</button>
<script>
// 初始化棋盘
const board = [
['','',''],
['','',''],
['','',''],
];
let currentPlayer = 'A'; //设置每次开始的当前要走的棋子
// 落子处理
function hePosition(row,col) {
// 初始时候棋盘是空的，开始游戏就把当前第一个走的赋值给初始的位置
if(board[row][col] === '') {
board[row][col] = currentPlayer;
document.getElementsByClassName('he')[row * 3 + col].innerText = currentPlayer;
// 检查是否获胜
if(checkWin(row,col)) {
// 设置定时器，因为页面加载速度非常快，所以通过设置延时来显示最后一个棋子落地位置
setTimeout(() => {
alert(currentPlayer + "获胜！");
resetBoard();
}, 1000); // 延迟 1000 毫秒后重置棋盘
// 获胜也就是结束后要重置棋盘
return;
}
// 如果棋盘满了
if(isBoardFull()) {
alert("棋盘已满，请重新开始！");
return;
}
// 如果玩家没有获胜，将 currentPlayer 更新为另一个玩家，这样实现了两个玩家在轮流下棋的功能
currentPlayer = currentPlayer === 'A' ? 'B' : 'A';
}
}
// 检查获胜方法
function checkWin(row, col) {
// 使用 board[row] 从 board 中获取第 row 行的一维数组，然后再用 [col] 从该一维数组中获取第 col 列的元素。
const piece = board[row][col];
// 检查行
if (board[row][0] === piece && board[row][1] === piece && board[row][2] === piece) {
return true;
}
// 检查列
if (board[0][col] === piece && board[1][col] === piece && board[2][col] === piece) {
return true;
}
// 检查对角线
if ((board[0][0] === piece && board[1][1] === piece && board[2][2] === piece) ||
(board[0][2] === piece && board[1][1] === piece && board[2][0] === piece)) {
return true;
}
}
// 重置棋盘
function resetBoard() {
currentPlayer = 'A';
for (let row = 0; row < 3; row++) {
for (let col = 0; col < 3; col++) {
board[row][col] = '';
document.getElementsByClassName('he')[row * 3 + col].innerText = '';
}
}
}
// 判断棋盘满操作
function isBoardFull() {
for(let row = 0; row < 3; row++) {
for(let col = 0; col < 3; col++) {
if(board[row][col] === '') {
return false;
}
}
}
return true;
}
</script>
</body>
</html>以上就是js实现三子棋的过程啦，我之所以在旁边设置了AB玩家是因为刚开始想通过点击AB生成随机坐标模拟实现，然后想着先把这个自控点击的先实现啦，随机生成的请看下节。