酷！用豆包MarsCode 写了一个五子棋小游戏

作者：一起重学前端

前言

2017 年，当时大学三本毕业前端工作一年，去深圳找工作面试，在拉勾上海投，接到某公司前端开发团队回复询问邮箱账号，喜滋滋的以为可以有面试了。一看邮箱，抛给我一道面试题，写完发到对方邮箱。。

编写一个单机五子棋，用原生 web 技术实现，完成时间不作限制。
- 实现胜负判断，并给出赢棋提示。
- 实现悔棋和撤销悔棋功能。
- 可使用 DOM/ Canvas 实现。

当年没有实现，现在有了 AI 编程助手，弥补这个遗憾吧～

豆包 MarsCode 放码过来

豆包 MarsCode 编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力。

安装 vscode 插件

让豆包 MarsCode 给我写个 DOM 版本

根据你提供的上下文和要求，以下是一个使用原生 Web 技术实现的简单五子棋游戏的示例，包括胜负判断、悔棋和撤销悔棋功能。这个示例使用了 DOM 来创建棋盘和实现交互。

第一次生成的代码（无法下棋，需要修改）

「第一次生成五子棋代码」

code.juejin.cn/pen/7416330…

第 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 函数中禁用棋盘的点击事件。这样，游戏将在一方胜利后停止接受新的落子操作。

完整版代码