Tic-tac-toe este un joc popular care folosește o grilă 3×3. Scopul jocului este de a fi primul jucător care plasează trei simboluri într-un rând drept orizontal, vertical sau diagonal.
Puteți crea un joc Tic-tac-toe care rulează într-un browser web folosind HTML, CSS și JavaScript. Puteți folosi HTML pentru a adăuga conținut care conține grila 3×3 și CSS pentru a adăuga un stil design-ului jocului.
Apoi puteți utiliza JavaScript pentru funcționalitatea jocului. Aceasta include plasarea simbolurilor, luarea pe rând între jucători și deciderea cine câștigă.
Cum se creează interfața de utilizare pentru jocul Tic-Tac-Toe
Puteți citi și descărca codul sursă complet pentru acest joc de pe site Depozitul GitHub.
Tic-tac-toe este unul dintre numeroasele jocuri pe care le poți face atunci când înveți cum să programezi. Este bine să practici o limbă sau un mediu nou, cum ar fi motorul de dezvoltare a jocului PICO-8.
Pentru a crea un joc Tic-tac-toe care rulează într-un browser web, va trebui să adăugați HTML pentru conținutul paginii. Puteți apoi să stilați acest lucru folosind CSS.
- Creați un fișier nou numit „index.html”.
- În interiorul „index.html”, adăugați structura de bază a unui fișier HTML:
html>
<htmllang="en-US">
<cap>
<titlu>Joc Tic Tac Toetitlu>
cap>
<corp>
corp>
html> - În interiorul etichetei HTML body, adăugați un tabel care conține trei rânduri, cu trei celule pe fiecare rând:
<divclasă="container">
<masa>
<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>
masa>
div> - În același folder cu fișierul HTML, creați un fișier nou numit „styles.css”.
- În interiorul fișierului CSS, adăugați un stil la grila dvs. 3 pe 3:
masa {
frontieră-colaps: colaps;
marginea: 0 auto;
}td {
lăţime: 100px;
înălţime: 100px;
aliniere text: centru;
vertical-align: mijloc;
frontieră: 1pxsolidnegru;
} - Conectați fișierul CSS la fișierul HTML adăugându-l la eticheta head:
<legăturărel="foaia de stil"tip=„text/css”href=„styles.css”>
Cum să adăugați pe rând simboluri pe tabla de joc
În joc, vor fi doi jucători, fiecare cu simbolul „X” sau „O”. Puteți adăuga fie un simbol „X” fie „O” făcând clic pe una dintre celulele grilei. Acest lucru va continua până când unul dintre voi a creat un rând drept orizontal, vertical sau diagonal.
Puteți adăuga această funcționalitate folosind JavaScript.
- În același folder cu fișierele HTML și CSS, creați un fișier JavaScript numit „script.js”.
- Conectați fișierul JavaScript la fișierul dvs. HTML adăugând scriptul în partea de jos a etichetei body:
<corp>
Codul dvs. aici
<scenariusrc=„script.js”>scenariu>
corp> - În interiorul fișierului JavaScript, adăugați un șir pentru a reprezenta simbolul jucătorului. Acesta poate fi fie „X” fie „O”. În mod implicit, primul jucător va plasa un „X”:
lăsa playerSymbol = "X"; - Adăugați o altă variabilă pentru a urmări dacă jocul s-a încheiat:
lăsa gameEnded = fals - Fiecare celulă din tabelul HTML are un ID între 1 și 9. Pentru fiecare celulă din tabel, adăugați un ascultător de evenimente care va rula ori de câte ori un utilizator face clic pe celulă:
pentru (lăsa i = 1; eu <= 9; i++) {
document.getElementById (i.toString()).addEventListener(
"clic",
funcţie() {
}
);
} - În interiorul ascultătorului de evenimente, modificați codul HTML interior pentru a afișa simbolul curent. Asigurați-vă că utilizați o declarație condiționată JavaScript pentru a vă asigura mai întâi că celula este goală și că jocul nu s-a încheiat încă:
dacă (acest.innerHTML "" && !gameEnded) {
acest.innerHTML = playerSymbol;
} - Adăugați o clasă la elementul HTML pentru a stila simbolul care va apărea pe grilă. Numele claselor CSS va fi fie „X” fie „O”, în funcție de simbol:
acest.classList.add (playerSymbol.toLowerCase()); - În interiorul fișierului „styles.css”, adăugați aceste două clase noi pentru simbolurile „X” și „O”. Simbolurile „X” și „O” se vor afișa în culori diferite:
.X {
culoare: albastru;
marimea fontului: 80px;
}.o {
culoare: roșu;
marimea fontului: 80px;
} - În fișierul JavaScript, după ce ați schimbat innerHTML pentru a afișa simbolul, schimbați simbolul. De exemplu, dacă jucătorul tocmai a plasat un „X”, schimbați următorul simbol cu „O”:
dacă (Simbolul jucătorului "X")
playerSymbol = "O"
altfel
playerSymbol = "X" - Pentru a rula jocul, deschideți fișierul „index.html” într-un browser web pentru a afișa grila 3 cu 3:
- Începeți să plasați simboluri pe grilă făcând clic pe celule. Jocul va alterna simbolurile „X” și „O”:
Cum să determinați câștigătorul
În acest moment, jocul va continua chiar dacă un jucător a plasat trei simboluri consecutive. Va trebui să adăugați o condiție de final pentru a verifica acest lucru după fiecare tură.
- În interiorul fișierului JavaScript, adăugați o nouă variabilă pentru a stoca toate pozițiile „câștigătoare” posibile pentru grila 3 pe 3. De exemplu, „[1,2,3]” este rândul de sus sau „[1,4,7]” este un rând diagonal.
lăsa 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]
]; - Adăugați o nouă funcție numită checkWin():
funcţiecheckWin() {
} - În interiorul funcției, parcurgeți fiecare dintre posibilele poziții câștigătoare:
pentru (lăsa i = 0; i < winPos.length; i++) {} - În bucla for, verificați dacă toate celulele conțin simbolul jucătorului:
dacă (
document.getElementById (winPos[i][0]).innerHTML playerSimbol &&
document.getElementById (winPos[i][1]).innerHTML playerSimbol &&
document.getElementById (winPos[i][2]).innerHTML playerSimbol
) {} - Dacă condiția este adevărată, atunci toate simbolurile sunt în linie dreaptă. În interiorul instrucțiunii if, afișați un mesaj utilizatorului. De asemenea, puteți schimba stilul elementului HTML adăugând o clasă CSS numită „win”:
document.getElementById (winPos[i][0]).classList.add("victorie");
document.getElementById (winPos[i][1]).classList.add("victorie");
document.getElementById (winPos[i][2]).classList.add("victorie");
gameEnded = Adevărat;setTimeout(funcţie() {
alertă (playerSymbol + "victorie!");
}, 500); - Adăugați această clasă CSS „win” în fișierul „styles.css”. Când jucătorul câștigă, va schimba culoarea de fundal a celulelor câștigătoare în galben:
.victorie {
culoare de fundal: galben;
} - Apelați funcția checkWin() de fiecare dată când un jucător are o tură, în interiorul handler-ului de evenimente adăugat în pașii anteriori:
pentru (lăsa i = 1; eu <= 9; i++) {
// Ori de câte ori un jucător face clic pe o celulă
document.getElementById (i.toString()).addEventListener(
"clic",
funcţie() {
dacă (acest.innerHTML "" && !gameEnded) {
// Afișează fie „X” fie „O” în celulă și stil
acest.innerHTML = playerSymbol;
acest.classList.add (playerSymbol.toLowerCase());
// Verificați dacă un jucător a câștigat
checkWin();
// Schimbați simbolul cu celălalt pentru următoarea tură
dacă (Simbolul jucătorului "X")
playerSymbol = "O"
altfel
playerSymbol = "X"
}
}
);
}
Cum să resetați placa de joc
Odată ce un jucător a câștigat jocul, puteți reseta tabla de joc. De asemenea, puteți reseta tabla de joc în caz de egalitate.
- În fișierul HTML, după tabel, adăugați un buton de resetare:
<butonid="resetare">Resetațibuton> - Adăugați ceva stil butonului de resetare:
.container {
afişa: contracta;
flex-direcție: coloană;
}#resetare {
marginea: 48px 40%;
căptușeală: 20px;
} - În fișierul JavaScript, adăugați un handler de evenimente care va rula ori de câte ori utilizatorul face clic pe butonul de resetare:
document.getElementById("resetare").addEventListener(
"clic",
funcţie() {}
); - Pentru fiecare celulă din grilă, obțineți elementul HTML folosind funcția getElementById(). Resetați innerHTML pentru a elimina simbolurile „O” și „X” și pentru a elimina toate celelalte stiluri CSS:
pentru (lăsa i = 1; eu <= 9; i++) {
document.getElementById (i.toString()).innerHTML = "";
document.getElementById (i.toString()).classList.remove("X");
document.getElementById (i.toString()).classList.remove("o");
document.getElementById (i.toString()).classList.remove("victorie");
gameEnded = fals;
} - Rulați jocul deschizând fișierul „index.html” într-un browser web.
- Începeți să plasați simbolurile „X” și „O” pe grilă. Încercați să faceți ca unul dintre simboluri să câștige.
- Apăsați butonul de resetare pentru a reseta tabla de joc.
Învățarea JavaScript prin crearea de jocuri
Puteți continua să vă îmbunătățiți abilitățile de programare creând mai multe proiecte în JavaScript. Este ușor să creați jocuri și instrumente simple într-un mediu web, folosind tehnologii deschise multiplatforme precum JavaScript și HTML.
Nu există o modalitate mai bună de a vă îmbunătăți programarea decât să exersați scrierea de programe!
