Tic-tac-toe je populárna hra, ktorá využíva mriežku 3×3. Cieľom hry je byť prvým hráčom, ktorý umiestni tri symboly do rovného horizontálneho, vertikálneho alebo diagonálneho radu.
Môžete vytvoriť hru Tic-tac-toe, ktorá beží vo webovom prehliadači pomocou HTML, CSS a JavaScriptu. Môžete použiť HTML na pridanie obsahu, ktorý obsahuje mriežku 3×3, a CSS na pridanie nejakého štýlu do herného dizajnu.
Potom môžete použiť JavaScript pre funkčnosť hry. To zahŕňa umiestňovanie symbolov, striedanie hráčov a rozhodovanie o tom, kto vyhrá.
Ako vytvoriť používateľské rozhranie pre hru Tic-Tac-Toe
Úplný zdrojový kód tejto hry si môžete prečítať a stiahnuť z nej úložisko GitHub.
Piškvorky sú jednou z mnohých hier, ktoré si môžete vytvoriť, keď sa naučíte programovať. Je dobré precvičiť si nový jazyk alebo prostredie, napr herný vývojový engine PICO-8.
Ak chcete vytvoriť hru Tic-tac-toe, ktorá beží vo webovom prehliadači, budete musieť pridať HTML pre obsah stránky. Potom to môžete upraviť pomocou CSS.
- Vytvorte nový súbor s názvom „index.html“.
- Do „index.html“ pridajte základnú štruktúru súboru HTML:
html>
<htmllang="en-US">
<hlavu>
<titul>Hra Tic Tac Toetitul>
hlavu>
<telo>
telo>
html> - Do značky HTML body pridajte tabuľku, ktorá obsahuje tri riadky s tromi bunkami v každom riadku:
<divtrieda="kontajner">
<tabuľky>
<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>
tabuľky>
div> - V rovnakom priečinku ako váš súbor HTML vytvorte nový súbor s názvom „styles.css“.
- Vnútri súboru CSS pridajte štýl do mriežky 3 x 3:
tabuľky {
border-collapse: kolaps;
marža: 0 auto;
}td {
šírka: 100px;
výška: 100px;
zarovnanie textu: stred;
vertikálne zarovnať: stred;
hranica: 1pxpevnýčierna;
} - Prepojte súbor CSS so súborom HTML tak, že ho pridáte do značky head:
<odkazrel="štýlov"typu="text/css"href="styles.css">
Ako sa striedať pri pridávaní symbolov na hraciu dosku
V hre budú dvaja hráči, každý so symbolom „X“ alebo „O“. Kliknutím na jednu z buniek mriežky môžete pridať symbol „X“ alebo „O“. Toto bude pokračovať, kým jeden z vás nevytvorí rovný horizontálny, vertikálny alebo diagonálny rad.
Túto funkciu môžete pridať pomocou JavaScriptu.
- V rovnakom priečinku ako súbory HTML a CSS vytvorte súbor JavaScript s názvom „script.js“.
- Prepojte súbor JavaScript so súborom HTML pridaním skriptu do spodnej časti značky body:
<telo>
Váš kód tu
<skriptsrc="script.js">skript>
telo> - Do súboru JavaScript pridajte reťazec reprezentujúci symbol hráča. Môže to byť buď "X" alebo "O". V predvolenom nastavení prvý hráč umiestni „X“:
nech PlayerSymbol = "X"; - Pridajte ďalšiu premennú, aby ste mali prehľad o tom, či sa hra skončila:
nech hra sa skončila = falošný - Každá bunka v tabuľke HTML má ID medzi 1 a 9. Pre každú bunku v tabuľke pridajte prijímač udalostí, ktorý sa spustí vždy, keď používateľ klikne na bunku:
pre (nech i = 1; ja <= 9; i++) {
dokument.getElementById (i.toString()).addEventListener(
"klik",
funkciu() {
}
);
} - Vo vnútri prijímača udalostí zmeňte vnútorný kód HTML tak, aby zobrazoval aktuálny symbol. Uistite sa, že používate podmienený príkaz JavaScript najprv sa uistite, že je bunka prázdna a že hra ešte neskončila:
ak (toto.innerHTML "" && !hra sa skončila) {
toto.innerHTML = hráčSymbol;
} - Pridajte triedu do prvku HTML a upravte štýl symbolu, ktorý sa zobrazí na mriežke. Názov tried CSS bude buď „X“ alebo „O“, v závislosti od symbolu:
toto.classList.add (playerSymbol.toLowerCase()); - Do súboru „styles.css“ pridajte tieto dve nové triedy pre symboly „X“ a „O“. Symboly „X“ a „O“ sa zobrazia v rôznych farbách:
.X {
farba: Modrá;
veľkosť písma: 80px;
}.o {
farba: červená;
veľkosť písma: 80px;
} - V súbore JavaScript po zmene vnútorného HTML na zobrazenie symbolu zameňte symbol. Napríklad, ak hráč práve umiestnil „X“, zmeňte nasledujúci symbol na „O“:
ak (symbol hráča "X")
PlayerSymbol = "O"
inak
PlayerSymbol = "X" - Ak chcete spustiť hru, otvorte súbor „index.html“ vo webovom prehliadači a zobrazte mriežku 3 x 3:
- Začnite umiestňovať symboly na mriežku kliknutím na bunky. V hre sa budú striedať symboly „X“ a „O“:
Ako určiť víťaza
V tejto chvíli bude hra stále pokračovať, aj keď hráč umiestnil tri po sebe nasledujúce symboly. Budete musieť pridať koncovú podmienku, aby ste to skontrolovali po každom kole.
- Do súboru JavaScript pridajte novú premennú na uloženie všetkých možných „víťazných“ pozícií pre mriežku 3 x 3. Napríklad „[1,2,3]“ je horný riadok alebo „[1,4,7]“ je diagonálny riadok.
nech 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]
]; - Pridajte novú funkciu s názvom checkWin():
funkciucheckWin() {
} - Vo vnútri funkcie prejdite cez každú z možných výherných pozícií:
pre (nech i = 0; i < winPos.length; i++) {} - Vo vnútri cyklu for skontrolujte, či všetky bunky obsahujú symbol hráča:
ak (
dokument.getElementById (winPos[i][0]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][1]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][2]).InnerHTML playerSymbol
) {} - Ak sa podmienka vyhodnotí ako pravdivá, potom sú všetky symboly v priamke. Vo vnútri príkazu if zobrazte správu používateľovi. Môžete tiež zmeniť štýl prvku HTML pridaním triedy CSS s názvom „win“:
dokument.getElementById (winPos[i][0]).classList.add("vyhrať");
dokument.getElementById (winPos[i][1]).classList.add("vyhrať");
dokument.getElementById (winPos[i][2]).classList.add("vyhrať");
hra sa skončila = pravda;setTimeout(funkciu() {
upozornenie (symbol hráča + "vyhráva!");
}, 500); - Pridajte túto „win“ triedu CSS do súboru „styles.css“. Keď hráč vyhrá, zmení farbu pozadia výherných buniek na žltú:
.vyhrať {
farba pozadia: žltá;
} - Zavolajte funkciu checkWin() vždy, keď je hráč na ťahu, vo vnútri obsluhy udalosti pridanej v predchádzajúcich krokoch:
pre (nech i = 1; ja <= 9; i++) {
// Kedykoľvek hráč klikne na bunku
dokument.getElementById (i.toString()).addEventListener(
"klik",
funkciu() {
ak (toto.innerHTML "" && !hra sa skončila) {
// Zobrazte v bunke buď "X" alebo "O" a upravte jej štýl
toto.innerHTML = hráčSymbol;
toto.classList.add (playerSymbol.toLowerCase());
// Skontrolujte, či hráč vyhral
checkWin();
// Pre ďalšie kolo vymeňte symbol za iný
ak (symbol hráča "X")
PlayerSymbol = "O"
inak
PlayerSymbol = "X"
}
}
);
}
Ako resetovať hernú dosku
Keď hráč vyhrá hru, môžete resetovať hraciu dosku. V prípade nerozhodného výsledku môžete tiež resetovať herný plán.
- V súbore HTML za tabuľku pridajte tlačidlo resetovania:
<tlačidloid="resetovať">Resetovaťtlačidlo> - Pridajte nejaký štýl do tlačidla resetovania:
.kontajner {
displej: flex;
flex-direction: stĺpec;
}#reset {
marža: 48px 40%;
vypchávka: 20px;
} - Do súboru JavaScript pridajte obsluhu udalosti, ktorá sa spustí vždy, keď používateľ klikne na tlačidlo reset:
dokument.getElementById("resetovať").addEventListener(
"klik",
funkciu() {}
); - Pre každú bunku v mriežke získajte prvok HTML pomocou funkcie getElementById(). Resetujte innerHTML, aby ste odstránili symboly „O“ a „X“ a odstránili všetky ostatné štýly CSS:
pre (nech i = 1; ja <= 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("vyhrať");
hra sa skončila = falošný;
} - Spustite hru otvorením súboru „index.html“ vo webovom prehliadači.
- Začnite umiestňovať symboly „X“ a „O“ na mriežku. Pokúste sa vyhrať jeden zo symbolov.
- Stlačením tlačidla reset vynulujete hraciu dosku.
Naučte sa JavaScript tvorbou hier
Svoje programovacie zručnosti môžete naďalej zlepšovať vytváraním ďalších projektov v JavaScripte. Je ľahké vytvárať jednoduché hry a nástroje vo webovom prostredí pomocou multiplatformových otvorených technológií, ako sú JavaScript a HTML.
Neexistuje lepší spôsob, ako zlepšiť svoje programovanie, ako precvičiť si písanie programov!