Tic-tac-toe je priljubljena igra, ki uporablja mrežo 3×3. Cilj igre je biti prvi igralec, ki bo postavil tri simbole v ravno vodoravno, navpično ali diagonalno vrsto.
Ustvarite lahko igro Tic-tac-toe, ki se izvaja v spletnem brskalniku z uporabo HTML, CSS in JavaScript. Uporabite lahko HTML, da dodate vsebino, ki vsebuje mrežo 3 × 3, in CSS, da dodate nekaj stila zasnovi igre.
Nato lahko uporabite JavaScript za funkcionalnost igre. To vključuje postavitev simbolov, menjavanje igralcev in odločanje o zmagovalcu.
Kako ustvariti uporabniški vmesnik za igro Tic-Tac-Toe
Celotno izvorno kodo te igre lahko preberete in prenesete iz Repozitorij GitHub.
Tic-tac-toe je ena od mnogih iger, ki jih lahko naredite, ko se učite programirati. Dobro je vaditi nov jezik ali okolje, npr motor za razvoj iger PICO-8.
Če želite ustvariti igro Tic-tac-toe, ki se izvaja v spletnem brskalniku, boste morali dodati HTML za vsebino strani. To lahko nato oblikujete s pomočjo CSS.
- Ustvarite novo datoteko z imenom "index.html".
- Znotraj »index.html« dodajte osnovno strukturo datoteke HTML:
html>
<htmljezik="en-US">
<glavo>
<naslov>Igra Tic Tac Toenaslov>
glavo>
<telo>
telo>
html> - Znotraj oznake telesa HTML dodajte tabelo, ki vsebuje tri vrstice, s tremi celicami v vsaki vrstici:
<divrazred="posoda">
<tabela>
<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>
tabela>
div> - V isti mapi kot vaša datoteka HTML ustvarite novo datoteko z imenom "styles.css".
- Znotraj datoteke CSS dodajte nekaj sloga vaši mreži 3 x 3:
tabela {
zrušitev meje: kolaps;
marža: 0 avto;
}td {
premer: 100px;
višina: 100px;
poravnava besedila: center;
navpično poravnati: sredina;
meja: 1pxtrdnaČrna;
} - Povežite datoteko CSS z vašo datoteko HTML tako, da jo dodate oznaki head:
<povezavarel="stylesheet"vrsta="besedilo/css"href="styles.css">
Kako izmenično dodajati simbole na igralno ploščo
V igri bosta dva igralca, vsak s simbolom "X" ali "O". S klikom na eno od celic mreže lahko dodate simbol "X" ali "O". To se bo nadaljevalo, dokler eden od vaju ne ustvari ravne vodoravne, navpične ali diagonalne vrstice.
To funkcijo lahko dodate s pomočjo JavaScripta.
- V isti mapi kot vaši datoteki HTML in CSS ustvarite datoteko JavaScript z imenom "script.js".
- Povežite datoteko JavaScript z vašo datoteko HTML tako, da dodate skript na dno oznake body:
<telo>
Vaša koda tukaj
<scenarijsrc="script.js">scenarij>
telo> - Znotraj datoteke JavaScript dodajte niz, ki bo predstavljal igralčev simbol. To je lahko "X" ali "O". Privzeto bo prvi igralec postavil "X":
pustiti igralecSimbol = "X"; - Dodajte še eno spremenljivko, da spremljate, ali se je igra končala:
pustiti gameEnded = lažno - Vsaka celica v tabeli HTML ima ID med 1 in 9. Za vsako celico v tabeli dodajte poslušalca dogodkov, ki se bo zagnal vsakič, ko uporabnik klikne celico:
za (pustiti jaz = 1; jaz <= 9; i++) {
dokument.getElementById (i.toString()).addEventListener(
"klik",
funkcijo() {
}
);
} - Znotraj poslušalca dogodkov spremenite notranji HTML za prikaz trenutnega simbola. Poskrbite za uporabo pogojni stavek JavaScript da se najprej prepričate, da je celica prazna in da se igra še ni končala:
če (to.innerHTML "" && !gameEnded) {
to.innerHTML = playerSymbol;
} - Dodajte razred elementu HTML, da oblikujete simbol, ki bo prikazan na mreži. Ime razredov CSS bo bodisi "X" ali "O", odvisno od simbola:
to.classList.add (playerSymbol.toLowerCase()); - Znotraj datoteke "styles.css" dodajte ta dva nova razreda za simbola "X" in "O". Simbola "X" in "O" bosta prikazana v različnih barvah:
.x {
barva: modra;
velikost pisave: 80px;
}.o {
barva: rdeča;
velikost pisave: 80px;
} - V datoteki JavaScript po spremembi notranjega HTML za prikaz simbola zamenjajte simbol. Na primer, če je igralec pravkar postavil "X", spremenite naslednji simbol v "O":
če (Simbol igralca "X")
igralecSimbol = "O"
drugače
igralecSimbol = "X" - Če želite zagnati igro, odprite datoteko "index.html" v spletnem brskalniku, da prikažete mrežo 3 x 3:
- Začnite postavljati simbole na mrežo s klikom na celice. Igra bo menjavala simbola "X" in "O":
Kako določiti zmagovalca
Trenutno se bo igra nadaljevala, tudi če je igralec postavil tri zaporedne simbole. Dodati boste morali končni pogoj, da to preverite po vsakem koraku.
- V svojo datoteko JavaScript dodajte novo spremenljivko za shranjevanje vseh možnih "zmagovalnih" pozicij za mrežo 3 x 3. Na primer, "[1,2,3]" je zgornja vrstica ali "[1,4,7]" je diagonalna vrstica.
pustiti 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]
]; - Dodajte novo funkcijo, imenovano checkWin():
funkcijocheckWin() {
} - Znotraj funkcije se pomikajte po vseh možnih zmagovalnih položajih:
za (pustiti jaz = 0; i < winPos.length; i++) {} - Znotraj zanke for preverite, ali vse celice vsebujejo simbol igralca:
če (
dokument.getElementById (winPos[i][0]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][1]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Če je pogoj ocenjen kot resničen, so vsi simboli v ravni črti. Znotraj stavka if prikažite sporočilo uporabniku. Slog elementa HTML lahko spremenite tudi tako, da dodate razred CSS z imenom "win":
dokument.getElementById (winPos[i][0]).classList.add("zmaga");
dokument.getElementById (winPos[i][1]).classList.add("zmaga");
dokument.getElementById (winPos[i][2]).classList.add("zmaga");
gameEnded = prav;setTimeout(funkcijo() {
opozorilo (playerSymbol + "zmaga!");
}, 500); - Dodajte ta "win" razred CSS v datoteko "styles.css". Ko igralec zmaga, spremeni barvo ozadja zmagovalnih celic v rumeno:
.zmaga {
Barva ozadja: rumena;
} - Pokličite funkcijo checkWin() vsakič, ko je igralec na vrsti, znotraj obdelovalnika dogodkov, dodanega v prejšnjih korakih:
za (pustiti jaz = 1; jaz <= 9; i++) {
// Kadarkoli igralec klikne na celico
dokument.getElementById (i.toString()).addEventListener(
"klik",
funkcijo() {
če (to.innerHTML "" && !gameEnded) {
// Prikaži "X" ali "O" v celici in jo oblikuj
to.innerHTML = playerSymbol;
to.classList.add (playerSymbol.toLowerCase());
// Preverite, ali je igralec zmagal
checkWin();
// Zamenjaj simbol z drugim za naslednji obrat
če (Simbol igralca "X")
igralecSimbol = "O"
drugače
igralecSimbol = "X"
}
}
);
}
Kako ponastaviti igralno ploščo
Ko igralec zmaga, lahko ponastavite igralno ploščo. Igralno ploščo lahko ponastavite tudi v primeru izenačenja.
- V datoteki HTML za tabelo dodajte gumb za ponastavitev:
<gumbid="ponastaviti">Ponastavitigumb> - Dodajte nekaj sloga gumbu za ponastavitev:
.posoda {
zaslon: flex;
flex-direction: stolpec;
}#ponastaviti {
marža: 48px 40%;
oblazinjenje: 20px;
} - V datoteko JavaScript dodajte obravnavo dogodkov, ki se bo zagnal vsakič, ko uporabnik klikne gumb za ponastavitev:
dokument.getElementById("ponastaviti").addEventListener(
"klik",
funkcijo() {}
); - Za vsako celico v mreži pridobite element HTML s funkcijo getElementById(). Ponastavite innerHTML, da odstranite simbola "O" in "X", ter odstranite vse druge sloge CSS:
za (pustiti jaz = 1; jaz <= 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("zmaga");
gameEnded = lažno;
} - Zaženite igro tako, da v spletnem brskalniku odprete datoteko "index.html".
- Začnite postavljati simbola "X" in "O" na mrežo. Poskusi, da eden od simbolov zmaga.
- Pritisnite gumb za ponastavitev, da ponastavite igralno ploščo.
Učenje JavaScripta z ustvarjanjem iger
Še naprej lahko izboljšujete svoje veščine programiranja z ustvarjanjem več projektov v JavaScriptu. Enostavno je sestaviti preproste igre in orodja v spletnem okolju z uporabo večplatformskih odprtih tehnologij, kot sta JavaScript in HTML.
Ni boljšega načina za izboljšanje vašega programiranja kot vadba pisanja programov!
