AI编程助手写面试题----写个五子棋

原创

一起重学前端

修改于 2024-09-23 16:52:07

780

修改于 2024-09-23 16:52:07

前言

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

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

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

AI编程助手放码过来

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

安装vscode插件

让AI编程助手给我写个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()函数来初始化棋盘，并为悔棋和撤销悔棋按钮添加事件监听器。

到这里基本功能都完成了，使用以上逻辑玩了几把游戏后，发现还存在一些问题

一方胜利后，还能继续下棋子。
重新开始，需要刷新页面。

我们继续问AI编程助手: 如何优化这两个问题

优化五子棋游戏，确保在一方胜利后无法继续下棋，我们可以在checkWin函数中添加逻辑来禁用棋盘点击事件。这样，当有玩家获胜时，游戏将停止接受新的落子操作。
我们需要确保placeStone和checkWin函数中使用isGameOver变量来阻止进一步的操作。此外，我们还需要在disableBoard函数中禁用棋盘的点击事件。这样，游戏将在一方胜利后停止接受新的落子操作。

AI编程助手体验有话说

这段时间一直在使用AI编程助手的代码补全，最近几天才用AI编程助手生成一些功能代码，看着生成的代码，可以不断学习完善，还是挺惊艳的。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S9

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S9

登录后参与评论

0 条评论

热度

AI编程助手写面试题----写个五子棋

AI编程助手写面试题----写个五子棋