使用JavaScript构建互动式井字棋游戏：点击事件与游戏逻辑实现-html教程-PHP中文网

使用JavaScript构建互动式井字棋游戏：点击事件与游戏逻辑实现

霞舞

发布： 2025-12-03 13:56:17

原创

862人浏览过

使用JavaScript构建互动式井字棋游戏：点击事件与游戏逻辑实现

本教程将指导您如何使用javascript、html和css构建一个互动式井字棋游戏。我们将详细讲解如何通过监听dom元素的点击事件来放置玩家标记（'x'或'o'），如何管理当前玩家状态以实现轮流出子，以及如何实现游戏重置功能。通过具体代码示例，您将学会构建一个功能完善、用户友好的井字棋应用。

井字棋（Tic-Tac-Toe）是一个经典的两人对弈游戏，常被用作前端交互开发的入门项目。本教程将引导您使用纯粹的JavaScript、HTML和CSS从零开始构建一个互动式的井字棋游戏，重点讲解如何处理用户点击事件、实现玩家轮流出子以及游戏重置功能。

1. HTML 结构：构建游戏棋盘

首先，我们需要为井字棋游戏创建一个基本的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>

登录后复制

结构说明：

#board 作为整个棋盘的容器。
.row 用于组织每行三个方格。
.square 代表棋盘上的每个可点击方格。
#reset-btn 用于清除棋盘并重新开始游戏。

2. CSS 样式：美化棋盘外观

为了让棋盘在浏览器中正确显示并具有良好的用户体验，我们需要添加一些CSS样式。这包括设置棋盘布局、方格大小、边框以及鼠标悬停效果。

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

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

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建3列等宽网格 */
}

.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; /* 增加标记字体大小 */
  font-weight: bold;
}

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

#reset-btn {
    display: block; /* 使按钮独占一行 */
    margin: 20px auto 0; /* 按钮居中，上方留白 */
    padding: 10px 20px;
    font-size: 1.2em;
    cursor: pointer;
}

登录后复制

样式说明：

display: grid 和 grid-template-columns: repeat(3, 1fr) 用于创建3x3的网格布局。
aspect-ratio: 1/1 确保每个方格都是正方形。
display: flex 结合 align-items 和 justify-content 可以使 'X' 和 'O' 在方格中居中显示。

3. JavaScript 核心逻辑：实现游戏交互

这是实现井字棋游戏功能的核心部分。我们将使用JavaScript来处理用户点击、切换玩家标记以及重置游戏状态。

Fotor AI Face Generator

Fotor 平台的在线 AI 头像生成器

查看详情

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

    // 初始化当前玩家为 'X'
    let currentPlayer = "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 = "";
        });
        // 重置当前玩家为 'X'，确保新游戏从 'X' 开始
        currentPlayer = "X";
    });
};

登录后复制

代码解析：

window.onload: 确保在DOM完全加载后执行JavaScript代码，避免因元素未加载而导致的错误。
document.querySelectorAll(".square"): 这个方法会返回一个NodeList（类似数组），其中包含了所有匹配 .square 选择器的DOM元素。由于 addEventListener 只能应用于单个DOM元素，因此我们需要遍历这个NodeList。
let currentPlayer = "X";: 初始化一个变量来跟踪当前应该落子的玩家，默认为 'X'。
squares.forEach(square => { ... });: 使用 forEach 循环遍历每一个方格，并为它们各自添加一个 click 事件监听器。
点击事件处理逻辑:
- if (square.innerHTML === ""): 这是一个关键的检查，确保玩家只能在空白的方格上落子，防止重复点击同一方格。
- square.innerHTML = currentPlayer;: 将当前玩家的标记（'X' 或 'O'）放置到被点击的方格中。
- currentPlayer = currentPlayer === "X" ? "O" : "X";: 使用三元运算符简洁地切换当前玩家。
重置功能: 当重置按钮被点击时，遍历所有方格并将其 innerHTML 清空，同时将 currentPlayer 重置回 'X'，使游戏回到初始状态。

4. 完整代码示例

为了方便测试，您可以将上述HTML、CSS和JavaScript代码整合到一个文件中（例如 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>
    <style>
        /* CSS样式代码 */
        #board {
          margin: 0 auto;
          width: 50%;
          max-width: 300px;
        }

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

          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2em;
          font-weight: bold;
        }

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

        #reset-btn {
            display: block;
            margin: 20px auto 0;
            padding: 10px 20px;
            font-size: 1.2em;
            cursor: pointer;
        }
    </style>
</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>
        // JavaScript代码
        window.onload = () => {
            const squares = document.querySelectorAll(".square");
            const resetButton = document.querySelector('#reset-btn');

            let currentPlayer = "X";

            squares.forEach(square => {
                square.addEventListener("click", () => {
                    if (square.innerHTML === "") {
                        square.innerHTML = currentPlayer;
                        currentPlayer = currentPlayer === "X" ? "O" : "X";
                    }
                });
            });

            resetButton.addEventListener('click', () => {
                squares.forEach(square => {
                    square.innerHTML = "";
                });
                currentPlayer = "X"; // 重置当前玩家
            });
        };
    </script>
</body>
</html>

登录后复制