Heute führen wir dich durch die Erstellung des Spiels "Tic-Tac-Toe" in JavaScript. Dieses Spiel ist großartig, um das Programmieren zu üben und zu verstehen, wie man mit HTML, CSS und JavaScript interagiert! ⭐
Wenn Sie bereits ein wenig mit dem Programmieren vertraut sind und etwas Eigenes erstellen möchten, hilft Ihnen dieser Artikel, die Grundlagen zu verstehen. Und für den vollständigen Quellcode kannst du zu GitHub und das Projekt in Aktion zu sehen. Los geht's!
Den vollständigen Quellcode und möglicherweise weitere Verbesserungen finden Sie auf unserer GitHub.
Schritt 1: Dateien vorbereiten 💻
Um ein Spiel zu erstellen, benötigen wir drei Dateien:
HTML (index.html) - zum Erstellen der Seitenstruktur.
CSS (style.css) - für das Design der Seite.
JavaScript (script.js) - zum Schreiben der Spiellogik.
HTML ist für die Struktur verantwortlich, CSS fügt Stil hinzu und macht die Benutzeroberfläche angenehm, und JavaScript füllt das Spiel mit Logik und Interaktivität. Schauen wir uns zunächst die HTML-Datei an, die die Grundlage für unser Spiel bildet.
HTML: Struktur erstellen
Die HTML-Datei bildet die Grundlage der Benutzeroberfläche. So sieht der Code aus (Teil der Datei index.html):
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Игра "Tic-tac-toe" | Coursme</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- окно выбора -->
<div class="select-box">
<header>Крестики-нолики</header>
<div class="content">
<div class="title">Выберите, кем вы хотите быть?</div>
<div class="options">
<button class="playerX">Игрок (X)</button>
<button class="playerO">Игрок (O)</button>
</div>
</div>
</div>
<!-- игровое поле -->
<div class="play-board">
<div class="details">
<div class="players">
<span class="Xturn">Ход X</span>
<span class="Oturn">Ход O</span>
<div class="slider"></div>
</div>
</div>
<div class="play-area">
<section>
<span class="box1"></span>
<span class="box2"></span>
<span class="box3"></span>
</section>
<section>
<span class="box4"></span>
<span class="box5"></span>
<span class="box6"></span>
</section>
<section>
<span class="box7"></span>
<span class="box8"></span>
<span class="box9"></span>
</section>
</div>
</div>
<!-- окно результата -->
<div class="result-box">
<div class="won-text"></div>
<div class="btn"><button>Играть снова</button></div>
</div>
<script src="script.js"></script>
</body>
</html>In diesem HTML-Code werden drei Hauptabschnitte erstellt:
Fenster zur Spielerauswahl - wo der Spieler wählt, ob er X oder O sein wird.
Spielfeld - die Hauptschnittstelle, in der die Spieler ihre Züge machen.
Ergebnisfenster - zeigt den Gewinner oder ein Unentschieden an.
Diese drei Abschnitte bilden die Grundlage unseres Gameplays und machen die Benutzeroberfläche klar und einfach zu bedienen.
Schritt 2: Styling des Spiels 🎨
Die Datei style.css ist für das Erscheinungsbild des Spiels verantwortlich. Hier sind einige wichtige Punkte:
Der Hintergrund des Spiels ist in einer angenehmen violetten Farbe gehalten, was die Benutzeroberfläche hell und angenehm macht.
Die Auswahlschaltflächen für Spieler haben eine fließende Animation, wenn der Mauszeiger darüber bewegt wird, was die Interaktion mit dem Spiel aufregender macht.
Das Spielfeld ist in Zellen unterteilt, die jeweils beim Überfahren hervorgehoben werden, damit die Spieler intuitiv verstehen, wohin sie einen Zug machen können.
Code-Beispiel aus style.css:
body{
background: #6563FF;
color: #e0e0e0;
}
.play-area section span{
display: block;
height: 90px;
width: 90px;
margin: 2px;
color: #fff;
font-size: 40px;
line-height: 80px;
text-align: center;
border-radius: 5px;
background: #1e1e1e;
}Dieser Stil macht unser Spiel optisch ansprechend und benutzerfreundlich. Die Zellen des Spielfelds sind ordentlich gestaltet, sodass jeder Zug deutlich sichtbar ist und die Spieler sich leicht auf dem Spielfeld zurechtfinden können.
Kommen wir nun zum interessantesten Teil - JavaScript!
Schritt 3: JavaScript-Spiellogik 🕹️
JavaScript macht unser Spiel interaktiv. Sehen wir uns an, wie unsere Datei script.js funktioniert, angefangen bei der einfachen Auswahl eines Spielers bis hin zur Bestimmung des Gewinners.
Spielinitialisierung und Spielerauswahl
Wenn das Spiel geladen wird, initialisieren wir sofort einige Elemente und fügen Ereignisse für die Schaltflächen zur Spielerauswahl hinzu. So wird es gemacht:
// Auswahl aller notwendigen Elemente
const selectBox = document.querySelector(".select-box"),
selectBtnX = selectBox.querySelector(".options .playerX"),
selectBtnO = selectBox.querySelector(".options .playerO"),
playBoard = document.querySelector(".play-board"),
players = document.querySelector(".players"),
allBox = document.querySelectorAll("section span"),
resultBox = document.querySelector(".result-box"),
wonText = resultBox.querySelector(".won-text"),
replayBtn = resultBox.querySelector("button");
window.onload = ()=>{ // nach dem Laden des Fensters
for (let i = 0; i < allBox.length; i++) { // Wir fügen das Attribut onclick für alle verfügbaren span hinzu
allBox[i].setAttribute("onclick", "clickedBox(this)");
}
}Hier finden wir alle Elemente, die zur Steuerung des Spiels benötigt werden, und fügen Klickereignisse für jede Zelle des Spielfelds hinzu. Dies bedeutet, dass jede Zelle interaktiv wird und auf Benutzeraktionen reagieren kann.
Dann kommt die Wahl des Spielers:
selectBtnX.onclick = ()=>{
selectBox.classList.add("hide"); // Auswahlfenster ausblenden
playBoard.classList.add("show"); // Wir zeigen das Spielfeld
}
selectBtnO.onclick = ()=>{
selectBox.classList.add("hide");
playBoard.classList.add("show");
players.setAttribute("class", "players active player"); // Wir legen ein Attribut für die Spieler fest
}Dieser Code ist dafür verantwortlich, verschiedene Teile der Benutzeroberfläche ein- oder auszublenden, je nachdem, welcher Spieler ausgewählt wurde. Wenn die Auswahl getroffen wurde, verschwindet das Auswahlfenster und das Spielfeld erscheint auf dem Bildschirm.
Züge des Spielers und des Bots ➖➕
Wenn ein Spieler ein Feld auf dem Spielfeld auswählt, möchten wir, dass in diesem Feld ein Symbol (X oder O) angezeigt wird. So setzen wir es um:
let playerXIcon = "fas fa-times"; // Klassenname des Kreuzsymbols von FontAwesome
let playerOIcon = "far fa-circle"; // Klassenname des Kreis-Symbols von FontAwesome
let playerSign = "X"; // globale Variable, da wir sie in mehreren Funktionen verwenden
let runBot = true; // globale Variable mit einem booleschen Wert, um den Bot zu stoppen, wenn jemand gewinnt oder es ein Unentschieden gibt
function clickedBox(element){
if(players.classList.contains("player")){
playerSign = "O"; // Wenn der Spieler O gewählt hat
element.innerHTML = `<i class="${playerOIcon}"></i>`;
players.classList.remove("active");
}else{
element.innerHTML = `<i class="${playerXIcon}"></i>`;
players.classList.add("active");
}
element.setAttribute("id", playerSign); // Wir setzen das Attribut id in der Span/Zelle mit dem ausgewählten Zeichen des Spielers
selectWinner(); // Wir prüfen, ob es einen Gewinner gibt
element.style.pointerEvents = "none"; // Die Zelle kann nicht mehr ausgewählt werden
playBoard.style.pointerEvents = "none"; // Wir blockieren das Spielfeld, bis der Bot einen Zug macht
let randomTimeDelay = ((Math.random() * 1000) + 200).toFixed(); // Wir generieren eine zufällige Verzögerungszeit
setTimeout(()=>{
bot(runBot); // Wir rufen die Bot-Funktion auf
}, randomTimeDelay);
}Hier wählt der Spieler eine Zelle aus, und sie wird für die erneute Auswahl nicht mehr verfügbar. Dann wird der Zug mit einer kleinen Verzögerung an den Bot übergeben, um den Effekt eines echten Spiels zu erzeugen. So wird das Spiel dynamisch und interessant.
Bot-Funktion 🤖
Die Bot-Funktion wählt automatisch die nächste verfügbare Zelle aus. Der Bot macht einen Zug nach dem Spieler, und seine Aktionen erwecken auch den Eindruck, mit einem echten Gegner zu interagieren:
function bot(){
let array = []; // Wir erstellen ein leeres Array ... wir speichern die Indizes der nicht ausgewählten Zellen
if(runBot){ // wenn runBot true
playerSign = "O"; // Wir ändern playerSign auf O, wenn der Spieler X gewählt hat
for (let i = 0; i < allBox.length; i++) {
if(allBox[i].childElementCount == 0){ // wenn die Zelle keine untergeordneten Elemente enthält
array.push(i); // Wir fügen den Index der nicht ausgewählten Zellen in das Array ein
}
}
let randomBox = array[Math.floor(Math.random() * array.length)]; // wählen Sie eine zufällige Zelle
if(array.length > 0){
if(players.classList.contains("player")){
playerSign = "X"; // Wenn der Spieler O gewählt hat, dann wird der Bot X sein
allBox[randomBox].innerHTML = `<i class="${playerXIcon}"></i>`;
allBox[randomBox].setAttribute("id", playerSign);
players.classList.add("active");
}else{
allBox[randomBox].innerHTML = `<i class="${playerOIcon}"></i>`;
players.classList.remove("active");
allBox[randomBox].setAttribute("id", playerSign);
}
selectWinner(); // Wir prüfen, ob es einen Gewinner gibt
}
allBox[randomBox].style.pointerEvents = "none"; // Die Zelle kann nicht mehr ausgewählt werden
playBoard.style.pointerEvents = "auto"; // Wir erlauben dem Spieler, erneut auf die Zelle zu klicken
playerSign = "X"; // Zug zurück zum Spieler
}
}Die Funktion bot() verleiht dem Spiel Realismus, da der Bot automatisch eine Auswahl trifft und den Eindruck eines lebenden Gegners erweckt. Der Bot wählt eine zufällige verfügbare Zelle aus, was dem Spiel ein Element der Überraschung verleiht.
Bestimmung des Gewinners 🏆
Nach jedem Zug muss geprüft werden, ob es einen Gewinner gibt. Dazu wird die Funktion selectWinner verwendet:
function selectWinner(){
if(checkIdSign(1,2,3,playerSign) || checkIdSign(4,5,6, playerSign) || checkIdSign(7,8,9, playerSign) || checkIdSign(1,4,7, playerSign) || checkIdSign(2,5,8, playerSign) || checkIdSign(3,6,9, playerSign) || checkIdSign(1,5,9, playerSign) || checkIdSign(3,5,7, playerSign)){
runBot = false; // Wir stoppen den Bot, wenn jemand gewonnen hat
setTimeout(()=>{ // Anzeige des Ergebnisses nach 700 ms
resultBox.classList.add("show");
playBoard.classList.remove("show");
}, 700);
wonText.innerHTML = `Player <p>${playerSign}</p> won the game!`;
}else{
if(getIdVal(1) != "" && getIdVal(2) != "" && getIdVal(3) != "" && getIdVal(4) != "" && getIdVal(5) != "" && getIdVal(6) != "" && getIdVal(7) != "" && getIdVal(8) != "" && getIdVal(9) != ""){
runBot = false; // Wir stoppen den Bot, wenn es ein Unentschieden gibt
setTimeout(()=>{ // Anzeige des Ergebnisses nach 700 ms
resultBox.classList.add("show");
playBoard.classList.remove("show");
}, 700);
wonText.textContent = "The match ended in a draw!";
}
}
}Die Funktion selectWinner() prüft alle möglichen Gewinnkombinationen und ermittelt, ob es einen Gewinner gibt. Wenn alle Felder besetzt sind und niemand gewonnen hat, endet das Spiel unentschieden. Dies macht das Spiel vollständig und schließt jede Runde logisch ab.
Fazit 🚀
Herzlichen Glückwunsch! Jetzt weißt du, wie man mit HTML, CSS und JavaScript ein einfaches Tic-Tac-Toe-Spiel erstellt. Wir haben jeden Schritt durchlaufen, um eine schöne Benutzeroberfläche zu erstellen, Stile hinzuzufügen und die Spiellogik zu erstellen. Jetzt verstehst du, wie die Interaktionen zwischen HTML, CSS und JavaScript funktionieren und wie sie zusammen eine vollständige Webanwendung erstellen können.
Du kannst dieses Projekt als Grundlage für die Erstellung komplexerer Spiele verwenden oder sogar die Funktionalität dieses Spiels erweitern. Zum Beispiel einen Siegzähler hinzufügen, die Grafik verbessern oder das Spiel für mehrere Benutzer freigeben. Die Möglichkeiten sind endlos, und alles hängt nur von deiner Vorstellungskraft und Kreativität ab!
Den vollständigen Quellcode und möglicherweise weitere Verbesserungen finden Sie auf unserer GitHub.
Wenn Sie Fragen haben, zögern Sie nicht, diese zu stellen. Viel Glück beim Programmieren und mögen deine Projekte immer so interessant und aufregend sein! 👊🌟