本教程详细介绍了如何使用JavaScript实现井字棋（Tic-Tac-Toe）游戏的核心交互逻辑。我们将学习如何通过事件监听器处理用户点击，在棋盘方格中放置“X”或“O”标记，实现玩家轮流操作，并添加重置游戏的功能。文章将提供完整的HTML、CSS和JavaScript代码示例，帮助开发者构建一个功能完善且交互流畅的井字棋应用。
构建井字棋游戏基础结构
在开始JavaScript逻辑之前，我们需要一个基本的HTML结构来承载井字棋盘。这个结构将包含一个主容器、若干行以及每个方格的占位符，以及一个用于重置游戏的按钮。
为了让棋盘看起来更像一个井字棋盘，并提供基本的交互视觉反馈，我们可以添加一些CSS样式。这些样式有助于布局、方格尺寸、边框以及鼠标悬停效果。
#board {
margin: 20px auto; /* 居中显示 */
width: 50%; /* 棋盘宽度 */
max-width: 300px; /* 最大宽度限制 */
border: 1px solid #ccc;
}
.row {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列等宽布局 */
}
.square {
border: 1px solid black;
padding: 1rem;
cursor: pointer;
text-align: center;
aspect-ratio: 1/1; /* 保持方格宽高比为1:1 */
display: flex; /* 使得X/O居中 */
align-items: center;
justify-content: center;
font-size: 2em; /* 标记字体大小 */
font-weight: bold;
}
.square:hover {
background-color: #f0f0f0; /* 鼠标悬停背景色 */
}
#reset-btn {
display: block;
margin: 15px auto;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
}实现核心游戏逻辑：点击与玩家切换
井字棋的核心在于玩家点击方格后，显示相应的标记（X或O），并自动切换到下一位玩家。这需要JavaScript来监听点击事件并管理游戏状态。
立即学习“Java免费学习笔记（深入）”；
获取所有方格元素：document.querySelectorAll(".square") 方法会返回一个NodeList，其中包含所有具有square类的元素。由于NodeList不是一个普通的数组，我们不能直接在其上调用addEventListener来为所有元素添加监听器。因此，需要遍历这个NodeList。
初始化当前玩家： 使用一个变量（例如currentPlayer）来跟踪当前轮到哪位玩家。我们可以将其初始化为"X"。
为每个方格添加点击事件监听器： 通过forEach方法遍历NodeList中的每个方格。对每个方格，我们添加一个click事件监听器。
-
放置标记与切换玩家： 在点击事件的回调函数中，我们需要执行以下逻辑：
- 检查方格是否为空： 只有当方格当前没有标记时，才允许放置标记。这可以通过检查square.innerHTML是否为空字符串来实现。
- 放置标记： 如果方格为空，将currentPlayer的值赋给square.innerHTML，从而在方格中显示"X"或"O"。
- 切换玩家： 使用三元运算符简洁地切换currentPlayer的值。如果当前玩家是"X"，则切换为"O"；否则，切换为"X"。
以下是实现上述逻辑的JavaScript代码：
window.onload = () => {
const squares = document.querySelectorAll(".square");
let currentPlayer = "X"; // 初始玩家为X
squares.forEach(square => {
square.addEventListener("click", () => {
// 只有当方格为空时才允许放置标记
if (square.innerHTML === "") {
square.innerHTML = currentPlayer; // 放置当前玩家的标记
// 切换到下一位玩家
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
});
});
// 重置按钮的事件监听器将在下一节介绍
};实现游戏重置功能
为了让玩家能够重新开始游戏，我们需要一个重置按钮。当点击这个按钮时，所有棋盘方格的内容都应该被清空。
获取重置按钮元素： 使用document.querySelector('#reset-btn')获取重置按钮。
添加点击事件监听器： 为重置按钮添加一个click事件监听器。
清空所有方格： 在重置按钮的点击回调函数中，再次获取所有方格元素，并遍历它们，将每个方格的innerHTML设置为空字符串。
将重置逻辑添加到window.onload函数中，与游戏核心逻辑一起初始化：
window.onload = () => {
const squares = document.querySelectorAll(".square");
let currentPlayer = "X";
squares.forEach(square => {
square.addEventListener("click", () => {
if (square.innerHTML === "") {
square.innerHTML = currentPlayer;
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
});
});
// 为重置按钮添加事件监听器
document.querySelector('#reset-btn').addEventListener('click', () => {
squares.forEach(square => {
square.innerHTML = ""; // 清空所有方格内容
});
currentPlayer = "X"; // 重置当前玩家为X
});
};完整代码示例
将HTML、CSS和JavaScript代码整合，即可得到一个功能完整的井字棋游戏。
HTML (index.html):
JavaScript 井字棋
CSS (style.css):
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
#board {
margin: 20px auto;
width: 50%;
max-width: 300px;
border: 1px solid #ccc;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.row {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.square {
border: 1px solid #ddd;
padding: 1rem;
cursor: pointer;
text-align: center;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5em; /* 增大字体 */
font-weight: bold;
color: #333;
transition: background-color 0.2s ease;
}
.square:hover {
background-color: #e9e9e9;
}
#reset-btn {
display: block;
margin: 20px auto;
padding: 10px 25px;
font-size: 1.1em;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.2s ease;
}
#reset-btn:hover {
background-color: #0056b3;
}JavaScript (script.js):
window.onload = () => {
const squares = document.querySelectorAll(".square");
let currentPlayer = "X"; // 初始玩家为X
squares.forEach(square => {
square.addEventListener("click", () => {
// 只有当方格为空时才允许放置标记
if (square.innerHTML === "") {
square.innerHTML = currentPlayer; // 放置当前玩家的标记
// 切换到下一位玩家
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
});
});
// 为重置按钮添加事件监听器
document.querySelector('#reset-btn').addEventListener('click', () => {
squares.forEach(square => {
square.innerHTML = ""; // 清空所有方格内容
});
currentPlayer = "X"; // 重置当前玩家为X
});
};注意事项与总结
- DOM操作效率： 在这个简单的井字棋游戏中，直接操作innerHTML是可行的。但在更复杂的应用中，频繁的DOM操作可能影响性能。可以考虑使用虚拟DOM库（如React, Vue）或更优化的DOM更新策略。
- 游戏胜利判断： 当前教程仅实现了点击、切换玩家和重置功能。一个完整的井字棋游戏还需要添加逻辑来判断何时出现三连珠（水平、垂直或对角线），以及游戏是否平局。这通常涉及在每次标记放置后检查棋盘状态。
- 状态管理： currentPlayer变量是游戏状态管理的一个简单示例。在大型应用中，更复杂的全局状态管理模式（如Redux、Vuex）会更有用。
- 用户体验： 可以进一步增强用户体验，例如在游戏结束时显示胜利者信息，或者禁用已填满的方格。
通过本教程，您应该已经掌握了使用JavaScript实现井字棋游戏基础交互的核心方法。在此基础上，您可以继续扩展功能，例如添加胜利判断逻辑、游戏历史记录等，以构建更完善的游戏体验。
