XO 游戏：JavaScript 实现实战

大家好，欢迎来到IT知识分享网。

本文还有配套的精品资源，点击获取

简介：XO 游戏，又称井字游戏，是一款经典的二人对弈游戏。本教程将指导你使用 JavaScript 实现 XO 游戏，涵盖 HTML 结构、CSS 样式、JavaScript 基础、事件监听、游戏逻辑、用户交互、轮换玩家和重置游戏等关键步骤。通过这个项目，你可以提升对 DOM 操作、事件处理、数组操作和逻辑控制的理解，这些都是 JavaScript 开发中的基本技能。

1. XO:X 和 O 的游戏简介

XO:X 和 O 是一个经典的两人对战游戏，玩家轮流在 3×3 棋盘上放置自己的符号（X 或 O），目标是让自己的符号在水平、垂直或对角线方向上连成三行。这个游戏简单易学，但具有挑战性和娱乐性，适合各个年龄段的人玩。

2.1 HTML 结构设计

2.1.1 创建游戏棋盘

游戏棋盘由一个 HTML 表格元素组成，如下所示：

<table> <tbody> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> 

表格包含 3 行和 3 列，代表游戏棋盘的 9 个单元格。

2.1.2 定义游戏单元格

每个单元格由一个 HTML 单元格元素（ <td> ）表示，如下所示：

<td> <div class="cell"></div> </td> 

单元格内部包含一个 div 元素，用于应用 CSS 样式。

2.2 CSS 样式设计

2.2.1 设置棋盘和单元格样式

棋盘和单元格的样式通过 CSS 定义，如下所示：

table { width: 300px; height: 300px; border: 1px solid black; border-collapse: collapse; } td { width: 100px; height: 100px; border: 1px solid black; } .cell { width: 100%; height: 100%; background-color: white; } 

2.2.2 设置玩家符号样式

玩家符号的样式也通过 CSS 定义，如下所示：

.player-x { color: red; font-size: 50px; } .player-o { color: blue; font-size: 50px; } 

2.3 JavaScript 基础

2.3.1 变量和数据类型

JavaScript 变量用于存储数据，数据类型定义了变量中存储的数据类型。XO:X 和 O 游戏中使用的主要数据类型包括：

• 字符串（ string ）：表示文本数据，如玩家符号（”X” 或 “O”）。
• 布尔值（ boolean ）：表示真假值，如玩家轮换（ true 或 false ）。
• 数组（ array ）：表示有序的数据集合，如棋盘上的单元格。

2.3.2 运算符和控制流

运算符用于执行数学和逻辑操作，而控制流用于控制程序执行的顺序。XO:X 和 O 游戏中使用的主要运算符和控制流结构包括：

• 赋值运算符（ = ）：将值分配给变量。
• 比较运算符（ == , != , > , < , >= , <= ）：比较两个值。
• 逻辑运算符（ && , || , ! ）：组合布尔值。
• 条件语句（ if , else ）：根据条件执行不同的代码块。
• 循环语句（ for , while ）：重复执行代码块。

3. 事件监听实现

事件监听是 Web 开发中至关重要的概念，它允许我们响应用户与网页元素的交互。在 XO:X 和 O 游戏中，事件监听用于跟踪单元格点击和玩家轮换，从而实现游戏逻辑。

3.1 单元格点击事件

单元格点击事件是游戏玩法的核心。当玩家点击棋盘上的单元格时，我们需要监听此事件并相应地处理它。

3.1.1 监听单元格点击

为了监听单元格点击事件，我们需要使用 JavaScript 的 addEventListener() 方法。该方法接受两个参数：事件类型（在本例中为 click ）和事件处理程序（一个函数）。

const cells = document.querySelectorAll('.cell'); cells.forEach((cell) => { cell.addEventListener('click', handleCellClick); }); 

3.1.2 处理单元格点击

在 handleCellClick 函数中，我们需要执行以下步骤：

1. 获取点击的单元格。
2. 检查该单元格是否已被标记。
3. 如果单元格未被标记，则将其标记为当前玩家的符号。
4. 更新游戏状态，包括玩家轮换和胜利条件。

function handleCellClick(event) { const cell = event.target; if (!cell.classList.contains('marked')) { cell.classList.add('marked'); cell.textContent = currentPlayer; updateGameState(); } } 

3.2 玩家轮换事件

玩家轮换事件用于跟踪当前玩家。当玩家点击单元格时，我们需要监听玩家轮换事件并相应地处理它。

3.2.1 监听玩家轮换

为了监听玩家轮换事件，我们需要使用 JavaScript 的 addEventListener() 方法。该方法接受两个参数：事件类型（在本例中为 currentPlayerChanged ）和事件处理程序（一个函数）。

document.addEventListener('currentPlayerChanged', handlePlayerChange); 

3.2.2 处理玩家轮换

在 handlePlayerChange 函数中，我们需要执行以下步骤：

1. 获取当前玩家。
2. 切换当前玩家。
3. 更新用户界面，包括玩家符号和轮换指示器。

function handlePlayerChange() { currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; updatePlayerUI(); } 

4.1 胜利条件判断

在 XO:X 和 O 的游戏中，胜利条件是当一方玩家在棋盘上形成一条连续的相同符号（X 或 O）时，无论是水平、垂直还是对角线。本节将详细介绍如何判断胜利条件。

4.1.1 水平胜利条件

水平胜利条件是指玩家在棋盘上形成一条连续的水平线，其中所有单元格都包含相同的符号。为了判断水平胜利条件，我们需要遍历棋盘的每一行，并检查每一行中相邻单元格的符号是否相同。

