本教程详细介绍了如何使用javaScript实现井字棋（Tic-Tac-Toe）游戏的核心交互逻辑。我们将学习如何通过事件监听器处理用户点击，在棋盘方格中放置“X”或“O”标记，实现玩家轮流操作，并添加重置游戏的功能。文章将提供完整的html、css和javascript代码示例，帮助开发者构建一个功能完善且交互流畅的井字棋应用。
构建井字棋游戏基础结构
在开始JavaScript逻辑之前，我们需要一个基本的HTML结构来承载井字棋盘。这个结构将包含一个主容器、若干行以及每个方格的占位符，以及一个用于重置游戏的按钮。
<body> <div id="board"> <div class="row"> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <div class="row"> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <div class="row"> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <button id="reset-btn">重置游戏</button> </div> </body>为了让棋盘看起来更像一个井字棋盘，并提供基本的交互视觉反馈，我们可以添加一些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事件监听器。
-
放置标记与切换玩家： 在点击事件的回调函数中，我们需要执行以下逻辑：
以下是实现上述逻辑的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):
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript 井字棋</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="board"> <div class="row"> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <div class="row"> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <div class="row"> <div class="square"></div> <div class="square"></div> <div class="square"></div> </div> <button id="reset-btn">重置游戏</button> </div> <script src="script.js"></script> </body> </html>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实现井字棋游戏基础交互的核心方法。在此基础上，您可以继续扩展功能，例如添加胜利判断逻辑、游戏历史记录等，以构建更完善的游戏体验。