基于原生 Web 技术实现网页版井字棋游戏

初始状态下布局可能显得空旷，这是因为容器高度未定义，接下来我们通过 CSS 进行优化。

2. 样式美化

使用 Flexbox 居中页面主体，Grid 布局绘制棋盘。利用伪类和过渡效果增强交互反馈。

/* 全局重置 */
* { padding: 0; margin: 0; box-sizing: inherit; }

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: linear-gradient(to top, #a8edea, #ffc7d9);
  font-family: "Bungee Inline", cursive;
  color: #f5f5f5;
  overflow: hidden;
}

.wrapper {
  background-color: #55acee53;
  padding: 50px;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  grid-template-rows: repeat(3, minmax(90px, 1fr));
  grid-gap: 12px;
  width: 100%;
  max-width: 495px;
  margin: 0 auto 15px;
}

.cell {
  cursor: pointer;
  position: relative;
  background-color: #f5f5f5;
  width: 90px;
  height: 90px;
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}

.cell:hover { opacity: 1; }

.game-end-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #0d1021;
}

.game-end-overlay.show { display: flex; flex-direction: column; justify-content: center; align-items: center; }

.reset-button {
  color: #f5f5f5;
  font-size: 30px;
  border: none;
  padding: 10px 20px;
  background-color: #a186be;
  box-shadow: 5px 5px 0 #55acee;
  cursor: pointer;
}

.reset-button:hover { transform: scale(1.2); }
.reset-button:active { top: 6px; left: 6px; box-shadow: none; }

3. 交互逻辑

核心在于维护游戏状态（当前玩家、是否结束），并通过事件监听处理点击。

// 获取页面元素
const board = document.getElementById('board');
const cells = document.querySelectorAll('[data-cell]');
const currentStatus = document.getElementById('currentStatus');
const resetButton = document.getElementById('resetButton');
const gameEndOverlay = document.getElementById('gameEndOverlay');
const currentBeastStatusImg = document.getElementById('currentBeastImg');
const winningMessage = document.querySelector('[data-winning-message]');
const winningMessageText = document.querySelector('[data-winning-message] p');
const winningMessageImg = document.createElement('img');

// 初始化游戏状态
let gameIsLive = true;
let unicornTurn = true;

// 所有获胜组合索引
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 setBoardHoverClass = () => {
  board.classList.remove('unicorn', 'dragon');
  if (unicornTurn) board.classList.add('unicorn');
  else board.classList.add('dragon');
}

// 在格子上放置图片
const placeBeastImg = (cell, currentBeast) => {
  cell.classList.add(currentBeast);
}

// 切换回合
const swapTurns = () => {
  unicornTurn = !unicornTurn;
}

// 更新当前状态
const updateCurrentStatus = () => {
  if (unicornTurn) {
    currentBeastStatusImg.src = './1.gif';
    currentBeastStatusImg.alt = 'unicorn';
  } else {
    currentBeastStatusImg.src = './2.gif';
    currentBeastStatusImg.alt = 'dragon';
  }
}

// 检查是否获胜
const checkWin = (currentBeast) => {
  return winningCombinations.some(combination => {
    return combination.every(i => {
      return cells[i].classList.contains(currentBeast);
    });
  });
}

// 判断是否平局
const isDraw = () => {
  return [...cells].every(cell => {
    return cell.classList.contains('unicorn') || cell.classList.contains('dragon');
  });
}

// 开始游戏
const startGame = () => {
  cells.forEach(cell => {
    winningMessageImg.remove();
    cell.classList.remove('unicorn', 'dragon');
    cell.removeEventListener('click', handleCellClick);
    cell.addEventListener('click', handleCellClick, { once: true });
  });
  setBoardHoverClass();
  gameEndOverlay.classList.remove('show');
}

// 结束游戏
const endGame = (draw) => {
  if (draw) {
    winningMessageText.innerText = `draw!`;
  } else {
    winningMessageImg.src = unicornTurn ? './1.gif' : './2.gif';
    winningMessageImg.alt = unicornTurn ? 'unicorn' : 'dragon';
    winningMessage.insertBefore(winningMessageImg, winningMessageText);
    winningMessageText.innerText = `wins!!!`;
  }
  gameEndOverlay.classList.add('show');
}

// 处理格子点击事件
const handleCellClick = (e) => {
  const cell = e.target;
  const currentBeast = unicornTurn ? 'unicorn' : 'dragon';
  placeBeastImg(cell, currentBeast);
  
  if (checkWin(currentBeast)) {
    endGame(false);
  } else if (isDraw()) {
    endGame(true);
  } else {
    swapTurns();
    updateCurrentStatus();
    setBoardHoverClass();
  }
}

// 绑定重置按钮
resetButton.addEventListener('click', startGame);

// 启动游戏
startGame();

完整代码已整合在下方，可直接复制运行到浏览器中查看效果。