Tic-tac-toe is een populair spel dat een 3×3 raster gebruikt. Het doel van het spel is om als eerste speler drie symbolen in een rechte horizontale, verticale of diagonale rij te plaatsen.
U kunt een Tic-tac-toe-spel maken dat in een webbrowser wordt uitgevoerd met behulp van HTML, CSS en JavaScript. U kunt HTML gebruiken om de inhoud toe te voegen die het 3×3-raster bevat, en CSS om wat styling aan het spelontwerp toe te voegen.
U kunt dan JavaScript gebruiken voor de functionaliteit van het spel. Dit omvat het plaatsen van symbolen, om beurten wisselen tussen spelers en beslissen wie er wint.
Hoe de gebruikersinterface voor het Tic-Tac-Toe-spel te maken
Je kunt de volledige broncode voor deze game lezen en downloaden van zijn GitHub-opslagplaats.
Boter-kaas-en-eieren is een van de vele spelletjes die je kunt maken als je leert programmeren. Het is goed om bijvoorbeeld een nieuwe taal of omgeving te oefenen de PICO-8 game-ontwikkelingsengine.
Om een Boter-kaas-en-eieren-spel te maken dat in een webbrowser draait, moet je HTML toevoegen voor de pagina-inhoud. U kunt dit vervolgens stylen met behulp van CSS.
- Maak een nieuw bestand met de naam "index.html".
- Voeg binnen "index.html" de basisstructuur van een HTML-bestand toe:
html>
<htmllang="nl-VS">
<hoofd>
<titel>Boter-kaas-en-eieren-speltitel>
hoofd>
<lichaam>
lichaam>
html> - Voeg binnen de HTML body-tag een tabel toe die drie rijen bevat, met drie cellen in elke rij:
<divklas="houder">
<tafel>
<tr>
<tdID kaart="1">td>
<tdID kaart="2">td>
<tdID kaart="3">td>
tr>
<tr>
<tdID kaart="4">td>
<tdID kaart="5">td>
<tdID kaart="6">td>
tr>
<tr>
<tdID kaart="7">td>
<tdID kaart="8">td>
<tdID kaart="9">td>
tr>
tafel>
div> - Maak in dezelfde map als uw HTML-bestand een nieuw bestand met de naam "styles.css".
- Voeg in het CSS-bestand wat styling toe aan uw raster van 3 bij 3:
tafel {
grens-ineenstorting: instorten;
marge: 0 auto;
}td {
breedte: 100px;
hoogte: 100px;
tekst uitlijnen: centrum;
verticaal uitlijnen: midden;
grens: 1pxstevigzwart;
} - Koppel het CSS-bestand aan uw HTML-bestand door het toe te voegen aan de head-tag:
<koppelingrel="stijlblad"type="tekst/css"href="stijlen.css">
Hoe om de beurt symbolen aan het speelbord toe te voegen
In het spel zijn er twee spelers, elk met een "X" of "O" symbool. U kunt een "X"- of "O"-symbool toevoegen door op een van de rastercellen te klikken. Dit gaat door totdat een van jullie een rechte horizontale, verticale of diagonale rij heeft gemaakt.
U kunt deze functionaliteit toevoegen met behulp van JavaScript.
- Maak in dezelfde map als uw HTML- en CSS-bestanden een JavaScript-bestand met de naam "script.js".
- Koppel het JavaScript-bestand aan uw HTML-bestand door het script onderaan de body-tag toe te voegen:
<lichaam>
Uw code hier
<scriptsrc="script.js">script>
lichaam> - Voeg in het JavaScript-bestand een tekenreeks toe om het symbool van de speler weer te geven. Dit kan "X" of "O" zijn. Standaard plaatst de eerste speler een "X":
laten playerSymbol = "X"; - Voeg nog een variabele toe om bij te houden of het spel is afgelopen:
laten spel beëindigd = vals - Elke cel in de HTML-tabel heeft een ID tussen 1 en 9. Voeg voor elke cel in de tabel een gebeurtenislistener toe die wordt uitgevoerd wanneer een gebruiker op de cel klikt:
voor (laten ik = 1; ik <= 9; ik++) {
document.getElementById (i.toString()).addEventListener(
"Klik",
functie() {
}
);
} - Verander binnen de gebeurtenislistener de interne HTML om het huidige symbool weer te geven. Zorg ervoor dat u gebruikt een JavaScript-voorwaardelijke verklaring om er eerst voor te zorgen dat de cel leeg is en dat het spel nog niet is afgelopen:
als (dit.innerHTML "" && !gameEnded) {
dit.innerHTML = spelersymbool;
} - Voeg een klasse toe aan het HTML-element om het symbool op te maken dat op het raster wordt weergegeven. De naam van de CSS-klassen is "X" of "O", afhankelijk van het symbool:
dit.classList.add (playerSymbol.toLowerCase()); - Voeg in het bestand "styles.css" deze twee nieuwe klassen toe voor de symbolen "X" en "O". De symbolen "X" en "O" worden in verschillende kleuren weergegeven:
.X {
kleur: blauw;
lettertypegrootte: 80px;
}.O {
kleur: rood;
lettertypegrootte: 80px;
} - In het JavaScript-bestand, na het wijzigen van de innerHTML om het symbool weer te geven, verwisselt u het symbool. Als de speler bijvoorbeeld net een "X" heeft geplaatst, verandert u het volgende symbool in "O":
als (spelerSymbol "X")
playerSymbol = "O"
anders
playerSymbol = "X" - Om het spel uit te voeren, opent u het bestand "index.html" in een webbrowser om het raster van 3 bij 3 weer te geven:
- Begin met het plaatsen van symbolen op het raster door op de cellen te klikken. Het spel wisselt af tussen "X"- en "O"-symbolen:
Hoe de winnaar te bepalen
Op dit moment gaat het spel gewoon door, ook als een speler drie opeenvolgende symbolen heeft geplaatst. Je moet een eindvoorwaarde toevoegen om dit na elke beurt te controleren.
- Voeg in uw JavaScript-bestand een nieuwe variabele toe om alle mogelijke "winnende" posities voor het raster van 3 bij 3 op te slaan. Bijvoorbeeld: "[1,2,3]" is de bovenste rij, of "[1,4,7]" is een diagonale rij.
laten 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]
]; - Voeg een nieuwe functie toe genaamd checkWin():
functiecheckWin() {
} - Loop binnen de functie door elk van de mogelijke winnende posities:
voor (laten ik = 0; i < winPos.lengte; ik++) {} - Controleer in de for-lus of alle cellen het spelersymbool bevatten:
als (
document.getElementById (winPos[i][0]).innerHTML-spelerSymbool &&
document.getElementById (winPos[i][1]).innerHTML-spelerSymbool &&
document.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Als de voorwaarde waar is, staan alle symbolen in een rechte lijn. Toon binnen de if-instructie een bericht voor de gebruiker. U kunt ook de stijl van het HTML-element wijzigen door een CSS-klasse met de naam "win" toe te voegen:
document.getElementById (winPos[i][0]).classList.add("winnen");
document.getElementById (winPos[i][1]).classList.add("winnen");
document.getElementById (winPos[i][2]).classList.add("winnen");
spel beëindigd = WAAR;setTimeout(functie() {
waarschuwing (playerSymbol + "wint!");
}, 500); - Voeg deze "win" CSS-klasse toe aan het bestand "styles.css". Wanneer de speler wint, verandert de achtergrondkleur van de winnende cellen in geel:
.winnen {
Achtergrond kleur: geel;
} - Roep de functie checkWin() aan elke keer dat een speler aan de beurt is, binnen de gebeurtenishandler die in de vorige stappen is toegevoegd:
voor (laten ik = 1; ik <= 9; ik++) {
// Wanneer een speler op een vakje klikt
document.getElementById (i.toString()).addEventListener(
"Klik",
functie() {
als (dit.innerHTML "" && !gameEnded) {
// Geef "X" of "O" weer in de cel en stijl deze
dit.innerHTML = spelersymbool;
dit.classList.add (playerSymbol.toLowerCase());
// Controleer of een speler heeft gewonnen
checkWin();
// Verwissel het symbool naar het andere voor de volgende beurt
als (spelerSymbol "X")
playerSymbol = "O"
anders
playerSymbol = "X"
}
}
);
}
Hoe het speelbord te resetten
Zodra een speler het spel heeft gewonnen, kun je het spelbord resetten. Je kunt het spelbord ook resetten in het geval van een gelijkspel.
- Voeg in het HTML-bestand, na de tabel, een resetknop toe:
<knopID kaart="terugstellen">Resettenknop> - Voeg wat styling toe aan de resetknop:
.container {
weergave: buigen;
flex-richting: kolom;
}#resetten {
marge: 48px 40%;
opvulling: 20px;
} - Voeg in het JavaScript-bestand een gebeurtenishandler toe die wordt uitgevoerd wanneer de gebruiker op de resetknop klikt:
document.getElementById("terugstellen").addEventListener(
"Klik",
functie() {}
); - Haal voor elke cel in het raster het HTML-element op met de functie getElementById(). Reset de innerHTML om de "O"- en "X"-symbolen te verwijderen, en verwijder alle andere CSS-stijlen:
voor (laten ik = 1; ik <= 9; ik++) {
document.getElementById (i.toString()).innerHTML = "";
document.getElementById (i.toString()).classList.remove("X");
document.getElementById (i.toString()).classList.remove("O");
document.getElementById (i.toString()).classList.remove("winnen");
spel beëindigd = vals;
} - Voer het spel uit door het bestand "index.html" in een webbrowser te openen.
- Begin met het plaatsen van "X" en "O" symbolen op het rooster. Probeer een van de symbolen te laten winnen.
- Druk op de resetknop om het spelbord te resetten.
JavaScript leren door spellen te maken
U kunt uw programmeervaardigheden blijven verbeteren door meer projecten in JavaScript te maken. Het is gemakkelijk om eenvoudige games en tools te bouwen in een webomgeving, met behulp van platformonafhankelijke, open technologieën zoals JavaScript en HTML.
Er is geen betere manier om je programmering te verbeteren dan door te oefenen met het schrijven van programma's!