让 AI 用 JS 和 HTML 写一个 tic tac toe 游戏

最新推荐文章于 2024-09-16 13:39:40 发布

andyjpg

最新推荐文章于 2024-09-16 13:39:40 发布

阅读量336

点赞数 5

分类专栏： ai 文章标签：游戏 ai AI编程人工智能 javascript html chatgpt

本文链接：https://blog.csdn.net/2301_82056873/article/details/135137811

版权

ai 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们做了一个 ai chat bot，希望大家可以试用并且提些建议。AICat · 来自ChatGPT的人工智能机器喵

以下为 AI 的回答：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .board {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
      }
      .cell {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="board"></div>

    <script>
      // 创建一个2D数组来表示游戏棋盘
      const board = [
        ['', '', ''],
        ['', '', ''],
        ['', '', '']
      ];

      // 获取棋盘元素
      const boardElement = document.querySelector('.board');

      // 渲染棋盘
      function renderBoard() {
        boardElement.innerHTML = '';

        for (let row = 0; row < board.length; row++) {
          for (let col = 0; col < board[row].length; col++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.innerText = board[row][col];

            // 添加点击事件处理程序
            cell.addEventListener('click', () => {
              // 检查当前位置是否为空
              if (board[row][col] === '') {
                // 根据当前玩家设置该位置的值
                board[row][col] = currentPlayer;

                // 渲染棋盘
                renderBoard();

                // 切换玩家
                currentPlayer = currentPlayer === 'X' ? 'O' : 'X';

                // 检查游戏是否结束
                checkGameOver();
              }
            });

            boardElement.appendChild(cell);
          }
        }
      }

      // 当前玩家
      let currentPlayer = 'X';

      // 游戏是否结束的标志
      let gameOver = false;

      // 检查游戏是否结束
      function checkGameOver() {
        // 检查行
        for (let row = 0; row < board.length; row++) {
          if (
            board[row][0] !== '' &&
            board[row][0] === board[row][1] &&
            board[row][0] === board[row][2]
          ) {
            gameOver = true;
            alert(`玩家 ${board[row][0]} 赢了！`);
            resetBoard();
            return;
          }
        }

        // 检查列
        for (let col = 0; col < board[0].length; col++) {
          if (
            board[0][col] !== '' &&
            board[0][col] === board[1][col] &&
            board[0][col] === board[2][col]
          ) {
            gameOver = true;
            alert(`玩家 ${board[0][col]} 赢了！`);
            resetBoard();
            return;
          }
        }

        // 检查对角线
        if (
          board[0][0] !== '' &&
          board[0][0] === board[1][1] &&
          board[0][0] === board[2][2]
        ) {
          gameOver = true;
          alert(`玩家 ${board[0][0]} 赢了！`);
          resetBoard();
          return;
        }

        if (
          board[0][2] !== '' &&
          board[0][2] === board[1][1] &&
          board[0][2] === board[2][0]
        ) {
          gameOver = true;
          alert(`玩家 ${board[0][2]} 赢了！`);
          resetBoard();
          return;
        }

        // 检查平局
        if (!gameOver) {
          let isDraw = true;
          for (let row = 0; row < board.length; row++) {
            for (let col = 0; col < board[row].length; col++) {
              if (board[row][col] === '') {
                isDraw = false;
                break;
              }
            }
            if (!isDraw) {
              break;
            }
          }

          if (isDraw) {
            gameOver = true;
            alert('平局！');
            resetBoard();
          }
        }
      }

      // 重置棋盘和游戏状态
      function resetBoard() {
        board.forEach(row => {
          row.fill('');
        });
        currentPlayer = 'X';
        gameOver = false;
        renderBoard();
      }

      // 初始化棋盘
      renderBoard();
    </script>
  </body>
</html>