使用JavaScript构建交互式井字棋游戏：点击、切换与重置-html教程-PHP中文网

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

碧海醫心

发布： 2025-12-09 13:27:13

原创

614人浏览过

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

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

构建井字棋游戏基础结构

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

<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">重置游戏</button>
  </div>
</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";
            }
        });
    });

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

登录后复制

实现游戏重置功能

为了让玩家能够重新开始游戏，我们需要一个重置按钮。当点击这个按钮时，所有棋盘方格的内容都应该被清空。

LobeHub

LobeChat brings you the best user experience of ChatGPT, OLLaMA, Gemini, Claude

302

查看详情

获取重置按钮元素： 使用document.querySelector('#reset-btn')获取重置按钮。
添加点击事件监听器： 为重置按钮添加一个click事件监听器。
清空所有方格： 在重置按钮的点击回调函数中，再次获取所有方格元素，并遍历它们，将每个方格的innerHTML设置为空字符串。

将重置逻辑添加到window.onload函数中，与游戏核心逻辑一起初始化：

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";
            }
        });
    });

    // 为重置按钮添加事件监听器
    document.querySelector('#reset-btn').addEventListener('click', () => {
        squares.forEach(square => {
            square.innerHTML = ""; // 清空所有方格内容
        });
        currentPlayer = "X"; // 重置当前玩家为X
    });
};

登录后复制

完整代码示例

将HTML、CSS和JavaScript代码整合，即可得到一个功能完整的井字棋游戏。

HTML (index.html):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 井字棋</title>
    <link rel="stylesheet" href="style.css">
</head>
<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">重置游戏</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

登录后复制

CSS (style.css):

body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

#board {
  margin: 20px auto;
  width: 50%;
  max-width: 300px;
  border: 1px solid #ccc;
  background-color: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.square {
  border: 1px solid #ddd;
  padding: 1rem;
  cursor: pointer;
  text-align: center;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em; /* 增大字体 */
  font-weight: bold;
  color: #333;
  transition: background-color 0.2s ease;
}

.square:hover {
  background-color: #e9e9e9;
}

#reset-btn {
  display: block;
  margin: 20px auto;
  padding: 10px 25px;
  font-size: 1.1em;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  transition: background-color 0.2s ease;
}

#reset-btn:hover {
  background-color: #0056b3;
}

登录后复制

JavaScript (script.js):

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";
            }
        });
    });

    // 为重置按钮添加事件监听器
    document.querySelector('#reset-btn').addEventListener('click', () => {
        squares.forEach(square => {
            square.innerHTML = ""; // 清空所有方格内容
        });
        currentPlayer = "X"; // 重置当前玩家为X
    });
};

登录后复制

注意事项与总结

DOM操作效率： 在这个简单的井字棋游戏中，直接操作innerHTML是可行的。但在更复杂的应用中，频繁的DOM操作可能影响性能。可以考虑使用虚拟DOM库（如React, Vue）或更优化的DOM更新策略。
游戏胜利判断： 当前教程仅实现了点击、切换玩家和重置功能。一个完整的井字棋游戏还需要添加逻辑来判断何时出现三连珠（水平、垂直或对角线），以及游戏是否平局。这通常涉及在每次标记放置后检查棋盘状态。
状态管理： currentPlayer变量是游戏状态管理的一个简单示例。在大型应用中，更复杂的全局状态管理模式（如Redux、Vuex）会更有用。
用户体验： 可以进一步增强用户体验，例如在游戏结束时显示胜利者信息，或者禁用已填满的方格。

通过本教程，您应该已经掌握了使用JavaScript实现井字棋游戏基础交互的核心方法。在此基础上，您可以继续扩展功能，例如添加胜利判断逻辑、游戏历史记录等，以构建更完善的游戏体验。

以上就是使用JavaScript构建交互式井字棋游戏：点击、切换与重置的详细内容，更多请关注php中文网其它相关文章！