使用 JQuery 和 Javascript 制作井字棋游戏

介绍

井字棋游戏（英文名称: Tic-Tac-Toe）是一种十分经典的游戏，相信很多读者在小时候都曾经玩过。在这篇文章中，我们将使用 JQuery 和 Javascript 来实现一个简单的井字棋游戏。

技术栈

• HTML
• CSS
• Javascript
• JQuery

效果展示

首先，我们来看一下最终实现的效果：

游戏规则

1. 两名玩家轮流在一个 3x3 的棋盘上放置自己的棋子（通常是“X”和“O”，但我们在这里把它们分别替换成一颗红色和一颗蓝色的小球）
2. 第一个在竖、横或对角线上形成三个自己的棋子的玩家获胜
3. 如果棋盘被占满但没有任何一名玩家获胜，则游戏结束为平局

步骤

第一步：写出 HTML 代码块

首先需要写出 HTML 代码块，以实现基本的布局和渲染效果。代码片段如下：

<div class="game-container">
  <div class="board">
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
  </div>
  <div class="status">Next player: <span class="player">RED</span></div>
  <button class="restart-btn">Restart Game</button>
</div>

解析：

• <div class="game-container">：游戏的包裹元素。
• <div class="board">...：棋盘元素，包裹了 9 个棋格。
• <div class="cell" data-cell></div>：棋格元素，配合 data-cell 属性标识当前棋格的位置。
• <div class="status">...：状态展示元素，展示了当前是哪位玩家进行。
• <span class="player">RED</span>：当前玩家的颜色展示元素。
• <button class="restart-btn">Restart Game</button>：重新开始游戏的按钮。

第二步：添加基本 CSS 样式

接下来，我们需要添加一些 CSS 样式。代码片段如下：

.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40%;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.cell {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.cell:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.status {
  font-size: 1.5rem;
  margin: 20px 0;
}

.restart-btn {
  padding: 10px 20px;
  font-size: 1.2rem;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.restart-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

解析：

• .game-container：游戏的包裹元素，设置了居中和默认宽度。
• .board：为棋盘设置了 3 列和 3 行，并设置了行列之间的间距，以便于样式设置。
• .cell：为棋格设置了默认背景颜色和点击效果，并设置了 Hover 效果。
• .status：状态展示元素，设置了字体大小和上下的间距。
• .restart-btn：重置游戏按钮，设置了字体和鼠标 Hover 时的颜色变化。

第三步：编写 Javascript 代码块

最后我们需要编写 JavaScript 代码块来使游戏可以正常运行起来。代码片段如下：

const cellElements = document.querySelectorAll("[data-cell]");
const board = document.querySelector(".board");
const status = document.querySelector(".status");
const restartBtn = document.querySelector(".restart-btn");
const playerColor = {
  1: "RED",
  2: "BLUE",
};

let currentPlayer = 1;
let gameState = ["", "", "", "", "", "", "", "", ""];

function handleCellClick(e) {
  const cell = e.target;
  const currentIndex = cell.getAttribute("data-cell");

  if (gameState[currentIndex] !== "" || checkIfGameIsOver(gameState)) {
    return;
  }

  gameState[currentIndex] = playerColor[currentPlayer];
  cell.style.backgroundColor = playerColor[currentPlayer];
  cell.textContent = playerColor[currentPlayer];
  currentPlayer = currentPlayer === 1 ? 2 : 1;
  status.textContent = `Next player: ${playerColor[currentPlayer]}`;

  if (checkWin(gameState)) {
    status.textContent = `${playerColor[currentPlayer]} wins!`;
    endGame();
  } else if (checkIfGameIsOver(gameState)) {
    status.textContent = "Game ended in a draw!";
    endGame();
  }
}

function checkIfGameIsOver(gameState) {
  return !gameState.includes("");
}

function checkWin(gameState) {
  const wins = [
    // horizontal wins
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    // vertical wins
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    // diagonal wins
    [0, 4, 8],
    [2, 4, 6],
  ];

  return wins.some((comb) => {
    return (
      gameState[comb[0]] !== "" &&
      gameState[comb[0]] === gameState[comb[1]] &&
      gameState[comb[1]] === gameState[comb[2]]
    );
  });
}

function endGame() {
  cellElements.forEach((cell) => {
    cell.removeEventListener("click", handleCellClick);
  });
  board.style.opacity = 0.5;
}

function startGame() {
  cellElements.forEach((cell) => {
    cell.style.backgroundColor = "";
    cell.textContent = "";
    cell.addEventListener("click", handleCellClick, { once: true });
  });
  currentPlayer = 1;
  gameState = ["", "", "", "", "", "", "", "", ""];
  status.textContent = `Next player: ${playerColor[currentPlayer]}`;
  board.style.opacity = 1;
}

restartBtn.addEventListener("click", startGame);
startGame();

解析：

• cellElements：所有棋格元素。
• board：棋盘元素。
• status：状态提示元素。
• restartBtn：重置游戏按钮。
• playerColor：用于标识玩家的颜色。
• currentPlayer：表示当前玩家的编号（1 为红色，2 为蓝色）。
• gameState：用于记录游戏状态的数组。空字符串代表当前位置没有被占据，红色和蓝色则对应着玩家的颜色。
• handleCellClick：在点击棋格时触发，并负责记录当前位置的状态信息，并改变颜色和背景。
• checkIfGameIsOver：判断游戏是否已经结束。
• checkWin：检查是否有一名玩家在行、列或对角线上获胜。
• endGame：当游戏结束时，移除所有点击事件，并将棋盘的不透明度设置为 0.5。
• startGame：在游戏开始时，重置所有格子的状态和颜色，并在每个格子上添加一个 click 事件。
• 最后是一些监听器和游戏的第一次启动。

以上内容就是制作井字棋游戏的全过程了！

总结

通过这篇文章，我们了解了如何使用 JQuery 和 Javascript 来制作一个简单的井字棋游戏。虽然这只是游戏制作的一个入门程度的项目，但是通过阅读和实践本文，读者可以更深入地理解前端游戏制作的基本技巧和方法。