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

📌 相关文章

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

📅 最后修改于: 2023-12-03 14:49:48.769000 🧑 作者: Mango

使用jQuery创建井字游戏

本文将介绍使用jQuery创建井字游戏的方法，通过该游戏，您将能够学习到如何使用jQuery处理常见的DOM操作、事件处理和CSS样式的修改，希望对您的学习和开发有所帮助。

项目结构

为了方便开发和维护，我们需要对项目进行结构化的设计，下面是本项目的目录结构。

- index.html // 游戏界面
- css
  - style.css // 样式文件
- js
  - jquery.min.js // jQuery库
  - game.js // 游戏逻辑代码

游戏界面

首先，我们需要设计出游戏的界面，具体实现如下。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>井字游戏</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>井字游戏</h1>
  <table>
    <tr>
      <td id="1"></td>
      <td id="2"></td>
      <td id="3"></td>
    </tr>
    <tr>
      <td id="4"></td>
      <td id="5"></td>
      <td id="6"></td>
    </tr>
    <tr>
      <td id="7"></td>
      <td id="8"></td>
      <td id="9"></td>
    </tr>
  </table>
  <p id="result"></p>
  <script src="js/jquery.min.js"></script>
  <script src="js/game.js"></script>
</body>
</html>

上面的代码使用了<table>和<td>进行简单的布局，每个<td>元素的id属性用于表示游戏内的每个格子。

游戏逻辑

接下来是关键的游戏逻辑的实现，我们将这部分代码写入game.js中。

首先，我们需要定义一些游戏内需要使用到的变量。

var currentPlayer = 1;
var moves = 0;
var board = [0, 0, 0, 0, 0, 0, 0, 0, 0];
var winningCombinations = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7], [2, 5, 8], [3, 6, 9], [1, 5, 9], [3, 5, 7]];

这里，currentPlayer表示当前玩家，moves表示已经下棋的次数，board表示游戏内的棋盘状态，其中0表示空格，1表示玩家1落子，2表示玩家2落子。winningCombinations表示获胜的所有情况。

接下来，我们定义一个函数placeMove用于在游戏界面上落子。

function placeMove(cell, player) {
  if(player === 1) {
    $(cell).addClass('x').text('X');
  } else {
    $(cell).addClass('o').text('O');
  }
  moves++;
  board[parseInt(cell.id) - 1] = player;
}

该函数接收两个参数，cell表示要放置落子的格子，player表示当前玩家。函数会将该格子的CSS样式修改为对应的图案，并在其中填充对应的字母，同时将该格子的状态在board数组中修改。

接下来，我们需要定义一个函数checkWinner用于检查当前游戏是否有获胜者。

function checkWinner() {
  for(var i = 0; i < winningCombinations.length; i++) {
    var combo = winningCombinations[i];
    if(board[combo[0]-1] !== 0 && board[combo[0]-1] === board[combo[1]-1] && board[combo[1]-1] === board[combo[2]-1]) {
      return board[combo[0]-1];
    }
  }
  if(moves === 9) {
    return 'T';
  }
  return;
}

该函数会遍历所有获胜的情况，对于每种获胜的情况，判断此时改情况下的格子状态是否相同，如果相同则表示当前玩家获胜，返回该玩家的编号（1或2），否则继续循环。如果所有情况下均未出现胜者，则判断是否已经下满所有的格子，如果已满则返回平局标识T，否则返回undefined。

最后，我们需要定义一个函数nextMove用于处理下一步的游戏逻辑。

function nextMove() {
  var result = checkWinner();
  if(result === 1 || result === 2 || result === 'T') {
    if(result === 'T') {
      $('#result').text('平局！');
    } else {
      $('#result').text('玩家' + result + '获胜！');
    }
    $('td').off('click');
  } else {
    currentPlayer = currentPlayer === 1 ? 2 : 1;
  }
}

该函数先通过checkWinner函数判断当前游戏是否已经结束，如果已结束则显示对应的结果，并移除所有格子的点击事件，否则玩家交替下棋。

接下来，我们需要为所有格子添加点击事件，以处理玩家的点击操作。

$('td').click(function() {
  if(board[parseInt(this.id) - 1] === 0) {
    placeMove(this, currentPlayer);
    nextMove();
  }
});

上面的代码使用click函数为所有的格子添加了点击事件，当玩家点击某个格子时，需要首先判断该格子是否为空格，如果是则调用placeMove函数处理落子事宜，然后调用nextMove函数处理下一步的游戏逻辑。

CSS样式

最后，我们需要添加一些CSS样式，以美化游戏界面，并使其符合游戏的风格。

以下是style.css的具体实现。

table {
  border-collapse: collapse;
}

td {
  width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  text-align: center;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}

.x:before {
  content: 'X';
}

.o:before {
  content: 'O';
}

#result {
  font-size: 20px;
  font-weight: bold;
  margin-top: 20px;
}

这里，我们对table元素设置了边框合并，并对每个格子设置了适当的样式。对于x和o两种元素，我们使用了before伪类向其中填充对应的字母。最后，我们在页面底部加入了一个用于显示游戏结果的元素，并设置了其样式。

总结

通过本文的学习，您已经可以使用jQuery创建井字游戏了。当然，我们的实现只是非常简单的一种，您可以根据自己的需求和设计，对代码进行更进一步的修改和优化，以实现更加完善和符合您需求的游戏。