使用 JavaScript 的简单井字游戏

简介

井字游戏，也叫三连棋，是一种以棋盘为基础的二人零和博弈。游戏者轮流在棋盘上放置自己的棋子，谁先使自己的棋子在任意一条直线上连成三个一线，谁就获胜。JavaScript 可以用来创建这个简单的游戏。

实现

HTML

首先，我们需要在 HTML 中定义一个棋盘的界面。可以使用一个 table 元素来划分成九个格子。

<table id="board">
  <tr>
    <td data-cell></td>
    <td data-cell></td>
    <td data-cell></td>
  </tr>
  <tr>
    <td data-cell></td>
    <td data-cell></td>
    <td data-cell></td>
  </tr>
  <tr>
    <td data-cell></td>
    <td data-cell></td>
    <td data-cell></td>
  </tr>
</table>

注意每个格子都要使用 data-cell 属性来标记。

CSS

接下来，我们需要使用 CSS 来美化界面。这里只需要简单的 CSS 样式来使棋盘格看起来更好看。

table {
  border-collapse: collapse;
}
td {
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
}
td:hover {
  background-color: lightgray;
}

JavaScript

最后，我们使用 JavaScript 来实现井字游戏的逻辑。我们需要使用以下步骤来完成代码：

1. 给每个格子添加点击事件。
2. 记录玩家的移动。
3. 检查是否有玩家胜利。
4. 转换玩家。

const board = document.getElementById('board');
const PLAYER_X = 'x';
const PLAYER_O = 'o';
let currentPlayer = PLAYER_X;
let gameEnded = false;

function handlePlayerMove(event) {
  const cell = event.target;
  
  // 检查单元格是否已经被占用
  if (cell.textContent || gameEnded) {
    return;
  }
  
  // 更新当前玩家的移动
  cell.textContent = currentPlayer;
  
  // 检查当前玩家是否胜利
  if (checkWin()) {
    alert(`${currentPlayer} wins!`);
    gameEnded = true;
    return;
  }
  
  // 转换玩家
  currentPlayer = currentPlayer === PLAYER_X ? PLAYER_O : PLAYER_X;
}

function checkWin() {
  const cells = board.querySelectorAll('[data-cell]');
  const winningCombos = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  
  for (let combo of winningCombos) {
    const [a, b, c] = combo;
    if (cells[a].textContent &&
        cells[a].textContent === cells[b].textContent &&
        cells[b].textContent === cells[c].textContent) {
      return true;
    }
  }
  
  return false;
}

board.addEventListener('click', handlePlayerMove);

总结

以上就是使用 JavaScript 实现井字游戏的全部内容。该游戏是一个简单的 JavaScript 练手项目，可以帮助初学者加深对该语言的理解。