Tic-tac-toe er et populært spil, der bruger et 3×3-gitter. Målet med spillet er at være den første spiller, der placerer tre symboler i en lige vandret, lodret eller diagonal række.
Du kan oprette et tic-tac-toe-spil, der kører i en webbrowser ved hjælp af HTML, CSS og JavaScript. Du kan bruge HTML til at tilføje indholdet, der indeholder 3×3-gitteret, og CSS til at tilføje noget styling til spildesignet.
Du kan derefter bruge JavaScript til spillets funktionalitet. Dette inkluderer placering af symboler, skift mellem spillere og beslutning om, hvem der vinder.
Sådan opretter du brugergrænsefladen til Tic-Tac-Toe-spillet
Du kan læse og downloade den fulde kildekode til dette spil fra dets GitHub-depot.
Tic-tac-toe er et af de mange spil, du kan lave, når du skal lære at programmere. Det er godt at øve sig i et nyt sprog eller miljø, f.eks PICO-8 spiludviklingsmotoren.
For at oprette et tic-tac-toe-spil, der kører i en webbrowser, skal du tilføje HTML til sideindholdet. Du kan derefter style dette ved hjælp af CSS.
- Opret en ny fil kaldet "index.html".
- Tilføj den grundlæggende struktur for en HTML-fil i "index.html":
html>
<htmllang="da-US">
<hoved>
<titel>Tic Tac Toe spiltitel>
hoved>
<legeme>
legeme>
html> - Tilføj en tabel, der indeholder tre rækker, med tre celler i hver række inde i HTML-body-tagget:
<divklasse="beholder">
<bord>
<tr>
<tdid="1">td>
<tdid="2">td>
<tdid="3">td>
tr>
<tr>
<tdid="4">td>
<tdid="5">td>
<tdid="6">td>
tr>
<tr>
<tdid="7">td>
<tdid="8">td>
<tdid="9">td>
tr>
bord>
div> - I samme mappe som din HTML-fil skal du oprette en ny fil kaldet "styles.css".
- Tilføj lidt styling til dit 3 gange 3-gitter inde i CSS-filen:
bord {
grænse-kollaps: bryder sammen;
margen: 0 auto;
}td {
bredde: 100px;
højde: 100px;
tekstjustering: centrum;
lodret justere: midten;
grænse: 1pxsolidsort;
} - Link CSS-filen til din HTML-fil ved at tilføje den til head-tagget:
<linkrel="stylesheet"type="tekst/css"href="styles.css">
Sådan skiftes til at tilføje symboler til spillepladen
I spillet vil der være to spillere, hver med enten et "X" eller "O" symbol. Du kan tilføje enten et "X" eller "O" symbol ved at klikke på en af gittercellerne. Dette vil fortsætte, indtil en af jer har oprettet en lige vandret, lodret eller diagonal række.
Du kan tilføje denne funktionalitet ved hjælp af JavaScript.
- I samme mappe som dine HTML- og CSS-filer skal du oprette en JavaScript-fil kaldet "script.js".
- Link JavaScript-filen til din HTML-fil ved at tilføje scriptet til bunden af body-tagget:
<legeme>
Din kode her
<manuskriptsrc="script.js">manuskript>
legeme> - Tilføj en streng til at repræsentere spillerens symbol inde i JavaScript-filen. Dette kan enten være "X" eller "O". Som standard vil den første spiller placere et "X":
lade spillersymbol = "X"; - Tilføj en anden variabel for at holde styr på, om spillet er slut:
lade spil afsluttet = falsk - Hver celle i HTML-tabellen har et ID mellem 1 og 9. For hver celle i tabellen skal du tilføje en hændelseslytter, der kører, hver gang en bruger klikker på cellen:
til (lade i = 1; jeg <= 9; i++) {
dokument.getElementById (i.toString()).addEventListener(
"klik",
fungere() {
}
);
} - Inde i begivenhedslytteren skal du ændre den indre HTML for at vise det aktuelle symbol. Sørg for at bruge en JavaScript betinget erklæring for først at sikre, at cellen er tom, og at spillet endnu ikke er afsluttet:
hvis (det her.innerHTML "" && !gameEnded) {
det her.innerHTML = playerSymbol;
} - Tilføj en klasse til HTML-elementet for at style symbolet, der vises på gitteret. Navnet på CSS-klasserne vil enten være "X" eller "O", afhængigt af symbolet:
det her.classList.add (playerSymbol.toLowerCase()); - Tilføj disse to nye klasser til symbolerne "X" og "O" i filen "styles.css". Symbolerne "X" og "O" vises som forskellige farver:
.x {
farve: blå;
skriftstørrelse: 80px;
}.o {
farve: rød;
skriftstørrelse: 80px;
} - I JavaScript-filen, efter at have ændret den indre HTML for at vise symbolet, skal du bytte symbolet. For eksempel, hvis spilleren lige har sat et "X", skal du ændre det næste symbol til "O":
hvis (spillersymbol "X")
spillersymbol = "O"
andet
spillersymbol = "X" - For at køre spillet skal du åbne filen "index.html" i en webbrowser for at vise 3 gange 3-gitteret:
- Start med at placere symboler på gitteret ved at klikke på cellerne. Spillet vil veksle mellem "X" og "O" symboler:
Sådan finder du vinderen
I øjeblikket vil spillet stadig fortsætte, selvom en spiller har placeret tre på hinanden følgende symboler. Du skal tilføje en slutbetingelse for at kontrollere dette efter hver tur.
- Tilføj en ny variabel i din JavaScript-fil for at gemme alle mulige "vindende" positioner for 3 gange 3 gitteret. For eksempel er "[1,2,3]" den øverste række, eller "[1,4,7]" er en diagonal række.
lade winPos = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - Tilføj en ny funktion kaldet checkWin():
fungerecheckWin() {
} - Inde i funktionen skal du gå gennem hver af de mulige vinderpositioner:
til (lade i = 0; i < winPos.length; i++) {} - Inde i for-løkken skal du kontrollere, om alle celler indeholder spillerens symbol:
hvis (
dokument.getElementById (winPos[i][0]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][1]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Hvis betingelsen evalueres til sand, er alle symboler i en lige linje. Vis en besked til brugeren inde i if-sætningen. Du kan også ændre stilen af HTML-elementet ved at tilføje en CSS-klasse kaldet "win":
dokument.getElementById (winPos[i][0]).classList.add("vinde");
dokument.getElementById (winPos[i][1]).classList.add("vinde");
dokument.getElementById (winPos[i][2]).classList.add("vinde");
spil afsluttet = rigtigt;setTimeout(fungere() {
advarsel (playerSymbol + "vinder!");
}, 500); - Tilføj denne "vind" CSS-klasse til filen "styles.css". Når spilleren vinder, vil den ændre baggrundsfarven på de vindende celler til gul:
.vinde {
baggrundsfarve: gul;
} - Kald funktionen checkWin() hver gang en spiller har en tur, inde i hændelseshandleren tilføjet i de foregående trin:
til (lade i = 1; jeg <= 9; i++) {
// Hver gang en spiller klikker på en celle
dokument.getElementById (i.toString()).addEventListener(
"klik",
fungere() {
hvis (det her.innerHTML "" && !gameEnded) {
// Vis enten "X" eller "O" i cellen, og stil den
det her.innerHTML = playerSymbol;
det her.classList.add (playerSymbol.toLowerCase());
// Tjek om en spiller har vundet
checkWin();
// Skift symbolet til det andet til næste tur
hvis (spillersymbol "X")
spillersymbol = "O"
andet
spillersymbol = "X"
}
}
);
}
Sådan nulstiller du spillepladen
Når en spiller har vundet spillet, kan du nulstille spillepladen. Du kan også nulstille spillepladen i tilfælde af uafgjort.
- Tilføj en nulstillingsknap i HTML-filen efter tabellen:
<knapid="Nulstil">Nulstilknap> - Tilføj lidt styling til nulstillingsknappen:
.beholder {
Skærm: bøje;
flex-retning: kolonne;
}#Nulstil {
margen: 48px 40%;
polstring: 20px;
} - Tilføj en hændelseshandler i JavaScript-filen, der kører, hver gang brugeren klikker på nulstillingsknappen:
dokument.getElementById("Nulstil").addEventListener(
"klik",
fungere() {}
); - For hver celle i gitteret skal du hente HTML-elementet ved hjælp af getElementById()-funktionen. Nulstil den indre HTML for at fjerne "O"- og "X"-symbolerne, og fjern al anden CSS-styling:
til (lade i = 1; jeg <= 9; i++) {
dokument.getElementById (i.toString()).innerHTML = "";
dokument.getElementById (i.toString()).classList.remove("x");
dokument.getElementById (i.toString()).classList.remove("o");
dokument.getElementById (i.toString()).classList.remove("vinde");
spil afsluttet = falsk;
} - Kør spillet ved at åbne filen "index.html" i en webbrowser.
- Begynd at placere "X" og "O" symboler på gitteret. Prøv at få et af symbolerne til at vinde.
- Tryk på nulstillingsknappen for at nulstille spillepladen.
Lær JavaScript ved at lave spil
Du kan fortsætte med at forbedre dine programmeringsevner ved at oprette flere projekter i JavaScript. Det er nemt at bygge enkle spil og værktøjer i et webmiljø ved at bruge åbne teknologier på tværs af platforme som JavaScript og HTML.
Der er ingen bedre måde at forbedre din programmering på end at øve sig i at skrive programmer!
