Tic-tac-toe je popularna igra koja koristi mrežu 3×3. Cilj igre je biti prvi igrač koji je postavio tri simbola u ravni vodoravni, okomiti ili dijagonalni red.
Možete izraditi igru Tic-tac-toe koja se izvodi u web pregledniku koristeći HTML, CSS i JavaScript. Možete upotrijebiti HTML za dodavanje sadržaja koji sadrži mrežu 3×3, a CSS za dodavanje stila dizajnu igre.
Tada možete koristiti JavaScript za funkcionalnost igre. To uključuje postavljanje simbola, izmjenu igrača i odlučivanje tko pobjeđuje.
Kako stvoriti korisničko sučelje za igru Tic-Tac-Toe
Možete pročitati i preuzeti potpuni izvorni kod za ovu igru s GitHub spremište.
Tic-tac-toe jedna je od mnogih igara koje možete napraviti dok učite programirati. Dobro je vježbati novi jezik ili okruženje, npr PICO-8 motor za razvoj igara.
Da biste stvorili Tic-tac-toe igru koja se izvodi u web pregledniku, morat ćete dodati HTML za sadržaj stranice. Zatim to možete stilizirati pomoću CSS-a.
- Napravite novu datoteku pod nazivom "index.html".
- Unutar "index.html" dodajte osnovnu strukturu HTML datoteke:
html>
<htmljezik="en-US">
<glava>
<titula>Igra Tic Tac Toetitula>
glava>
<tijelo>
tijelo>
html> - Unutar HTML oznake tijela dodajte tablicu koja sadrži tri retka, s tri ćelije u svakom retku:
<divrazreda="kontejner">
<stol>
<tr>
<tdiskaznica="1">td>
<tdiskaznica="2">td>
<tdiskaznica="3">td>
tr>
<tr>
<tdiskaznica="4">td>
<tdiskaznica="5">td>
<tdiskaznica="6">td>
tr>
<tr>
<tdiskaznica="7">td>
<tdiskaznica="8">td>
<tdiskaznica="9">td>
tr>
stol>
div> - U istoj mapi u kojoj je vaša HTML datoteka, stvorite novu datoteku pod nazivom "styles.css".
- Unutar CSS datoteke dodajte malo stila svojoj mreži 3 x 3:
stol {
granica-kolaps: kolaps;
margina: 0 auto;
}td {
širina: 100px;
visina: 100px;
poravnanje teksta: centar;
okomito poravnati: sredini;
granica: 1pxčvrstacrno;
} - Povežite CSS datoteku sa svojom HTML datotekom tako da je dodate u oznaku head:
<vezarel="list stilova"tip="tekst/css"href="styles.css">
Kako naizmjence dodavati simbole na ploču za igru
U igri će biti dva igrača, svaki sa simbolom "X" ili "O". Možete dodati simbol "X" ili "O" klikom na jednu od ćelija mreže. To će se nastaviti sve dok jedno od vas ne stvori ravni vodoravni, okomiti ili dijagonalni red.
Ovu funkciju možete dodati pomoću JavaScripta.
- U istoj mapi u kojoj su vaše HTML i CSS datoteke, stvorite JavaScript datoteku pod nazivom "script.js".
- Povežite JavaScript datoteku sa svojom HTML datotekom dodavanjem skripte na dno body oznake:
<tijelo>
Vaš kod ovdje
<skriptasrc="script.js">skripta>
tijelo> - Unutar JavaScript datoteke dodajte niz koji predstavlja simbol igrača. To može biti "X" ili "O". Prema zadanim postavkama, prvi igrač stavlja "X":
neka igračSimbol = "X"; - Dodajte još jednu varijablu da biste pratili je li igra završila:
neka igrazavršena = lažno - Svaka ćelija u HTML tablici ima ID između 1 i 9. Za svaku ćeliju u tablici dodajte slušatelja događaja koji će se pokrenuti kad god korisnik klikne na ćeliju:
za (neka ja = 1; ja <= 9; i++) {
dokument.getElementById (i.toString()).addEventListener(
"klik",
funkcija() {
}
);
} - Unutar slušatelja događaja promijenite unutarnji HTML da prikaže trenutni simbol. Obavezno koristite JavaScript uvjetna izjava da prvo provjerite je li ćelija prazna i da igra još nije završila:
ako (ovaj.unutarnjiHTML "" && !gameEnded) {
ovaj.innerHTML = playerSymbol;
} - Dodajte klasu HTML elementu da stilizirate simbol koji će se prikazati na mreži. Naziv CSS klasa bit će ili "X" ili "O", ovisno o simbolu:
ovaj.classList.add (playerSymbol.toLowerCase()); - Unutar datoteke "styles.css" dodajte ove dvije nove klase za simbole "X" i "O". Simboli "X" i "O" prikazat će se u različitim bojama:
.x {
boja: plava;
veličina fonta: 80px;
}.o {
boja: Crvena;
veličina fonta: 80px;
} - U JavaScript datoteci, nakon promjene innerHTML-a za prikaz simbola, zamijenite simbol. Na primjer, ako je igrač upravo stavio "X", promijenite sljedeći simbol u "O":
ako (Simbol igrača "X")
igračSimbol = "O"
drugo
igračSimbol = "X" - Da biste pokrenuli igru, otvorite datoteku "index.html" u web pregledniku da biste prikazali mrežu 3 puta 3:
- Počnite postavljati simbole na mrežu klikom na ćelije. U igri će se izmjenjivati simboli "X" i "O":
Kako odrediti pobjednika
Trenutno će se igra nastaviti čak i ako je igrač stavio tri uzastopna simbola. Morat ćete dodati uvjet završetka da biste to provjerili nakon svakog poteza.
- Unutar svoje JavaScript datoteke dodajte novu varijablu za pohranjivanje svih mogućih "pobjedničkih" pozicija za mrežu 3 x 3. Na primjer, "[1,2,3]" je gornji red ili "[1,4,7]" je dijagonalni red.
neka 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 novu funkciju pod nazivom checkWin():
funkcijacheckWin() {
} - Unutar funkcije prođite kroz svaku od mogućih dobitnih pozicija:
za (neka ja = 0; i < winPos.length; i++) {} - Unutar for petlje provjerite sadrže li sve ćelije simbol igrača:
ako (
dokument.getElementById (winPos[i][0]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][1]).innerHTML playerSymbol &&
dokument.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Ako se uvjet ocijeni istinitim, tada su svi simboli u ravnoj liniji. Unutar naredbe if, prikažite poruku korisniku. Također možete promijeniti stil HTML elementa dodavanjem CSS klase pod nazivom "win":
dokument.getElementById (winPos[i][0]).classList.add("pobijediti");
dokument.getElementById (winPos[i][1]).classList.add("pobijediti");
dokument.getElementById (winPos[i][2]).classList.add("pobijediti");
igrazavršena = pravi;setTimeout(funkcija() {
upozorenje (simbol igrača + "pobjeđuje!");
}, 500); - Dodajte ovu "win" CSS klasu u datoteku "styles.css". Kada igrač pobijedi, promijenit će boju pozadine pobjedničkih ćelija u žutu:
.pobijediti {
boja pozadine: žuta boja;
} - Pozovite funkciju checkWin() svaki put kada je igrač na potezu, unutar rukovatelja događajima dodanog u prethodnim koracima:
za (neka ja = 1; ja <= 9; i++) {
// Kad god igrač klikne na ćeliju
dokument.getElementById (i.toString()).addEventListener(
"klik",
funkcija() {
ako (ovaj.unutarnjiHTML "" && !gameEnded) {
// Prikaži ili "X" ili "O" u ćeliji i stiliziraj je
ovaj.innerHTML = playerSymbol;
ovaj.classList.add (playerSymbol.toLowerCase());
// Provjerite je li igrač pobijedio
provjeriPobjedu();
// Zamijenite simbol drugim za sljedeći potez
ako (Simbol igrača "X")
igračSimbol = "O"
drugo
igračSimbol = "X"
}
}
);
}
Kako resetirati ploču za igru
Nakon što igrač pobijedi u igri, možete resetirati ploču za igru. Također možete resetirati ploču za igru u slučaju neriješenog rezultata.
- U HTML datoteku, nakon tablice, dodajte gumb za resetiranje:
<dugmeiskaznica="resetirati">Resetirajdugme> - Dodajte malo stila gumbu za resetiranje:
.kontejner {
prikaz: savijati;
flex-direction: stupac;
}#resetiraj {
margina: 48px 40%;
podstava: 20px;
} - U JavaScript datoteci dodajte rukovatelj događajima koji će se pokrenuti kad god korisnik klikne gumb za resetiranje:
dokument.getElementById("resetirati").addEventListener(
"klik",
funkcija() {}
); - Za svaku ćeliju u rešetki dohvatite HTML element pomoću funkcije getElementById(). Poništite innerHTML da biste uklonili simbole "O" i "X" i uklonili sve druge CSS stilove:
za (neka ja = 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("pobijediti");
igrazavršena = lažno;
} - Pokrenite igru otvaranjem datoteke "index.html" u web pregledniku.
- Počnite postavljati simbole "X" i "O" na rešetku. Pokušajte postići da jedan od simbola pobijedi.
- Pritisnite tipku za resetiranje kako biste resetirali ploču za igru.
Učenje JavaScripta izradom igara
Možete nastaviti poboljšavati svoje vještine programiranja stvaranjem više projekata u JavaScriptu. Lako je izraditi jednostavne igre i alate u web okruženju, koristeći višeplatformske, otvorene tehnologije kao što su JavaScript i HTML.
Ne postoji bolji način da poboljšate svoje programiranje od vježbanja pisanja programa!
