井字棋游戏 HTML CSS JS 开发

2023-10-04 11:33:14

井字棋作为我们在上学时代必玩的一款连珠游戏，你知道如何做到先手必然不会输吗？今天我们就用HTML、css、js来实现一款井字棋游戏。

工具和技术

HTML
CSS
JavaScript
浏览器

HTML结构

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>井字棋游戏</h1>
  <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="script.js"></script>
</body>
</html>

CSS样式

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid black;
}

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

.x {
  color: red;
  font-size: 50px;
}

.o {
  color: blue;
  font-size: 50px;
}

JavaScript代码

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

for (let i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function() {
    if (this.textContent === '') {
      this.textContent = turn;
      if (turn === 'X') {
        turn = 'O';
      } else {
        turn = 'X';
      }
      checkWinner();
    }
  });
}

function checkWinner() {
  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]
  ];

  for (let i = 0; i < winningCombinations.length; i++) {
    const combination = winningCombinations[i];
    if (cells[combination[0]].textContent === cells[combination[1]].textContent && cells[combination[1]].textContent === cells[combination[2]].textContent && cells[combination[0]].textContent !== '') {
      alert('Winner is ' + cells[combination[0]].textContent);
      return;
    }
  }
}