使用 jQuery 创建井字游戏(1)

📌 相关文章

📜 使用 jQuery 创建井字游戏(1)

📅 最后修改于: 2023-12-03 15:06:47.938000 🧑 作者: Mango

使用 jQuery 创建井字游戏

井字游戏是一种简单而又有趣的游戏，适合用于练习编程。在本篇文章中，我们将使用 jQuery 和 HTML/CSS 来创建一个井字游戏，帮助程序员了解如何使用 jQuery 开发简单小游戏。

准备工作

在开始创建井字游戏之前，我们需要准备一些资源。首先是 HTML 和 CSS，它们将用于游戏的布局和样式。下面是一个基本的 HTML 模板：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>井字游戏</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="board">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

在这个模板中，我们定义了一个 <div class="board">，它包含了 9 个 <div class="cell">。在 CSS 文件中，我们可以使用布局和样式来美化游戏。

接下来，我们需要编写 JavaScript 代码，在页面上实现游戏的逻辑。下面是一个简单的 JavaScript 代码结构：

$(document).ready(function() {
  // 代码放在这里
});

$(document).ready 的作用是在页面完全加载后运行代码。

游戏逻辑

现在，我们需要实现游戏的逻辑。首先，我们需要定义一个变量来跟踪玩家当前的回合：

var currentPlayer = 'X';

这个变量将在游戏开始时初始化为 “X”，每当一个玩家完成一回合时，它的值将相应地改变。

接下来，我们需要为每个单元格添加一个点击事件，当玩家点击单元格时，将会触发事件，游戏逻辑将会开始。

$('.cell').on('click', function() {
  // 代码放在这里
});

在这里，我们使用了 jQuery 选择器来选择游戏板中的所有单元格，并将点击事件添加到它们的 DOM 元素中。

当一个单元格被点击时，我们需要检测当前玩家的回合，并将相应的 “X” 或“O” 按钮添加到单元格中。

$(this).text(currentPlayer);

接下来，我们需要检查游戏是否结束。当一个玩家占据了一行、一列或一条斜线时，游戏将结束。

首先，我们需要定义一些变量来跟踪玩家放置的标记。

var cells = $('.cell');
var cell0 = cells.eq(0), cell1 = cells.eq(1), cell2 = cells.eq(2),
    cell3 = cells.eq(3), cell4 = cells.eq(4), cell5 = cells.eq(5),
    cell6 = cells.eq(6), cell7 = cells.eq(7), cell8 = cells.eq(8);

现在，我们将检查玩家是否占据了行。

if (cell0.text() === currentPlayer && cell1.text() === currentPlayer && cell2.text() === currentPlayer) {
  alert(currentPlayer + ' 获胜！');
} else if (cell3.text() === currentPlayer && cell4.text() === currentPlayer && cell5.text() === currentPlayer) {
  alert(currentPlayer + ' 获胜！');
} else if (cell6.text() === currentPlayer && cell7.text() === currentPlayer && cell8.text() === currentPlayer) {
  alert(currentPlayer + ' 获胜！');
}

我们将检查单元格 0、1、2 是否都被占据，单元格 3、4、5 是否都被占据，以及单元格 6、7、8 是否都被占据。如果有一行被占据了，当前玩家将赢得游戏。

接下来，我们将检查玩家是否占据了列。

else if (cell0.text() === currentPlayer && cell3.text() === currentPlayer && cell6.text() === currentPlayer) {
  alert(currentPlayer + ' 获胜！');
} else if (cell1.text() === currentPlayer && cell4.text() === currentPlayer && cell7.text() === currentPlayer) {
  alert(currentPlayer + ' 获胜！');
} else if (cell2.text() === currentPlayer && cell5.text() === currentPlayer && cell8.text() === currentPlayer) {
  alert(currentPlayer + ' 获胜！');
}

我们将检查单元格 0、3、6 是否都被占据，单元格 1、4、7 是否都被占据，以及单元格 2、5、8 是否都被占据。如果有一列被占据了，当前玩家将赢得游戏。

最后，我们将检查玩家是否占据了对角线。

else if (cell0.text() === currentPlayer && cell4.text() === currentPlayer && cell8.text() === currentPlayer) {
  alert(currentPlayer + ' 获胜！');
} else if (cell2.text() === currentPlayer && cell4.text() === currentPlayer && cell6.text() === currentPlayer) {
  alert(currentPlayer + ' 获胜！');
}

我们将检查单元格 0、4、8 是否都被占据，以及单元格 2、4、6 是否都被占据。如果有一条对角线被占据了，当前玩家将赢得游戏。

如果当前玩家没有获胜，我们需要改变回合。

if (currentPlayer === 'X') {
  currentPlayer = 'O';
} else {
  currentPlayer = 'X';
}

完整代码

下面是一个完整的代码示例：

$(document).ready(function() {
  var currentPlayer = 'X';
  var cells = $('.cell');
  var cell0 = cells.eq(0), cell1 = cells.eq(1), cell2 = cells.eq(2),
      cell3 = cells.eq(3), cell4 = cells.eq(4), cell5 = cells.eq(5),
      cell6 = cells.eq(6), cell7 = cells.eq(7), cell8 = cells.eq(8);
  
  $('.cell').on('click', function() {
    $(this).text(currentPlayer);
    if (cell0.text() === currentPlayer && cell1.text() === currentPlayer && cell2.text() === currentPlayer) {
      alert(currentPlayer + ' 获胜！');
    } else if (cell3.text() === currentPlayer && cell4.text() === currentPlayer && cell5.text() === currentPlayer) {
      alert(currentPlayer + ' 获胜！');
    } else if (cell6.text() === currentPlayer && cell7.text() === currentPlayer && cell8.text() === currentPlayer) {
      alert(currentPlayer + ' 获胜！');
    } else if (cell0.text() === currentPlayer && cell3.text() === currentPlayer && cell6.text() === currentPlayer) {
      alert(currentPlayer + ' 获胜！');
    } else if (cell1.text() === currentPlayer && cell4.text() === currentPlayer && cell7.text() === currentPlayer) {
      alert(currentPlayer + ' 获胜！');
    } else if (cell2.text() === currentPlayer && cell5.text() === currentPlayer && cell8.text() === currentPlayer) {
      alert(currentPlayer + ' 获胜！');
    } else if (cell0.text() === currentPlayer && cell4.text() === currentPlayer && cell8.text() === currentPlayer) {
      alert(currentPlayer + ' 获胜！');
    } else if (cell2.text() === currentPlayer && cell4.text() === currentPlayer && cell6.text() === currentPlayer) {
      alert(currentPlayer + ' 获胜！');
    }
    if (currentPlayer === 'X') {
      currentPlayer = 'O';
    } else {
      currentPlayer = 'X';
    }
  });
});

总结

在本文中，我们学习了如何使用 jQuery 和 HTML/CSS 来创建一个简单的井字游戏。我们使用了 jQuery 选择器来选择游戏板中的单元格，并使用 jQuery 事件处理程序添加了点击事件。我们还编写了 JavaScript 代码来检查游戏是否结束，并在必要时改变玩家的回合。

在之后的开发过程中，你可以在这个模板上进行更改和完善，添加更多功能和交互，并创造出更多好玩的游戏。