各位开发者大家好！我很高兴分享我的最新项目：经典的井字游戏。该项目是练习 JavaScript 技能的好方法，特别是在处理游戏逻辑、DOM 操作和用户交互方面。无论您是刚刚开始使用 JavaScript 还是正在寻找有趣的挑战，这款 Tic-Tac-Toe 游戏都是磨练您技能的完美选择。
Tic-Tac-Toe 游戏 是流行的两人游戏的基于网络的实现。该项目展示了如何创建交互元素、管理游戏状态以及实现简单的人工智能逻辑。该游戏被设计为完全响应式，使其可以在桌面和移动设备上玩。
以下是项目结构的快速浏览：
Tic-Tac-Toe/ ├── index.html ├── styles.css └── script.js
要开始该项目，请按照以下步骤操作：
克隆存储库：
git clone https://github.com/abhishekgurjar-in/Tic-Tac-Toe.git
打开项目目录:
cd Tic-Tac-Toe
运行项目:
index.html 文件设置 Tic-Tac-Toe 游戏的结构，包括游戏板和控制按钮。这是一个片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tic-Tac-Toe Game</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div class="msg-container hide">
<p id="msg">Winner</p>
<button id="new-btn">New Game</button>
</div>
<main>
<h1>Tic Tac Toe</h1>
<div class="container">
<div class="game">
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
<button class="box"></button>
</div>
</div>
<button id="reset-btn">Reset Game</button>
</main>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
styles.css 文件设计 Tic-Tac-Toe 游戏的样式，包括网格布局、按钮和响应式设计。以下是一些关键样式：
* {
margin: 0;
padding: 0;
}
body {
background-color: #548687;
text-align: center;
}
.container {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
.game {
height: 60vmin;
width: 60vmin;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.5vmin;
}
.box {
height: 18vmin;
width: 18vmin;
border-radius: 1rem;
border: none;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
font-size: 8vmin;
color: #b0413e;
background-color: #ffffc7;
}
#reset-btn {
padding: 1rem;
font-size: 1.25rem;
background-color: #191913;
color: #fff;
border-radius: 1rem;
border: none;
}
#new-btn {
padding: 1rem;
font-size: 1.25rem;
background-color: #191913;
color: #fff;
border-radius: 1rem;
border: none;
}
#msg {
color: #ffffc7;
font-size: 5vmin;
}
.msg-container {
height: 100vmin;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 4rem;
}
.hide {
display: none;
}
.footer {
margin: 50px;
text-align: center;
color: white;
}
script.js 文件管理游戏逻辑，包括处理玩家回合、检查获胜者以及重置游戏。这是一个片段：
let boxes = document.querySelectorAll(".box");
let resetBtn = document.querySelector("#reset-btn");
let newGameBtn = document.querySelector("#new-btn");
let msgContainer = document.querySelector(".msg-container");
let msg = document.querySelector("#msg");
let turnO = true; //playerX, playerO
let count = 0; //To Track Draw
const winPatterns = [
[0, 1, 2],
[0, 3, 6],
[0, 4, 8],
[1, 4, 7],
[2, 5, 8],
[2, 4, 6],
[3, 4, 5],
[6, 7, 8],
];
const resetGame = () => {
turnO = true;
count = 0;
enableBoxes();
msgContainer.classList.add("hide");
};
boxes.forEach((box) => {
box.addEventListener("click", () => {
if (turnO) {
//playerO
box.innerText = "O";
turnO = false;
} else {
//playerX
box.innerText = "X";
turnO = true;
}
box.disabled = true;
count++;
let isWinner = checkWinner();
if (count === 9 && !isWinner) {
gameDraw();
}
});
});
const gameDraw = () => {
msg.innerText = `Game was a Draw.`;
msgContainer.classList.remove("hide");
disableBoxes();
};
const disableBoxes = () => {
for (let box of boxes) {
box.disabled = true;
}
};
const enableBoxes = () => {
for (let box of boxes) {
box.disabled = false;
box.innerText = "";
}
};
const showWinner = (winner) => {
msg.innerText = `Congratulations, Winner is ${winner}`;
msgContainer.classList.remove("hide");
disableBoxes();
};
const checkWinner = () => {
for (let pattern of winPatterns) {
let pos1Val = boxes[pattern[0]].innerText;
let pos2Val = boxes[pattern[1]].innerText;
let pos3Val = boxes[pattern[2]].innerText;
if (pos1Val != "" && pos2Val != "" && pos3Val != "") {
if (pos1Val === pos2Val && pos2Val === pos3Val) {
showWinner(pos1Val);
return true;
}
}
}
};
newGameBtn.addEventListener("click", resetGame);
resetBtn.addEventListener("click", resetGame);
您可以在这里查看 Tic-Tac-Toe 游戏的现场演示。
构建这款 Tic-Tac-Toe 游戏是一次愉快的体验，它让我能够练习 JavaScript，尤其是在创建交互式 Web 应用程序方面。我希望这个项目能够激励您构建自己的游戏并探索 JavaScript 的可能性。快乐编码！
这个项目是我不断提高 Web 开发技能的一部分，重点关注 JavaScript 和 DOM 操作。
以上是建立井字游戏网站的详细内容。更多信息请关注PHP中文网其他相关文章！
