使用JavaScript构建交互式井字棋游戏：点击、切换与重置

admin 百科 2025-12-09 14

使用JavaScript构建交互式井字棋游戏：点击、切换与重置-第1张图片-佛山资讯网

本教程详细介绍了如何使用JavaScript实现井字棋（Tic-Tac-Toe）游戏的核心交互逻辑。我们将学习如何通过事件监听器处理用户点击，在棋盘方格中放置“X”或“O”标记，实现玩家轮流操作，并添加重置游戏的功能。文章将提供完整的HTML、CSS和JavaScript代码示例，帮助开发者构建一个功能完善且交互流畅的井字棋应用。

构建井字棋游戏基础结构

在开始JavaScript逻辑之前，我们需要一个基本的HTML结构来承载井字棋盘。这个结构将包含一个主容器、若干行以及每个方格的占位符，以及一个用于重置游戏的按钮。

<body>
  <p id="board">
    <p class="row">
      <p class="square"></p>
      <p class="square"></p>
      <p class="square"></p>
    </p>
    <p class="row">
      <p class="square"></p>
      <p class="square"></p>
      <p class="square"></p>
    </p>
    <p class="row">
      <p class="square"></p>
      <p class="square"></p>
      <p class="square"></p>
    </p>
    <button id="reset-btn">重置游戏</button>
  </p>
</body>

登录后复制

为了让棋盘看起来更像一个井字棋盘，并提供基本的交互视觉反馈，我们可以添加一些CSS样式。这些样式有助于布局、方格尺寸、边框以及鼠标悬停效果。

#board {
  margin: 20px auto; /* 居中显示 */
  width: 50%; /* 棋盘宽度 */
  max-width: 300px; /* 最大宽度限制 */
  border: 1px solid #ccc;
}

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽布局 */
}

.square {
  border: 1px solid black;
  padding: 1rem;
  cursor: pointer;
  text-align: center;
  aspect-ratio: 1/1; /* 保持方格宽高比为1:1 */

  display: flex; /* 使得X/O居中 */
  align-items: center;
  justify-content: center;
  font-size: 2em; /* 标记字体大小 */
  font-weight: bold;
}

.square:hover {
  background-color: #f0f0f0; /* 鼠标悬停背景色 */
}

#reset-btn {
  display: block;
  margin: 15px auto;
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
}

登录后复制

实现核心游戏逻辑：点击与玩家切换

井字棋的核心在于玩家点击方格后，显示相应的标记（X或O），并自动切换到下一位玩家。这需要JavaScript来监听点击事件并管理游戏状态。

立即学习“Java免费学习笔记（深入）”；

获取所有方格元素：document.querySelectorAll(".square") 方法会返回一个NodeList，其中包含所有具有square类的元素。由于NodeList不是一个普通的数组，我们不能直接在其上调用addEventListener来为所有元素添加监听器。因此，需要遍历这个NodeList。
初始化当前玩家： 使用一个变量（例如currentPlayer）来跟踪当前轮到哪位玩家。我们可以将其初始化为"X"。
为每个方格添加点击事件监听器： 通过forEach方法遍历NodeList中的每个方格。对每个方格，我们添加一个click事件监听器。
放置标记与切换玩家： 在点击事件的回调函数中，我们需要执行以下逻辑：
- 检查方格是否为空： 只有当方格当前没有标记时，才允许放置标记。这可以通过检查square.innerHTML是否为空字符串来实现。
- 放置标记： 如果方格为空，将currentPlayer的值赋给square.innerHTML，从而在方格中显示"X"或"O"。
- 切换玩家： 使用三元运算符简洁地切换currentPlayer的值。如果当前玩家是"X"，则切换为"O"；否则，切换为"X"。

以下是实现上述逻辑的JavaScript代码：

window.onload = () => {
    const squares = document.querySelectorAll(".square");
    let currentPlayer = "X"; // 初始玩家为X

    squares.forEach(square => {
        square.addEventListener("click", () => {
            // 只有当方格为空时才允许放置标记
            if (square.innerHTML === "") {
                square.innerHTML = currentPlayer; // 放置当前玩家的标记
                // 切换到下一位玩家
                currentPlayer = currentPlayer === "X" ? "O" : "X";
            }
        });
    });

    // 重置按钮的事件监听器将在下一节介绍
};

登录后复制