// 检查水平胜利条件 function checkHorizontalWin() { for (let i = 0; i < 3; i++) { let symbol = board[i][0]; if (symbol !== "") { let count = 1; for (let j = 1; j < 3; j++) { if (board[i][j] === symbol) { count++; } else { break; } } if (count === 3) { return symbol; } } } return false; } 

代码逻辑逐行解读：

• 外层循环遍历棋盘的每一行（ i ）。
• 内层循环遍历每一行的相邻单元格（ j ）。
• 如果当前单元格不为空（ symbol !== "" ），则将它作为参考符号。
• 计数器 count 初始化为 1，表示参考符号的出现次数。
• 如果相邻单元格包含相同的符号，则递增计数器。
• 如果计数器达到 3，则表示在当前行中形成了水平胜利条件，返回参考符号。
• 如果遍历完所有行都没有找到水平胜利条件，则返回 false 。

4.1.2 垂直胜利条件

垂直胜利条件是指玩家在棋盘上形成一条连续的垂直线，其中所有单元格都包含相同的符号。为了判断垂直胜利条件，我们需要遍历棋盘的每一列，并检查每一列中相邻单元格的符号是否相同。

// 检查垂直胜利条件 function checkVerticalWin() { for (let j = 0; j < 3; j++) { let symbol = board[0][j]; if (symbol !== "") { let count = 1; for (let i = 1; i < 3; i++) { if (board[i][j] === symbol) { count++; } else { break; } } if (count === 3) { return symbol; } } } return false; } 

代码逻辑逐行解读：

• 外层循环遍历棋盘的每一列（ j ）。
• 内层循环遍历每一列的相邻单元格（ i ）。
• 如果当前单元格不为空（ symbol !== "" ），则将它作为参考符号。
• 计数器 count 初始化为 1，表示参考符号的出现次数。
• 如果相邻单元格包含相同的符号，则递增计数器。
• 如果计数器达到 3，则表示在当前列中形成了垂直胜利条件，返回参考符号。
• 如果遍历完所有列都没有找到垂直胜利条件，则返回 false 。

4.1.3 对角线胜利条件

对角线胜利条件是指玩家在棋盘上形成一条连续的对角线，其中所有单元格都包含相同的符号。为了判断对角线胜利条件，我们需要遍历棋盘的对角线，并检查对角线上的相邻单元格的符号是否相同。

// 检查对角线胜利条件 function checkDiagonalWin() { // 检查主对角线 let symbol = board[0][0]; if (symbol !== "") { let count = 1; for (let i = 1; i < 3; i++) { if (board[i][i] === symbol) { count++; } else { break; } } if (count === 3) { return symbol; } } // 检查副对角线 symbol = board[0][2]; if (symbol !== "") { let count = 1; for (let i = 1; i < 3; i++) { if (board[i][2 - i] === symbol) { count++; } else { break; } } if (count === 3) { return symbol; } } return false; } 

代码逻辑逐行解读：

• 检查主对角线：
  • 将左上角单元格的符号作为参考符号。
  • 计数器 count 初始化为 1，表示参考符号的出现次数。
  • 遍历对角线上的相邻单元格，检查符号是否相同。
  • 如果计数器达到 3，则表示在主对角线上形成了胜利条件，返回参考符号。
• 检查副对角线：
  • 将右上角单元格的符号作为参考符号。
  • 计数器 count 初始化为 1，表示参考符号的出现次数。
  • 遍历对角线上的相邻单元格，检查符号是否相同。
  • 如果计数器达到 3，则表示在副对角线上形成了胜利条件，返回参考符号。
• 如果遍历完所有对角线都没有找到胜利条件，则返回 false 。

5. 用户交互实现

5.1 玩家符号选择

5.1.1 允许玩家选择符号

为了让玩家选择自己的符号，需要在游戏中添加一个用户界面元素。可以使用 HTML <select> 元素创建一个下拉列表，其中包含玩家可以选择的符号选项。

<select id="player-symbol"> <option value="X">X</option> <option value="O">O</option> </select> 

当玩家从下拉列表中选择一个符号时，可以使用 JavaScript 事件监听器来捕获该事件。

const playerSymbolSelect = document.getElementById("player-symbol"); playerSymbolSelect.addEventListener("change", (event) => { // 存储玩家选择的符号 playerSymbol = event.target.value; }); 

5.1.2 存储玩家符号

选择符号后，需要将玩家选择的符号存储在变量中。可以使用 JavaScript 变量来存储符号。

let playerSymbol; 

当玩家从下拉列表中选择符号时，将所选符号的值分配给 playerSymbol 变量。

playerSymbol = event.target.value; 

5.2 游戏重置

5.2.1 清空棋盘

当游戏结束或玩家想要重新开始时，需要重置棋盘。可以遍历棋盘中的所有单元格并清除其内容。

for (let i = 0; i < boardSize; i++) { for (let j = 0; j < boardSize; j++) { board[i][j] = ""; } } 

5.2.2 重置玩家轮换

重置游戏时，还需要重置玩家轮换。可以将当前玩家设置为第一个玩家。

currentPlayer = 1; 

本文还有配套的精品资源，点击获取

简介：XO 游戏，又称井字游戏，是一款经典的二人对弈游戏。本教程将指导你使用 JavaScript 实现 XO 游戏，涵盖 HTML 结构、CSS 样式、JavaScript 基础、事件监听、游戏逻辑、用户交互、轮换玩家和重置游戏等关键步骤。通过这个项目，你可以提升对 DOM 操作、事件处理、数组操作和逻辑控制的理解，这些都是 JavaScript 开发中的基本技能。

本文还有配套的精品资源，点击获取