Tic-tac-toe är ett populärt spel som använder ett 3×3-rutnät. Målet med spelet är att vara den första spelaren att placera tre symboler i en rak horisontell, vertikal eller diagonal rad.
Du kan skapa ett tic-tac-toe-spel som körs i en webbläsare med HTML, CSS och JavaScript. Du kan använda HTML för att lägga till innehållet som innehåller 3×3-rutnätet och CSS för att lägga till lite stil till speldesignen.
Du kan sedan använda JavaScript för spelets funktionalitet. Detta inkluderar att placera symboler, turas om mellan spelare och bestämma vem som vinner.
Hur man skapar gränssnittet för Tic-Tac-Toe-spelet
Du kan läsa och ladda ner hela källkoden för detta spel från dess GitHub-förråd.
Tic-tac-toe är ett av många spel som du kan göra när du lär dig programmera. Det är bra att öva på ett nytt språk eller en ny miljö, som spelutvecklingsmotorn PICO-8.
För att skapa ett tic-tac-toe-spel som körs i en webbläsare, måste du lägga till HTML för sidans innehåll. Du kan sedan styla detta med CSS.
- Skapa en ny fil som heter "index.html".
- Inuti "index.html", lägg till den grundläggande strukturen för en HTML-fil:
html>
<htmllang="sv-US">
<huvud>
<titel>Tic Tac Toe-speltitel>
huvud>
<kropp>
kropp>
html> - Inuti HTML body-taggen lägger du till en tabell som innehåller tre rader, med tre celler i varje rad:
<divklass="behållare">
<tabell>
<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>
tabell>
div> - Skapa en ny fil som heter "styles.css" i samma mapp som din HTML-fil.
- Inuti CSS-filen lägger du till lite stil till ditt 3 x 3-rutnät:
tabell {
gränskollaps: kollaps;
marginal: 0 bil;
}td {
bredd: 100px;
höjd: 100px;
textjustera: Centrum;
vertikaljustera: mitten;
gräns: 1pxfastsvart;
} - Länka CSS-filen till din HTML-fil genom att lägga till den i head-taggen:
<länkrel="stilmall"typ="text/css"href="styles.css">
Hur man turas om att lägga till symboler på spelplanen
I spelet kommer det att finnas två spelare, var och en med antingen en "X"- eller "O"-symbol. Du kan lägga till antingen ett "X"- eller "O"-symbol genom att klicka på en av rutnätscellerna. Detta kommer att fortsätta tills någon av er har skapat en rak horisontell, vertikal eller diagonal rad.
Du kan lägga till den här funktionen med JavaScript.
- Skapa en JavaScript-fil som heter "script.js" i samma mapp som dina HTML- och CSS-filer.
- Länka JavaScript-filen till din HTML-fil genom att lägga till skriptet längst ned i body-taggen:
<kropp>
Din kod här
<manussrc="script.js">manus>
kropp> - Inuti JavaScript-filen lägger du till en sträng som representerar spelarens symbol. Detta kan antingen vara "X" eller "O". Som standard kommer den första spelaren att placera ett "X":
låta spelareSymbol = "X"; - Lägg till en annan variabel för att hålla reda på om spelet har avslutats:
låta spelet avslutat = falsk - Varje cell i HTML-tabellen har ett ID mellan 1 och 9. För varje cell i tabellen lägger du till en händelseavlyssnare som körs när en användare klickar på cellen:
för (låta jag = 1; jag <= 9; i++) {
dokumentera.getElementById (i.toString()).addEventListener(
"klick",
fungera() {
}
);
} - Inuti händelseavlyssnaren ändrar du den inre HTML-koden för att visa den aktuella symbolen. Se till att använda ett JavaScript-villkorligt uttalande för att först se till att cellen är tom och att spelet ännu inte har avslutats:
om (detta.innerHTML "" && !gameEnded) {
detta.innerHTML = playerSymbol;
} - Lägg till en klass i HTML-elementet för att utforma symbolen som kommer att visas i rutnätet. Namnet på CSS-klasserna kommer antingen att vara "X" eller "O", beroende på symbolen:
detta.classList.add (playerSymbol.toLowerCase()); - Inuti filen "styles.css", lägg till dessa två nya klasser för symbolerna "X" och "O". Symbolerna "X" och "O" visas i olika färger:
.x {
Färg: blå;
textstorlek: 80px;
}.o {
Färg: röd;
textstorlek: 80px;
} - I JavaScript-filen, efter att ha ändrat innerHTML för att visa symbolen, byt ut symbolen. Till exempel, om spelaren precis satt ett "X", ändra nästa symbol till "O":
om (spelaresymbol "X")
spelareSymbol = "O"
annan
spelareSymbol = "X" - För att köra spelet, öppna filen "index.html" i en webbläsare för att visa rutnätet 3 x 3:
- Börja placera symboler på rutnätet genom att klicka på cellerna. Spelet kommer att växla mellan "X" och "O" symboler:
Hur man avgör vinnaren
För tillfället kommer spelet fortfarande att fortsätta även om en spelare har placerat tre på varandra följande symboler. Du måste lägga till ett slutvillkor för att kontrollera detta efter varje varv.
- Inuti din JavaScript-fil lägger du till en ny variabel för att lagra alla möjliga "vinnande" positioner för 3 x 3-rutnätet. Till exempel är "[1,2,3]" den översta raden eller "[1,4,7]" är en diagonal rad.
låta 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]
]; - Lägg till en ny funktion som heter checkWin():
fungeracheckWin() {
} - Inuti funktionen, gå igenom var och en av de möjliga vinnande positionerna:
för (låta jag = 0; i < winPos.length; i++) {} - Inuti for-slingan, kontrollera om alla celler innehåller spelarens symbol:
om (
dokumentera.getElementById (winPos[i][0]).innerHTML playerSymbol &&
dokumentera.getElementById (winPos[i][1]).innerHTML playerSymbol &&
dokumentera.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Om villkoret utvärderas till sant, är alla symboler i en rak linje. Visa ett meddelande för användaren inuti if-satsen. Du kan också ändra stilen på HTML-elementet genom att lägga till en CSS-klass som heter "win":
dokumentera.getElementById (winPos[i][0]).classList.add("vinna");
dokumentera.getElementById (winPos[i][1]).classList.add("vinna");
dokumentera.getElementById (winPos[i][2]).classList.add("vinna");
spelet avslutat = Sann;setTimeout(fungera() {
varning (playerSymbol + "vinner!");
}, 500); - Lägg till denna "vinn" CSS-klass till filen "styles.css". När spelaren vinner kommer den att ändra bakgrundsfärgen på de vinnande cellerna till gul:
.vinna {
bakgrundsfärg: gul;
} - Anropa checkWin()-funktionen varje gång en spelare har en tur, i händelsehanteraren som lagts till i de föregående stegen:
för (låta jag = 1; jag <= 9; i++) {
// När en spelare klickar på en cell
dokumentera.getElementById (i.toString()).addEventListener(
"klick",
fungera() {
om (detta.innerHTML "" && !gameEnded) {
// Visa antingen "X" eller "O" i cellen och formatera den
detta.innerHTML = playerSymbol;
detta.classList.add (playerSymbol.toLowerCase());
// Kontrollera om en spelare har vunnit
checkWin();
// Byt symbolen till den andra för nästa tur
om (spelaresymbol "X")
spelareSymbol = "O"
annan
spelareSymbol = "X"
}
}
);
}
Hur man återställer spelplanen
När en spelare har vunnit spelet kan du återställa spelplanen. Du kan även återställa spelplanen vid oavgjort.
- I HTML-filen, efter tabellen, lägg till en återställningsknapp:
<knappid="återställa">Återställaknapp> - Lägg till lite styling till återställningsknappen:
.behållare {
visa: böja;
flex-riktning: kolumn;
}#återställa {
marginal: 48px 40%;
stoppning: 20px;
} - Lägg till en händelsehanterare i JavaScript-filen som körs när användaren klickar på återställningsknappen:
dokumentera.getElementById("återställa").addEventListener(
"klick",
fungera() {}
); - För varje cell i rutnätet, hämta HTML-elementet med funktionen getElementById(). Återställ innerHTML för att ta bort "O"- och "X"-symbolerna och ta bort all annan CSS-stil:
för (låta jag = 1; jag <= 9; i++) {
dokumentera.getElementById (i.toString()).innerHTML = "";
dokumentera.getElementById (i.toString()).classList.remove("x");
dokumentera.getElementById (i.toString()).classList.remove("o");
dokumentera.getElementById (i.toString()).classList.remove("vinna");
spelet avslutat = falsk;
} - Kör spelet genom att öppna filen "index.html" i en webbläsare.
- Börja placera "X" och "O" symboler på rutnätet. Försök att få en av symbolerna att vinna.
- Tryck på återställningsknappen för att återställa spelplanen.
Lär dig JavaScript genom att skapa spel
Du kan fortsätta att förbättra dina programmeringsfärdigheter genom att skapa fler projekt i JavaScript. Det är enkelt att bygga enkla spel och verktyg i en webbmiljö, med hjälp av plattformsoberoende, öppna teknologier som JavaScript och HTML.
Det finns inget bättre sätt att förbättra din programmering än att träna på att skriva program!
