使用JavaScript实现交互式井字棋游戏：点击落子与玩家切换-html教程-PHP中文网

使用JavaScript实现交互式井字棋游戏：点击落子与玩家切换

花韻仙語

发布： 2025-12-08 15:32:56

原创

603人浏览过

使用javascript实现交互式井字棋游戏：点击落子与玩家切换

本教程详细指导如何使用JavaScript实现一个交互式井字棋游戏。文章将介绍如何通过遍历棋盘方格并为每个方格添加点击事件监听器来响应用户操作，实现玩家（X和O）轮流落子，并提供重置游戏的功能。

引言：构建交互式井字棋基础

开发一个交互式的井字棋游戏是学习前端JavaScript事件处理和DOM操作的绝佳实践。本教程将引导您完成从HTML结构搭建到JavaScript逻辑实现的全过程，包括如何响应用户点击、切换玩家标记（X或O）以及重置游戏。

核心交互逻辑：处理棋盘点击与落子

要实现井字棋的交互功能，首先需要能够识别用户点击了哪个棋盘方格，并在该方格中显示当前玩家的标记。

获取棋盘方格并添加事件监听器

在JavaScript中，当需要对多个DOM元素应用相同的行为时，document.querySelectorAll() 方法非常有用。它会返回一个包含所有匹配元素的NodeList集合。由于addEventListener方法只能直接作用于单个DOM元素，因此我们需要遍历这个NodeList，为每个方格单独添加点击事件监听器。

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

window.onload = () => {
    const squares = document.querySelectorAll(".square"); // 获取所有带有.square类的元素
    let currentPlayer = "X"; // 初始化当前玩家为'X'

    squares.forEach(square => { // 遍历每个方格
        square.addEventListener("click", () => {
            // 在这里处理点击逻辑
        });
    });
};

登录后复制

实现落子与玩家回合切换

在点击事件监听器内部，我们需要执行以下操作：

检查方格是否为空：只有当方格当前没有标记（即innerHTML为空）时，才允许落子。这可以防止玩家覆盖已有的标记。
显示当前玩家标记：将currentPlayer的值赋给被点击方格的innerHTML。
切换玩家：落子完成后，需要将currentPlayer从'X'切换到'O'，或从'O'切换到'X'，为下一个回合做准备。这可以通过一个简单的三元运算符实现。

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

    squares.forEach(square => {
        square.addEventListener("click", () => {
            if (square.innerHTML === "") { // 检查方格是否为空
                square.innerHTML = currentPlayer; // 落子
                // 切换玩家
                currentPlayer = currentPlayer === "X" ? "O" : "X"; 
            }
        });
    });
};

登录后复制

重置游戏功能

为了让游戏能够反复进行，我们需要一个重置按钮来清空棋盘。

为重置按钮添加事件监听器

首先，在HTML中创建一个按钮，例如。然后，在JavaScript中获取这个按钮元素，并为其添加一个点击事件监听器。

白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

162

查看详情

在重置按钮的点击事件处理函数中，我们需要再次遍历所有的棋盘方格，并将它们的innerHTML设置为空字符串，从而清除所有标记。

// ...（接上面的window.onload函数外部或内部，确保reset-btn在DOM中已存在）

document.querySelector('#reset-btn').addEventListener('click', () => {
    document.querySelectorAll('.square').forEach(square => {
        square.innerHTML = ""; // 清空所有方格内容
    });
    // 可以在这里重置 currentPlayer 为 "X" 以确保游戏从X开始
    // currentPlayer = "X"; 
});

登录后复制

注意：如果currentPlayer变量是在window.onload内部定义的，那么在重置按钮的事件监听器中直接访问它可能会遇到作用域问题。一种解决方案是将currentPlayer定义在更广的作用域，或者在重置时重新加载游戏状态。为了简洁，上述代码未包含重置currentPlayer的逻辑，实际应用中应考虑。

完整的HTML结构

以下是井字棋游戏所需的HTML骨架，包括棋盘和重置按钮。棋盘由一个ID为board的div容器组成，内部包含三行，每行有三个square方格。

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

登录后复制

基本CSS样式

为了让棋盘在浏览器中正确显示并具备基本的交互视觉效果，我们需要一些CSS样式。这些样式定义了棋盘的布局、方格的边框、大小以及鼠标悬停效果。

#board {
  margin: 0 auto; /* 居中显示 */
  width: 50%; /* 棋盘宽度 */
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列布局 */
}

.square {
  border: 1px solid black; /* 方格边框 */
  padding: 1rem; /* 内边距 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  text-align: center; /* 文本居中 */
  aspect-ratio: 1/1; /* 保持正方形比例 */

  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: 3em; /* 标记字体大小 */
  font-family: 'Arial', sans-serif; /* 标记字体 */
}

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

登录后复制

注意：CSS样式仅用于美化和布局，与游戏逻辑本身无关。您可以根据自己的喜好调整这些样式。

注意事项与进阶思考

赢家判断逻辑：本教程主要关注点击落子和玩家切换，并未包含井字棋的赢家判断逻辑。在实际游戏中，您需要实现一个函数来检查每次落子后是否有玩家获胜（三子连珠）或游戏是否平局。
代码组织：随着游戏复杂度的增加，建议将JavaScript代码模块化，例如，将DOM操作、游戏逻辑和事件处理分离到不同的函数或模块中，以提高代码的可读性和可维护性。
错误处理与用户体验：可以添加更多视觉反馈，例如在游戏结束时显示胜利者信息，或者在无效操作时给出提示。