🌟 前言
欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白 ：个人主页
🏠 个人博客 ：洛可可白博客
🐱 代码获取 ：bestwishes0203
📷 封面壁纸 ：洛可可白wallpaper
文章目录
- [Web实现井字棋游戏：JavaScript DOM基础与实例教程](#Web实现井字棋游戏：JavaScript DOM基础与实例教程)
Web实现井字棋游戏：JavaScript DOM基础与实例教程
井字棋（Tic-Tac-Toe）是一款经典的两人对战游戏，适合作为学习JavaScript DOM操作的实践项目。本文将通过一个简单的实例，介绍如何使用JavaScript和DOM API来实现一个井字棋游戏，并讲解相关的JavaScript DOM基础知识。
JavaScript DOM基础
DOM（Document Object Model）是HTML和XML文档的编程接口。在JavaScript中，DOM提供了一种结构化的方式来表示和操作网页内容。通过DOM，我们可以获取元素、修改样式、绑定事件等。
实例：井字棋游戏
实现效果
创建HTML结构
首先，我们需要创建一个包含游戏板和结果显示的HTML结构。
html
<div class="board">
<!-- 游戏格子 -->
<div class="cell"></div>
<!-- ... 其他格子 ... -->
</div>
<div id="result"></div>编写JavaScript逻辑
初始化游戏
在JavaScript中，我们首先定义游戏板的状态、玩家当前回合以及游戏是否结束的状态。
javascript
const board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
let gameEnded = false;事件绑定
为每个游戏格子绑定点击事件，以便在玩家点击时更新游戏状态。
javascript
const cells = document.querySelectorAll(".cell");
cells.forEach((cell, index) => {
cell.addEventListener("click", () => updateGameState(index));
});更新游戏状态
定义updateGameState函数来处理玩家的每一步操作，包括更新棋盘状态、检查胜利条件、切换玩家回合以及在适当的时候结束游戏。
javascript
// ... 更新棋盘逻辑 ...
function updateGameState(cellIndex) {
if (!gameEnded && board[cellIndex] === "") {
board[cellIndex] = currentPlayer;
renderBoard();
if (checkWin(currentPlayer)) {
endGame("Player " + currentPlayer + " wins!");
} else if (checkDraw()) {
endGame("It's a draw!");
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
if (currentPlayer === "O") {
setTimeout(makeComputerMove, 500);
}
}
}
}检查胜利条件和平局
在每一步操作后，使用checkWin和checkDraw函数来检查是否有玩家获胜或游戏是否平局。
javascript
// ... 检查胜利逻辑 ...
function checkWin(player) {
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 [a, b, c] = winningCombinations[i];
if (board[a] === player && board[b] === player && board[c] === player) {
return true;
}
}
return false;
}
// ... 检查平局逻辑 ...
function checkDraw() {
return board.every((cell) => cell !== "");
}电脑AI移动
在玩家为"O"时，电脑AI需要进行自动移动。makeComputerMove函数负责实现这一逻辑。
javascript
// ... 电脑AI移动逻辑 ...
function makeComputerMove() {
const emptyCells = board.reduce((acc, cell, index) => {
if (cell === "") {
acc.push(index);
}
return acc;
}, []);
if (emptyCells.length > 0) {
const randomIndex = Math.floor(Math.random() * emptyCells.length);
const computerMove = emptyCells[randomIndex];
updateGameState(computerMove);
}
}渲染棋盘
使用renderBoard函数将棋盘状态更新到页面上。
javascript
// ... 渲染棋盘逻辑 ...
function renderBoard() {
for (let i = 0; i < cells.length; i++) {
cells[i].textContent = board[i];
}
}重置游戏
提供一个重置游戏的函数，以便玩家可以重新开始新游戏。
javascript
// ... 重置游戏逻辑 ...
function resetGame() {
board.fill("");
currentPlayer = "X";
gameEnded = false;
resultElement.textContent = "";
renderBoard();
}全部代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>洛可可白😁井字棋游戏</title>
<style>
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 5px;
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 5px;
}
.cell {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
background-color: #f2f2f2;
cursor: pointer;
}
#result {
text-align: center;
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<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>
<div id="result"></div>
</body>
<script>
const board = ["", "", "", "", "", "", "", "", ""];
const cells = document.querySelectorAll(".cell");
const resultElement = document.getElementById("result");
let currentPlayer = "X";
let gameEnded = false;
function updateGameState(cellIndex) {
if (!gameEnded && board[cellIndex] === "") {
board[cellIndex] = currentPlayer;
renderBoard();
if (checkWin(currentPlayer)) {
endGame("Player " + currentPlayer + " wins!");
} else if (checkDraw()) {
endGame("It's a draw!");
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
if (currentPlayer === "O") {
setTimeout(makeComputerMove, 500);
}
}
}
}
function checkWin(player) {
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 [a, b, c] = winningCombinations[i];
if (board[a] === player && board[b] === player && board[c] === player) {
return true;
}
}
return false;
}
function checkDraw() {
return board.every((cell) => cell !== "");
}
function endGame(message) {
gameEnded = true;
resultElement.textContent = message;
}
function makeComputerMove() {
const emptyCells = board.reduce((acc, cell, index) => {
if (cell === "") {
acc.push(index);
}
return acc;
}, []);
if (emptyCells.length > 0) {
const randomIndex = Math.floor(Math.random() * emptyCells.length);
const computerMove = emptyCells[randomIndex];
updateGameState(computerMove);
}
}
function renderBoard() {
for (let i = 0; i < cells.length; i++) {
cells[i].textContent = board[i];
}
}
function resetGame() {
board.fill("");
currentPlayer = "X";
gameEnded = false;
resultElement.textContent = "";
renderBoard();
}
cells.forEach((cell, index) => {
cell.addEventListener("click", () => updateGameState(index));
});
resetGame();
</script>
</html>结语
通过上述步骤，我们实现了一个简单的井字棋游戏。这个实例展示了如何使用JavaScript DOM API来操作HTML元素，并响应用户事件。通过这个项目，你可以更好地理解DOM操作的基本概念和方法，以及如何在实际项目中应用它们。井字棋游戏是一个入门级的编程项目，适合初学者练习和提升编程技能。
如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀
🎉 往期精彩回顾
Web实现表格单选全选与反选操作：JavaScript DOM基础与实例教程
688阅读 · 14点赞 · 7收藏
H5实现Web ECharts教程：轻松创建动态数据图表855阅读 · 16点赞 · 4收藏
浏览器DOM操作基础：禁用右键菜单与阻止文字选中878阅读 · 30点赞 · 18收藏
缤纷浏览器 ------ 一键换肤，个性随心换（H5实现浏览器换肤效果）560阅读 · 9点赞 · 5收藏
广州5k前端面试题惊呆我！！！（内容太肝，谨慎入内）821阅读 · 27点赞 · 23收藏
计算机专业学生的成长之路：超越课堂的自我提升策略732阅读 · 30点赞 · 25收藏
Node.js快速入门：搭建基础Web服务器与实现CRUD及登录功能906阅读 · 31点赞 · 16收藏
Node.js核心命令与工具：提升开发效率的实用指南745阅读 · 11点赞 · 18收藏
爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析1299阅读 · 25点赞 · 30收藏
打造精美响应式CSS日历：从基础到高级样式1082阅读 · 14点赞 · 19收藏
Ubuntu系统下C语言开发环境搭建与使用教程1337阅读 · 35点赞 · 9收藏
Vue 3响应式系统详解：ref、toRefs、reactive及更多1193阅读 · 23点赞 · 14收藏
爆肝两千字！掌握CSS选择器与响应式设计：从基础到高级应用1061阅读 · 27点赞 · 28收藏