各位開發者大家好！我很高興分享我的最新項目：經典的井字遊戲。這個專案是練習 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中文網其他相關文章！
