九耶丨阁瑞钛伦特-井字棋html5代码

最新推荐文章于 2024-07-14 14:30:45 发布

九耶（钛伦特）

最新推荐文章于 2024-07-14 14:30:45 发布

阅读量562

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_69234258/article/details/132270307

版权

你想了解关于井字棋（Tic-Tac-Toe）的HTML代码吗？以下是一个简单的井子棋的HTML代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>Tic-Tac-Toe</title>
  <style>
    .board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
    }
    .cell {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 48px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="board">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>

  <script>
    const cells = document.querySelectorAll('.cell');
    let currentPlayer = 'X';

    function handleCellClick(e) {
      const cell = e.target;
      if (cell.textContent === '') {
        cell.textContent = currentPlayer;
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
      }
    }

    cells.forEach(cell => {
      cell.addEventListener('click', handleCellClick);
    });
  </script>
</body>
</html>

这段代码创建了一个3x3的井字棋盘，使用了HTML、CSS和JavaScript。每个格子都是一个 <div> 元素，点击格子时会在其内部显示当前玩家的标记（"X"或"O"）。以上代码只是一个基本示例，你可以根据需要进行扩展和美化。

九耶（钛伦特）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
九耶丨阁瑞钛伦特-井字棋html5代码

元素，点击格子时会在其内部显示当前玩家的标记（"X"或"O"）。以上代码只是一个基本示例，你可以根据需要进行扩展和美化。你想了解关于井字棋（Tic-Tac-Toe）的HTML代码吗？这段代码创建了一个3x3的井字棋盘，使用了HTML、CSS和JavaScript。
复制链接

扫一扫