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

发布于:2024-11-28 ⋅ 阅读:(44) ⋅ 点赞:(0)

作者:一起重学前端

前言

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

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

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

豆包 MarsCode 放码过来

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

image.png

安装 vscode 插件

image.png

让豆包 MarsCode 给我写个 DOM 版本

image.png

  • 根据你提供的上下文和要求,以下是一个使用原生 Web 技术实现的简单五子棋游戏的示例,包括胜负判断、悔棋和撤销悔棋功能。这个示例使用了 DOM 来创建棋盘和实现交互。
第一次生成的代码(无法下棋,需要修改)

image.png

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

code.juejin.cn/pen/7416330…

第 N 个版本(可以学习优化)

点击重试生成的第二个版本,样式也会错位,棋子也是文字 whiteblack。下面代码示例是第 N 个版本的

image.png

image.png

 

image.png

<!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