作者：一起重学前端
前言
2017 年，当时大学三本毕业前端工作一年，去深圳找工作面试，在拉勾上海投，接到某公司前端开发团队回复询问邮箱账号，喜滋滋的以为可以有面试了。一看邮箱，抛给我一道面试题，写完发到对方邮箱。。
- 编写一个单机五子棋，用原生 web 技术实现，完成时间不作限制。
- 实现胜负判断，并给出赢棋提示。
- 实现悔棋和撤销悔棋功能。
- 可使用 DOM/ Canvas 实现。
当年没有实现，现在有了 AI 编程助手，弥补这个遗憾吧～
豆包 MarsCode 放码过来
豆包 MarsCode 编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力。
安装 vscode 插件
让豆包 MarsCode 给我写个 DOM 版本
- 根据你提供的上下文和要求，以下是一个使用原生 Web 技术实现的简单五子棋游戏的示例，包括胜负判断、悔棋和撤销悔棋功能。这个示例使用了 DOM 来创建棋盘和实现交互。
第一次生成的代码（无法下棋，需要修改）
「第一次生成五子棋代码」
第 N 个版本（可以学习优化）
点击重试生成的第二个版本，样式也会错位，棋子也是文字 white、black。下面代码示例是第 N 个版本的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gomoku Game</title>
<style>
#game-board {
display: grid;
grid-template-columns: repeat(15, 30px);
grid-gap: 1px;
width: 450px;
height: 450px;
background-color: #f0d9b5;
}
.cell {
width: 30px;
height: 30px;
background-color: #b58863;
display: flex;
align-items: center;
justify-content: center;
}
.cell:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div id="game-board"></div>
<button id="undo">悔棋</button>
<button id="redo">撤销悔棋</button>
<script>
const boardSize = 15;
let currentPlayer = "black";
let gameBoard = Array.from({ length: boardSize }, () =>
Array(boardSize).fill(null)
);
let history = [];
let redoStack = [];
function renderBoard() {
const gameBoardElement = document.getElementById("game-board");
gameBoardElement.innerHTML = "";
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.dataset.row = i;
cell.dataset.col = j;
cell.addEventListener("click", () => placeStone(i, j));
if (gameBoard[i][j]) {
cell.textContent = gameBoard[i][j];
}
gameBoardElement.appendChild(cell);
}
}
}
function placeStone(row, col) {
if (gameBoard[row][col]) return;
gameBoard[row][col] = currentPlayer;
history.push({ row, col, player: currentPlayer });
redoStack = [];
renderBoard();
checkWin(row, col);
currentPlayer = currentPlayer === "black" ? "white" : "black";
}
function checkWin(row, col) {
const directions = [
{ dr: 0, dc: 1 }, // Horizontal
{ dr: 1, dc: 0 }, // Vertical
{ dr: 1, dc: 1 }, // Diagonal /
{ dr: 1, dc: -1 }, // Diagonal \
];
for (const { dr, dc } of directions) {
let count = 1;
count += countStones(row, col, dr, dc);
count += countStones(row, col, -dr, -dc);
if (count >= 5) {
alert(`${currentPlayer} wins!`);
disableBoard();
return;
}
}
}
function countStones(row, col, dr, dc) {
let count = 0;
const player = gameBoard[row][col];
for (let i = 1; i < 5; i++) {
const r = row + dr * i;
const c = col + dc * i;
if (
r < 0 ||
r >= boardSize ||
c < 0 ||
c >= boardSize ||
gameBoard[r][c] !== player
)
break;
count++;
}
return count;
}
function disableBoard() {
const cells = document.getElementsByClassName("cell");
for (let i = 0; i < cells.length; i++) {
cells[i].removeEventListener("click", placeStone);
}
}
document.getElementById("undo").addEventListener("click", undoMove);
document.getElementById("redo").addEventListener("click", redoMove);
function undoMove() {
if (history.length === 0) return;
const lastMove = history.pop();
redoStack.push(lastMove);
gameBoard[lastMove.row][lastMove.col] = null;
currentPlayer = lastMove.player;
renderBoard();
}
function redoMove() {
if (redoStack.length === 0) return;
const nextMove = redoStack.pop();
history.push(nextMove);
gameBoard[nextMove.row][nextMove.col] = nextMove.player;
currentPlayer = nextMove.player === "black" ? "white" : "black";
renderBoard();
}
renderBoard();
</script>
</body>
</html>在这个 JavaScript 文件中，我们定义了几个函数来实现游戏逻辑：
renderBoard()：用于渲染棋盘，根据gameBoard数组的状态来创建或更新单元格。placeStone(row, col)：用于在指定的单元格放置棋子，更新游戏状态，并检查是否有玩家获胜。checkWin(row, col)：用于检查在指定的单元格落子后，是否有玩家获胜。countStones(row, col, dr, dc)：用于计算在指定方向上连续的相同颜色棋子的数量。disableBoard()：用于在游戏结束后禁用棋盘，防止玩家继续落子。showMessage(message)：用于在页面上显示游戏消息。undoMove()：用于悔棋，撤销上一步操作。redoMove()：用于撤销悔棋，重做上一步操作。
最后，我们在页面加载完成后调用 renderBoard() 函数来初始化棋盘，并为悔棋和撤销悔棋按钮添加事件监听器。
到这里基本功能都完成了，使用以上逻辑玩了几把游戏后，发现还存在一些问题
- 一方胜利后，还能继续下棋子。
- 重新开始，需要刷新页面。
我们继续问豆包 MarsCode: 如何优化这两个问题
- 优化五子棋游戏，确保在一方胜利后无法继续下棋，我们可以在
checkWin函数中添加逻辑来禁用棋盘点击事件。这样，当有玩家获胜时，游戏将停止接受新的落子操作。 - 我们需要确保
placeStone和checkWin函数中使用isGameOver变量来阻止进一步的操作。此外，我们还需要在disableBoard函数中禁用棋盘的点击事件。这样，游戏将在一方胜利后停止接受新的落子操作。
豆包 MarsCode 体验有话说
这段时间一直在使用豆包 MarsCode 的代码补全，最近几天才用豆包 MarsCode 生成一些功能代码，看着生成的代码，可以不断学习完善，还是挺惊艳的。
如果想体验，欢迎点击此处即刻体验豆包 MarsCode～