Tic-tac-toe er et populært spill som bruker et 3×3 rutenett. Målet med spillet er å være den første spilleren som plasserer tre symboler i en rett horisontal, vertikal eller diagonal rad.
Du kan lage et Tic-tac-toe-spill som kjører i en nettleser ved hjelp av HTML, CSS og JavaScript. Du kan bruke HTML for å legge til innholdet som inneholder 3×3 rutenettet, og CSS for å legge til litt styling til spilldesignet.
Du kan deretter bruke JavaScript for spillets funksjonalitet. Dette inkluderer plassering av symboler, bytter mellom spillere og avgjørelse av hvem som vinner.
Hvordan lage brukergrensesnittet for Tic-Tac-Toe-spillet
Du kan lese og laste ned hele kildekoden for dette spillet fra dens GitHub-depot.
Tic-tac-toe er et av de mange spillene du kan lage når du skal lære å programmere. Det er lurt å praktisere et nytt språk eller miljø, som PICO-8 spillutviklingsmotoren.
For å lage et Tic-tac-toe-spill som kjører i en nettleser, må du legge til HTML for sideinnholdet. Du kan deretter style dette ved å bruke CSS.
- Lag en ny fil kalt "index.html".
- Inne i «index.html» legger du til den grunnleggende strukturen til en HTML-fil:
html>
<htmllang="no-US">
<hode>
<tittel>Tic Tac Toe-spilltittel>
hode>
<kropp>
kropp>
html> - Inne i HTML-kroppskoden legger du til en tabell som inneholder tre rader, med tre celler i hver rad:
<divklasse="container">
<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> - Lag en ny fil kalt "styles.css" i samme mappe som HTML-filen din.
- Inne i CSS-filen legger du til litt styling til 3 x 3 rutenettet ditt:
bord {
grensekollaps: kollapse;
margin: 0 auto;
}td {
bredde: 100px;
høyde: 100px;
tekstjustering: senter;
vertikaljuster: midten;
grense: 1pxfastsvart;
} - Koble CSS-filen til HTML-filen din ved å legge den til head-taggen:
<linkrel="stilark"type="tekst/css"href="styles.css">
Slik bytter du på å legge til symboler på spillebrettet
I spillet vil det være to spillere, hver med enten et "X"- eller "O"-symbol. Du kan legge til enten et "X"- eller "O"-symbol ved å klikke på en av rutenettcellene. Dette vil fortsette til en av dere har laget en rett horisontal, vertikal eller diagonal rad.
Du kan legge til denne funksjonaliteten ved å bruke JavaScript.
- Lag en JavaScript-fil kalt "script.js" i samme mappe som HTML- og CSS-filene dine.
- Koble JavaScript-filen til HTML-filen din ved å legge til skriptet nederst i body-taggen:
<kropp>
Din kode her
<manussrc="script.js">manus>
kropp> - Inne i JavaScript-filen legger du til en streng for å representere spillerens symbol. Dette kan enten være "X" eller "O". Som standard vil den første spilleren plassere en "X":
la spillerSymbol = "X"; - Legg til en annen variabel for å holde styr på om spillet er avsluttet:
la spillet avsluttet = falsk - Hver celle i HTML-tabellen har en ID mellom 1 og 9. For hver celle i tabellen legger du til en hendelseslytter som kjører hver gang en bruker klikker på cellen:
til (la jeg = 1; jeg <= 9; i++) {
dokument.getElementById (i.toString()).addEventListener(
"klikk",
funksjon() {
}
);
} - Inne i hendelseslytteren endrer du den indre HTML-koden for å vise gjeldende symbol. Sørg for å bruke en betinget JavaScript-setning for først å kontrollere at cellen er tom, og at spillet ikke er avsluttet ennå:
hvis (dette.innerHTML "" && !gameEnded) {
dette.innerHTML = spillerSymbol;
} - Legg til en klasse i HTML-elementet for å style symbolet som vises på rutenettet. Navnet på CSS-klassene vil enten være "X" eller "O", avhengig av symbolet:
dette.classList.add (playerSymbol.toLowerCase()); - Inne i "styles.css"-filen legger du til disse to nye klassene for "X"- og "O"-symbolene. "X" og "O" symbolene vil vises som forskjellige farger:
.x {
farge: blå;
skriftstørrelse: 80px;
}.o {
farge: rød;
skriftstørrelse: 80px;
} - I JavaScript-filen, etter å ha endret innerHTML for å vise symbolet, bytt symbolet. For eksempel, hvis spilleren nettopp plasserte en "X", endre det neste symbolet til "O":
hvis (spillersymbol "X")
spillerSymbol = "O"
ellers
spillerSymbol = "X" - For å kjøre spillet, åpne "index.html"-filen i en nettleser for å vise 3 x 3 rutenettet:
- Begynn å plassere symboler på rutenettet ved å klikke på cellene. Spillet vil veksle mellom "X" og "O" symboler:
Hvordan bestemme vinneren
For øyeblikket vil spillet fortsatt fortsette selv om en spiller har plassert tre påfølgende symboler. Du må legge til en sluttbetingelse for å sjekke dette etter hver sving.
- Inne i JavaScript-filen din legger du til en ny variabel for å lagre alle mulige "vinnende" posisjoner for 3 x 3 rutenettet. For eksempel er "[1,2,3]" den øverste raden, eller "[1,4,7]" er en diagonal rad.
la 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]
]; - Legg til en ny funksjon kalt checkWin():
funksjoncheckWin() {
} - Inne i funksjonen går du gjennom hver av de mulige vinnerposisjonene:
til (la jeg = 0; i < winPos.length; i++) {} - Inne i for-løkken, sjekk om alle cellene inneholder 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 vurderes til sann, er alle symboler på en rett linje. Vis en melding til brukeren i if-setningen. Du kan også endre stilen til HTML-elementet ved å legge til en CSS-klasse kalt "vinn":
dokument.getElementById (winPos[i][0]).classList.add("vinne");
dokument.getElementById (winPos[i][1]).classList.add("vinne");
dokument.getElementById (winPos[i][2]).classList.add("vinne");
spillet avsluttet = ekte;setTimeout(funksjon() {
varsel (spillerSymbol + "vinner!");
}, 500); - Legg til denne "vinn" CSS-klassen til "styles.css"-filen. Når spilleren vinner, vil den endre bakgrunnsfargen på vinnercellene til gul:
.vinne {
bakgrunnsfarge: gul;
} - Kall opp checkWin()-funksjonen hver gang en spiller har en tur, inne i hendelsesbehandleren lagt til i de forrige trinnene:
til (la jeg = 1; jeg <= 9; i++) {
// Hver gang en spiller klikker på en celle
dokument.getElementById (i.toString()).addEventListener(
"klikk",
funksjon() {
hvis (dette.innerHTML "" && !gameEnded) {
// Vis enten "X" eller "O" i cellen, og stil den
dette.innerHTML = spillerSymbol;
dette.classList.add (playerSymbol.toLowerCase());
// Sjekk om en spiller har vunnet
checkWin();
// Bytt symbolet til det andre for neste sving
hvis (spillersymbol "X")
spillerSymbol = "O"
ellers
spillerSymbol = "X"
}
}
);
}
Slik tilbakestiller du spillebrettet
Når en spiller har vunnet spillet, kan du tilbakestille spillebrettet. Du kan også tilbakestille spillebrettet ved uavgjort.
- I HTML-filen, etter tabellen, legg til en tilbakestillingsknapp:
<knappid="nullstille">Nullstilleknapp> - Legg til litt styling til tilbakestillingsknappen:
.container {
vise: bøye seg;
flex-retning: kolonne;
}#nullstille {
margin: 48px 40%;
polstring: 20px;
} - I JavaScript-filen legger du til en hendelsesbehandler som kjører hver gang brukeren klikker på tilbakestillingsknappen:
dokument.getElementById("nullstille").addEventListener(
"klikk",
funksjon() {}
); - For hver celle i rutenettet, hent HTML-elementet ved å bruke getElementById()-funksjonen. Tilbakestill innerHTML for å fjerne "O"- og "X"-symbolene, og fjern all annen CSS-stil:
til (la jeg = 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("vinne");
spillet avsluttet = falsk;
} - Kjør spillet ved å åpne filen "index.html" i en nettleser.
- Begynn å plassere "X" og "O" symboler på rutenettet. Prøv å få et av symbolene til å vinne.
- Trykk på tilbakestillingsknappen for å tilbakestille spillebrettet.
Lære JavaScript ved å lage spill
Du kan fortsette å forbedre programmeringsferdighetene dine ved å lage flere prosjekter i JavaScript. Det er enkelt å bygge enkle spill og verktøy i et nettmiljø ved å bruke åpne teknologier på tvers av plattformer som JavaScript og HTML.
Det er ingen bedre måte å forbedre programmeringen på enn å øve på å skrive programmer!
