Web实现井字棋游戏：JavaScript DOM基础与实例教程

最新推荐文章于 2026-06-22 22:05:57 发布

原创

最新推荐文章于 2026-06-22 22:05:57 发布 · 1.3k 阅读

标签

#前端 #游戏 #javascript

本文详细介绍了如何使用JavaScript和DOMAPI实现一个简单的井字棋游戏，包括HTML结构创建、JavaScript逻辑编写、事件绑定、游戏状态管理、电脑AI移动和渲染棋盘。适合初学者学习DOM操作和实战项目应用。

🌟 前言

欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍

🤖 洛可可白：个人主页

🔥 个人专栏：✅前端技术 ✅后端技术

🏠 个人博客：洛可可白博客

🐱 代码获取：bestwishes0203

📷 封面壁纸：洛可可白wallpaper

在这里插入图片描述

文章目录

Web实现井字棋游戏：JavaScript DOM基础与实例教程

Web实现井字棋游戏：JavaScript DOM基础与实例教程

井字棋（Tic-Tac-Toe）是一款经典的两人对战游戏，适合作为学习JavaScript DOM操作的实践项目。本文将通过一个简单的实例，介绍如何使用JavaScript和DOM API来实现一个井字棋游戏，并讲解相关的JavaScript DOM基础知识。

JavaScript DOM基础

DOM（Document Object Model）是HTML和XML文档的编程接口。在JavaScript中，DOM提供了一种结构化的方式来表示和操作网页内容。通过DOM，我们可以获取元素、修改样式、绑定事件等。

实例：井字棋游戏

实现效果

体验地址：
http://8.210.131.139/Tictactoe.html

创建HTML结构

首先，我们需要创建一个包含游戏板和结果显示的HTML结构。

<div class="board">
  <!-- 游戏格子 -->
  <div class="cell"></div>
  <!-- ... 其他格子 ... -->
</div>
<div id="result"></div>

编写JavaScript逻辑

初始化游戏

在JavaScript中，我们首先定义游戏板的状态、玩家当前回合以及游戏是否结束的状态。

const board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let gameEnded = false;

事件绑定

为每个游戏格子绑定点击事件，以便在玩家点击时更新游戏状态。

const cells = document.querySelectorAll(".cell");
cells.forEach((cell, index) => {
   
   
  cell.addEventListener("click", () => updateGameState(index));
});

更新游戏状态

定义updateGameState函数来处理玩家的每一步操作，包括更新棋盘状态、检查胜利条件、切换玩家回合以及在适当的时候结束游戏。

// ... 更新棋盘逻辑 ...
    function updateGameState(cellIndex) {
   
   
      if (!gameEnded && board[cellIndex] === "") {
   
   
        board[cellIndex] = currentPlayer;
        renderBoard();
        if (checkWin(currentPlayer)) {
   
   
          endGame("Player " + currentPlayer + " wins!");
        } else if (checkDraw()) {
   
   
          endGame("It's a draw!");
        } else {
   
   
          currentPlayer = currentPlayer === "X" ? "O" : "X";
          if (currentPlayer === "O") {
   
   
            setTimeout(makeComputerMove, 500);
          }
        }
      }
    }

检查胜利条件和平局

在每一步操作后，使用checkWin和checkDraw函数来检查是否有玩家获胜或游戏是否平局。

// ... 检查胜利逻辑 ...
    function checkWin(player) {
   
   
      const winningCombinations = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2