Tic-tac-toe je oblíbená hra, která využívá mřížku 3×3. Cílem hry je být prvním hráčem, který umístí tři symboly do rovné horizontální, vertikální nebo diagonální řady.
Můžete vytvořit hru Tic-tac-toe, která běží ve webovém prohlížeči pomocí HTML, CSS a JavaScriptu. Pomocí HTML můžete přidat obsah, který obsahuje mřížku 3×3, a pomocí CSS přidat do herního designu nějaký styl.
Poté můžete použít JavaScript pro funkčnost hry. To zahrnuje umisťování symbolů, střídání hráčů a rozhodování o tom, kdo vyhraje.
Jak vytvořit uživatelské rozhraní pro hru Tic-Tac-Toe
Úplný zdrojový kód této hry si můžete přečíst a stáhnout z něj úložiště GitHub.
Piškvorky jsou jednou z mnoha her, které můžete dělat, když se učíte programovat. Je dobré si procvičit nový jazyk nebo prostředí, např engine pro vývoj her PICO-8.
Chcete-li vytvořit hru Tic-tac-toe, která běží ve webovém prohlížeči, budete muset přidat HTML pro obsah stránky. To pak můžete stylizovat pomocí CSS.
- Vytvořte nový soubor s názvem „index.html“.
- Do „index.html“ přidejte základní strukturu souboru HTML:
html>
<htmllang="en-US">
<hlava>
<titul>Hra Tic Tac Toetitul>
hlava>
<tělo>
tělo>
html> - Do značky HTML body přidejte tabulku, která obsahuje tři řádky se třemi buňkami v každém řádku:
<divtřída="kontejner">
<stůl>
<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>
stůl>
div> - Ve stejné složce jako váš soubor HTML vytvořte nový soubor s názvem „styles.css“.
- Uvnitř souboru CSS přidejte do mřížky 3 x 3 styl:
stůl {
border-kolaps: kolaps;
okraj: 0 auto;
}td {
šířka: 100px;
výška: 100px;
zarovnání textu: centrum;
svisle zarovnat: střední;
okraj: 1pxpevnýČerná;
} - Propojte soubor CSS se souborem HTML jeho přidáním do značky head:
<odkazrel="stylesheet"typ="text/css"href="styles.css">
Jak se střídat v přidávání symbolů na herní plán
Ve hře budou dva hráči, každý se symbolem „X“ nebo „O“. Kliknutím na jednu z buněk mřížky můžete přidat symbol „X“ nebo „O“. Toto bude pokračovat, dokud jeden z vás nevytvoří rovnou horizontální, vertikální nebo diagonální řadu.
Tuto funkci můžete přidat pomocí JavaScriptu.
- Ve stejné složce jako soubory HTML a CSS vytvořte soubor JavaScript s názvem „script.js“.
- Propojte soubor JavaScript se svým souborem HTML přidáním skriptu do spodní části značky body:
<tělo>
Váš kód zde
<skriptsrc="script.js">skript>
tělo> - Do souboru JavaScript přidejte řetězec představující symbol hráče. Může to být buď "X" nebo "O". Ve výchozím nastavení umístí první hráč „X“:
nechat PlayerSymbol = "X"; - Přidejte další proměnnou, abyste měli přehled o tom, zda hra skončila:
nechat hra ukončena = Nepravdivé - Každá buňka v tabulce HTML má ID mezi 1 a 9. Pro každou buňku v tabulce přidejte posluchač události, který se spustí vždy, když uživatel klikne na buňku:
pro (nechat i = 1; i <= 9; i++) {
dokument.getElementById (i.toString()).addEventListener(
"kliknout",
funkce() {
}
);
} - Uvnitř posluchače událostí změňte vnitřní kód HTML tak, aby zobrazoval aktuální symbol. Ujistěte se, že používáte podmíněný příkaz JavaScriptu nejprve se ujistěte, že je buňka prázdná a že hra ještě neskončila:
-li (tento.innerHTML "" && !hraUkončena) {
tento.innerHTML = hráčSymbol;
} - Přidejte třídu do prvku HTML, abyste stylizovali symbol, který se zobrazí na mřížce. Název tříd CSS bude buď „X“ nebo „O“, v závislosti na symbolu:
tento.classList.add (playerSymbol.toLowerCase()); - Do souboru "styles.css" přidejte tyto dvě nové třídy pro symboly "X" a "O". Symboly "X" a "O" se zobrazí v různých barvách:
.X {
barva: modrý;
velikost písma: 80px;
}.Ó {
barva: Červené;
velikost písma: 80px;
} - V souboru JavaScript po změně innerHTML tak, aby se symbol zobrazoval, symbol vyměňte. Pokud například hráč právě umístil „X“, změňte další symbol na „O“:
-li (symbol hráče "X")
PlayerSymbol = "Ó"
jiný
PlayerSymbol = "X" - Chcete-li hru spustit, otevřete ve webovém prohlížeči soubor „index.html“ a zobrazte mřížku 3x3:
- Začněte umísťovat symboly na mřížku kliknutím na buňky. Ve hře se budou střídat symboly „X“ a „O“:
Jak určit vítěze
V tuto chvíli bude hra stále pokračovat, i když hráč umístil tři po sobě jdoucí symboly. Chcete-li to zkontrolovat po každém tahu, budete muset přidat koncovou podmínku.
- Do souboru JavaScript přidejte novou proměnnou pro uložení všech možných „vítězných“ pozic pro mřížku 3 x 3. Například "[1,2,3]" je horní řádek nebo "[1,4,7]" je diagonální řádek.
nechat 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]
]; - Přidejte novou funkci s názvem checkWin():
funkcecheckWin() {
} - Uvnitř funkce procházejte každou z možných výherních pozic:
pro (nechat i = 0; i < winPos.length; i++) {} - Uvnitř cyklu for zkontrolujte, zda všechny buňky obsahují symbol hráče:
-li (
dokument.getElementById (winPos[i][0]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][1]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][2]).vnitřníSymbol přehrávače HTML
) {} - Pokud se podmínka vyhodnotí jako pravdivá, pak jsou všechny symboly v přímce. Uvnitř příkazu if zobrazte zprávu pro uživatele. Můžete také změnit styl prvku HTML přidáním třídy CSS s názvem „win“:
dokument.getElementById (winPos[i][0]).classList.add("vyhrát");
dokument.getElementById (winPos[i][1]).classList.add("vyhrát");
dokument.getElementById (winPos[i][2]).classList.add("vyhrát");
hra ukončena = skutečný;setTimeout(funkce() {
upozornění (symbol hráče + "vyhrává!");
}, 500); - Přidejte tuto „win“ třídu CSS do souboru „styles.css“. Když hráč vyhraje, změní barvu pozadí výherních buněk na žlutou:
.vyhrát {
barva pozadí: žlutá;
} - Volejte funkci checkWin() pokaždé, když je hráč na tahu, uvnitř obsluhy události přidané v předchozích krocích:
pro (nechat i = 1; i <= 9; i++) {
// Kdykoli hráč klikne na buňku
dokument.getElementById (i.toString()).addEventListener(
"kliknout",
funkce() {
-li (tento.innerHTML "" && !hraUkončena) {
// Zobrazte v buňce buď "X" nebo "O" a upravte její styl
tento.innerHTML = hráčSymbol;
tento.classList.add (playerSymbol.toLowerCase());
// Zkontrolujte, zda hráč vyhrál
checkWin();
// Pro další kolo vyměňte symbol za jiný
-li (symbol hráče "X")
PlayerSymbol = "Ó"
jiný
PlayerSymbol = "X"
}
}
);
}
Jak resetovat herní desku
Jakmile hráč vyhraje hru, můžete resetovat herní plán. V případě nerozhodného výsledku můžete také resetovat herní plán.
- V souboru HTML za tabulku přidejte tlačítko reset:
<knoflíkid="resetovat">Resetovatknoflík> - Přidejte k tlačítku resetování nějaký styl:
.kontejner {
Zobrazit: flex;
flex-direction: sloupec;
}#reset {
okraj: 48px 40%;
vycpávka: 20px;
} - Do souboru JavaScript přidejte obslužnou rutinu události, která se spustí vždy, když uživatel klikne na tlačítko reset:
dokument.getElementById("resetovat").addEventListener(
"kliknout",
funkce() {}
); - Pro každou buňku v mřížce získejte prvek HTML pomocí funkce getElementById(). Resetujte innerHTML, abyste odstranili symboly "O" a "X" a odstranili všechny ostatní styly CSS:
pro (nechat i = 1; i <= 9; i++) {
dokument.getElementById (i.toString()).innerHTML = "";
dokument.getElementById (i.toString()).classList.remove("X");
dokument.getElementById (i.toString()).classList.remove("Ó");
dokument.getElementById (i.toString()).classList.remove("vyhrát");
hra ukončena = Nepravdivé;
} - Spusťte hru otevřením souboru „index.html“ ve webovém prohlížeči.
- Začněte umísťovat symboly "X" a "O" na mřížku. Pokuste se vyhrát jeden ze symbolů.
- Stisknutím resetovacího tlačítka resetujete herní desku.
Učte se JavaScript tvorbou her
Své programovací dovednosti můžete nadále zlepšovat vytvářením dalších projektů v JavaScriptu. Je snadné vytvářet jednoduché hry a nástroje ve webovém prostředí pomocí multiplatformních otevřených technologií, jako je JavaScript a HTML.
Není lepší způsob, jak zlepšit své programování, než cvičit psaní programů!
