JavaScript/HTML/CSS井字棋项目游戏棋盘无法显示问题求助

核心问题分析 #

• HTML文档未闭合：你的HTML代码缺少</body>和</html>闭合标签，浏览器无法正确解析完整的文档结构，导致棋盘区域被忽略渲染。
• 缺失消息显示元素：JavaScript中多次调用document.getElementById("message")来展示胜负信息，但你的HTML里没有定义这个元素，会触发DOM查找错误，影响游戏功能运行。

修复步骤 #

1. 补全HTML的闭合标签，在现有HTML代码末尾添加</body>和</html>
2. 在容器内添加消息显示元素，推荐放在<h1>下方或重置按钮上方，比如：<div id="message" style="font-size: 20px; margin: 15px 0;"></div>

修正后的完整代码 #

HTML CODE

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tic Tac Toe</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Tic Tac Toe</h1>
    <div id="message" style="font-size: 20px; margin: 15px 0;"></div>
    <div id="board">
      <div class="square" id="0"></div>
      <div class="square" id="1"></div>
      <div class="square" id="2"></div>
      <div class="square" id="3"></div>
      <div class="square" id="4"></div>
      <div class="square" id="5"></div>
      <div class="square" id="6"></div>
      <div class="square" id="7"></div>
      <div class="square" id="8"></div>
    </div>
    <button id="reset">Reset Game</button>
  </div>
</body>
</html>

CSS CODE

.container {
  text-align: center;
}

#board {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  margin: 0 auto;
}

.square {
  width: 90px;
  height: 90px;
  background-color: #f2f2f2;
  margin: 5px;
  border-radius: 5px;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.square:hover {
  background-color: #e6e6e6;
}

.square.X {
  color: #ff5e5e;
}

.square.O {
  color: #0077ff;
}

/* 新增获胜格子高亮样式 */
.square.winner {
  background-color: #d4edda;
  border-color: #c3e6cb;
}

JavaScript CODE

let board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let gameOver = false;

const winningConditions = [
  [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 squares = document.querySelectorAll(".square");
const resetButton = document.querySelector("#reset");

// 为每个格子添加点击事件
squares.forEach(square => {
  square.addEventListener("click", handleClick);
});

// 为重置按钮添加点击事件
resetButton.addEventListener("click", resetGame);

function handleClick(event) {
  const square = event.target;
  const index = square.getAttribute("id");

  // 如果格子已被占用或游戏结束，直接返回
  if (board[index] !== "" || gameOver) {
    return;
  }

  // 更新棋盘数据和UI显示
  board[index] = currentPlayer;
  square.classList.add(currentPlayer);
  square.innerHTML = currentPlayer;

  // 检查胜负或平局
  checkForWinner();
  checkForTieGame();

  // 切换玩家
  currentPlayer = currentPlayer === "X" ? "O" : "X";
}

function checkForWinner() {
  for (let i = 0; i < winningConditions.length; i++) {
    const [a, b, c] = winningConditions[i];
    if (board[a] === board[b] && board[b] === board[c] && board[a] !== "") {
      gameOver = true;
      highlightWinnerSquares(a, b, c);
      displayWinner(board[a]);
      break;
    }
  }
}

function checkForTieGame() {
  if (!board.includes("") && !gameOver) {
    gameOver = true;
    displayTieGame();
  }
}

function highlightWinnerSquares(a, b, c) {
  document.getElementById(a).classList.add("winner");
  document.getElementById(b).classList.add("winner");
  document.getElementById(c).classList.add("winner");
}

function displayWinner(player) {
  const message = document.getElementById("message");
  message.innerHTML = `${player} 获胜！`;
}

function displayTieGame() {
  const message = document.getElementById("message");
  message.innerHTML = "平局！";
}

function resetGame() {
  board = ["", "", "", "", "", "", "", "", ""];
  currentPlayer = "X";
  gameOver = false;

  squares.forEach(square => {
    square.classList.remove("X", "O", "winner");
    square.innerHTML = "";
  });

  const message = document.getElementById("message");
  message.innerHTML = "";
}

额外建议 #

• 编写HTML时养成闭合标签的习惯，可借助VS Code的自动补全功能（输入标签后按Tab键）避免遗漏
• 运行代码前打开浏览器开发者工具（F12），查看Console面板的报错信息，这是定位前端问题的核心方法
• 新手学习时可逐步测试：先写HTML和CSS确认棋盘渲染正常，再添加JavaScript功能

内容的提问来源于stack exchange，提问作者user21480501