井字棋游戏也能纯CSS?这里有个AI还会和你对战哦~

纯CSS井字棋

一、前言

不知道大家小时候有没有玩过一款游戏叫『井字棋』的。小时候经常和同学下井字棋，乐此不疲。直到现在，我也还是会偶尔玩一玩。

二、游戏规则

游戏的规则比较简单，就是在一个九宫格（据说十六宫格，二十五宫格也行~反正是格子就行），只要你下的棋能连成一条直线，就算赢。所谓连成一条直线，就是指水平、垂直或者斜向的任意三格连线。

三、CSS实现井字棋

现在，我们就来用纯CSS来实现井字棋游戏。首先，我们需要一个九宫格。我们可以使用CSS的 grid 布局来实现。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid black;
}

然后，我们需要给每个格子添加一个 div 元素。

.cell {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

现在，我们的九宫格就做好了。接下来，我们需要添加一个 X 和一个 O。我们可以使用CSS的 ::before 和 ::after 伪元素来实现。

.cell::before,
.cell::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  border: 1px solid black;
}

.cell::before {
  transform: rotate(45deg);
}

.cell::after {
  transform: rotate(-45deg);
}

现在，我们的 X 和 O 也做好了。接下来，我们需要添加一个玩家和一个AI。我们可以使用CSS的 :hover 伪类来实现。

.cell:hover {
  background-color: #ccc;
}

.cell.player {
  background-color: red;
}

.cell.ai {
  background-color: blue;
}

现在，我们的玩家和AI也做好了。接下来，我们需要添加一个游戏逻辑。我们可以使用JavaScript来实现。

const cells = document.querySelectorAll('.cell');
const player = 'X';
const ai = 'O';
let turn = player;

for (let i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function() {
    if (turn === player) {
      this.classList.add('player');
      turn = ai;
    } else {
      this.classList.add('ai');
      turn = player;
    }
  });
}

现在，我们的游戏逻辑也做好了。接下来，我们需要添加一个游戏结束判断。我们可以使用JavaScript来实现。

const winningCombinations = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];

const checkWinner = () => {
  for (let i = 0; i < winningCombinations.length; i++) {
    const combination = winningCombinations[i];
    const cells = combination.map(index => document.querySelectorAll('.cell')[index]);
    if (cells.every(cell => cell.classList.contains('player'))) {
      alert('玩家赢了！');
      return true;
    } else if (cells.every(cell => cell.classList.contains('ai'))) {
      alert('AI赢了！');
      return true;
    }
  }

  return false;
};

现在，我们的游戏结束判断也做好了。现在，我们的井字棋游戏就做好了。

四、结语

以上就是如何使用纯CSS来实现井字棋游戏的详细步骤。希望大家能够喜欢这个游戏。如果大家有什么问题，欢迎在评论区留言。