Hallo, liebe Entwickler! Ich freue mich, mein neuestes Projekt vorzustellen: ein klassisches Tic-Tac-Toe-Spiel. Dieses Projekt ist eine großartige Möglichkeit, Ihre JavaScript-Kenntnisse zu üben, insbesondere im Umgang mit Spiellogik, DOM-Manipulation und Benutzerinteraktionen. Egal, ob Sie gerade erst mit JavaScript anfangen oder nach einer lustigen Herausforderung suchen, dieses Tic-Tac-Toe-Spiel ist perfekt, um Ihre Fähigkeiten zu verbessern.
Das Tic-Tac-Toe-Spiel ist eine webbasierte Umsetzung des beliebten Zwei-Spieler-Spiels. Das Projekt zeigt, wie man interaktive Elemente erstellt, den Spielstatus verwaltet und einfache KI-Logik implementiert. Das Spiel ist so konzipiert, dass es vollständig responsiv ist, sodass es sowohl auf Desktop- als auch auf Mobilgeräten spielbar ist.
Hier ein kurzer Blick auf die Projektstruktur:
Tic-Tac-Toe/ ├── index.html ├── styles.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Tic-Tac-Toe.git
Öffnen Sie das Projektverzeichnis:
cd Tic-Tac-Toe
Führen Sie das Projekt aus:
Die Datei index.html legt die Struktur des Tic-Tac-Toe-Spiels fest, einschließlich des Spielbretts und der Steuertasten. Hier ist ein Ausschnitt:
<!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>
Die Datei „styles.css“ stilisiert das Tic-Tac-Toe-Spiel, einschließlich des Rasterlayouts, der Schaltflächen und des responsiven Designs. Hier sind einige wichtige Stile:
* {
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;
}
Die Datei „script.js“ verwaltet die Spiellogik, einschließlich der Handhabung von Spielerzügen, der Suche nach einem Gewinner und dem Zurücksetzen des Spiels. Hier ist ein Ausschnitt:
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);
Sie können sich hier die Live-Demo des Tic-Tac-Toe-Spiels ansehen.
Das Erstellen dieses Tic-Tac-Toe-Spiels war eine unterhaltsame Erfahrung, die es mir ermöglichte, JavaScript zu üben, insbesondere beim Erstellen interaktiver Webanwendungen. Ich hoffe, dieses Projekt inspiriert Sie dazu, Ihre eigenen Spiele zu entwickeln und die Möglichkeiten mit JavaScript zu erkunden. Viel Spaß beim Codieren!
Dieses Projekt wurde im Rahmen meiner fortlaufenden Reise zur Verbesserung meiner Webentwicklungsfähigkeiten entwickelt, mit Schwerpunkt auf JavaScript und DOM-Manipulation.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Website für Tic Tac Toe-Spiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
