JavaScript井字棋（Tic-Tac-Toe）核心交互逻辑实现教程-html教程-PHP中文网

JavaScript井字棋（Tic-Tac-Toe）核心交互逻辑实现教程

DDD

发布： 2025-12-01 13:03:06

原创

267人浏览过

JavaScript井字棋（Tic-Tac-Toe）核心交互逻辑实现教程

本教程详细介绍了如何使用javascript实现井字棋（tic-tac-toe）游戏的核心交互逻辑。内容涵盖了如何遍历并为棋盘上的每个方格添加点击事件监听器，实现玩家x和o的交替落子，以及重置游戏状态的功能。通过提供的html、css和javascript代码示例，读者可以快速理解并构建一个基础的井字棋游戏。

1. 概述与准备

井字棋（Tic-Tac-Toe）是一款经典的两人对弈游戏，其核心在于玩家交替在3x3的棋盘上放置自己的标志（“X”或“O”），并尝试使自己的三个标志连成一线。本教程将引导您使用纯JavaScript实现游戏的核心交互逻辑：点击棋盘方格放置“X”或“O”，实现玩家的交替，以及重置游戏功能。在开始编写JavaScript代码之前，我们需要搭建基本的HTML结构和一些CSS样式。

2. HTML结构

首先，创建一个包含井字棋盘的HTML文件。棋盘由一个主容器（#board）和九个代表棋盘格的div元素（.square）组成，这些方格通过.row容器进行分组。此外，我们还会添加一个重置按钮（#reset-btn），用于清空棋盘并重新开始游戏。

<body>
  <div id="board">
    <div class="row">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
    </div>
    <div class="row">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
    </div>
    <div class="row">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
    </div>
    <button id="reset-btn">RESET</button>
  </div>
</body>

登录后复制

3. CSS样式（可选）

为了使棋盘在浏览器中正确显示并具有基本的视觉效果，可以添加以下CSS样式。这些样式主要用于布局、方格尺寸、居中对齐以及提供基本的交互反馈（如鼠标悬停效果）。它们对于核心游戏逻辑并非必需，但在开发过程中能提供更好的视觉体验。

#board {
  margin: 0 auto; /* 棋盘居中 */
  width: 50%; /* 设置棋盘宽度 */
  max-width: 300px; /* 限制最大宽度 */
}

.row {
  display: grid; /* 使用CSS Grid布局 */
  grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
}

.square {
  border: 1px solid black; /* 方格边框 */
  padding: 1rem;
  cursor: pointer; /* 鼠标悬停显示手型 */
  text-align: center;
  aspect-ratio: 1/1; /* 保持方格宽高比为1:1 */

  display: flex; /* 内部内容居中 */
  align-items: center;
  justify-content: center;
  font-size: 2em; /* 使X/O字符更大 */
  font-weight: bold;
}

.square:hover {
  background-color: #CCCCCC; /* 鼠标悬停背景变灰 */
}

#reset-btn {
  display: block;
  margin: 1rem auto;
  padding: 0.5rem 1rem;
  font-size: 1em;
  cursor: pointer;
}

登录后复制

4. JavaScript核心逻辑实现

JavaScript部分是实现游戏交互的关键。我们需要处理以下几个方面：获取所有棋盘方格、管理当前玩家状态、为每个方格添加点击事件以实现落子，以及实现重置游戏的功能。

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

4.1 初始化与元素获取

在DOM（文档对象模型）完全加载完成后，执行JavaScript代码是最佳实践。这可以通过window.onload事件监听器来实现。在函数内部，我们使用document.querySelectorAll(".square")获取所有棋盘方格，它会返回一个NodeList集合。由于addEventListener方法只能应用于单个DOM节点，因此我们需要遍历这个NodeList。同时，获取重置按钮元素并初始化一个变量currentPlayer来跟踪当前轮到哪个玩家（"X"或"O"）。

Cowriter

AI 作家，帮助加速和激发你的创意写作

107

查看详情

window.onload = () => {
    const squares = document.querySelectorAll(".square"); // 获取所有棋盘方格
    const resetButton = document.querySelector('#reset-btn'); // 获取重置按钮

    let currentPlayer = "X"; // 初始化当前玩家为 "X"

    // ... 后续逻辑将在这里添加
};

登录后复制

4.2 玩家交替落子逻辑

通过forEach循环遍历squares NodeList中的每一个棋盘方格，并为它们各自添加一个点击事件监听器。在点击事件处理函数中，我们首先检查当前被点击的方格是否为空（即square.innerHTML === ""）。如果为空，则将currentPlayer的标志（"X"或"O"）放置到该方格中。随后，使用一个简单的三元运算符来切换currentPlayer的值，实现玩家的交替。

squares.forEach(square => {
    square.addEventListener("click", () => {
        if (square.innerHTML === "") { // 确保只在空方格落子
            square.innerHTML = currentPlayer; // 放置当前玩家的标志

            // 切换玩家：如果当前是"X"，则切换到"O"；否则切换到"X"
            currentPlayer = currentPlayer === "X" ? "O" : "X";
        }
    });
});

登录后复制

4.3 游戏重置功能

为重置按钮（resetButton）添加一个点击事件监听器。当按钮被点击时，我们需要遍历所有棋盘方格，并将它们的innerHTML属性设置为空字符串，从而清空棋盘上的所有“X”和“O”。同时，为了确保游戏从头开始，需要将currentPlayer重置回初始值“X”。

resetButton.addEventListener('click', () => {
    squares.forEach(square => {
        square.innerHTML = ""; // 清空所有方格内容
    });
    currentPlayer = "X"; // 重置游戏时，将当前玩家也重置为 "X"
});

登录后复制

5. 完整JavaScript代码示例

将上述所有JavaScript代码整合到一起，形成完整的脚本。您可以将这段代码放在HTML文件的<head>标签中，并用<script>标签包裹，或者作为外部.js文件引入。

window.onload = () => {
    const squares = document.querySelectorAll(".square"); // 获取所有棋盘方格
    const resetButton = document.querySelector('#reset-btn'); // 获取重置按钮

    let currentPlayer = "X"; // 初始化当前玩家为 "X"

    // 为每个棋盘方格添加点击事件监听器
    squares.forEach(square => {
        square.addEventListener("click", () => {
            if (square.innerHTML === "") { // 检查方格是否为空，防止重复落子
                square.innerHTML = currentPlayer; // 放置当前玩家的标志

                // 切换玩家：如果当前是"X"，则切换到"O"；否则切换到"X"
                currentPlayer = currentPlayer === "X" ? "O" : "X";
            }
        });
    });

    // 为重置按钮添加点击事件监听器
    resetButton.addEventListener('click', () => {
        squares.forEach(square => {
            square.innerHTML = ""; // 清空所有方格内容
        });
        currentPlayer = "X"; // 重置游戏时，将当前玩家也重置为 "X"
    });
};

登录后复制

6. 注意事项与进一步扩展

DOM加载时机： 确保JavaScript代码在HTML元素加载完成后执行。使用window.onload或将<script>标签放在<body>标签的末尾是确保DOM元素可用的常见且推荐的做法。
错误处理： 本教程已包含防止在已落子的方格上再次落子的逻辑 (if (square.innerHTML === ""))，这提高了游戏的健壮性。
胜利条件判断： 本教程主要侧重于实现基本的落子和重置功能，并未实现井字棋的胜利条件判断逻辑（即判断是否有玩家连成一线）。这是下一步可以扩展的重要功能，需要额外的逻辑来检查行、列和对角线上的标志是否一致。
平局检测： 在所有方格都被填满但没有玩家获胜时，游戏应宣告平局。这也可以作为胜利条件判断的补充。
更高级的状态管理： 对于更复杂的应用，可以将棋盘状态存储在一个JavaScript数组中（例如，['', '', '', '', '', '', '', '', '']），而不是直接操作DOM元素的innerHTML。这样可以使游戏逻辑与用户界面（UI）分离，更易于维护和扩展。

7. 总结

通过本教程，您已经学会了如何使用JavaScript实现井字棋游戏的基础交互功能，包括高效地为多个DOM元素添加事件监听器、管理游戏状态（当前玩家）、以及实现游戏重置。这是一个很好的起点，您可以基于此进一步开发，例如添加胜利条件判断、平局检测、记录得分以及更丰富的用户界面和动画效果，从而构建一个功能更完善的井字棋游戏。

以上就是JavaScript井字棋（Tic-Tac-Toe）核心交互逻辑实现教程的详细内容，更多请关注php中文网其它相关文章！