Tic-tac-toe ir populāra spēle, kurā tiek izmantots 3 × 3 režģis. Spēles mērķis ir būt pirmajam spēlētājam, kurš novieto trīs simbolus taisnā horizontālā, vertikālā vai diagonālā rindā.
Varat izveidot Tic-tac-toe spēli, kas darbojas tīmekļa pārlūkprogrammā, izmantojot HTML, CSS un JavaScript. Varat izmantot HTML, lai pievienotu saturu, kurā ir 3 × 3 režģis, un CSS, lai spēles dizainam pievienotu stilu.
Pēc tam spēles funkcionalitātei varat izmantot JavaScript. Tas ietver simbolu izvietošanu, pārmaiņus starp spēlētājiem un izlemšanu, kurš uzvar.
Kā izveidot lietotāja interfeisu spēlei Tic-Tac-Toe
Jūs varat lasīt un lejupielādēt pilnu šīs spēles pirmkodu no tās GitHub repozitorijs.
Tic-tac-toe ir viena no daudzajām spēlēm, ko varat izveidot, mācoties programmēt. Ir lietderīgi praktizēt jaunu valodu vai vidi, piemēram PICO-8 spēļu izstrādes dzinējs.
Lai izveidotu Tic-tac-toe spēli, kas darbojas tīmekļa pārlūkprogrammā, lapas saturam būs jāpievieno HTML. Pēc tam varat to veidot, izmantojot CSS.
- Izveidojiet jaunu failu ar nosaukumu "index.html".
- Sadaļā "index.html" pievienojiet HTML faila pamatstruktūru:
html>
<htmllang="en-US">
<galvu>
<virsraksts>Tic Tac Toe spēlevirsraksts>
galvu>
<ķermeni>
ķermeni>
html> - HTML body tagā pievienojiet tabulu, kurā ir trīs rindas un katrā rindā ir trīs šūnas:
<divklasē="konteiners">
<tabula>
<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>
tabula>
div> - Tajā pašā mapē, kurā atrodas HTML fails, izveidojiet jaunu failu ar nosaukumu "styles.css".
- CSS failā pievienojiet 3 x 3 režģa stilu:
tabula {
robeža-sabrukums: sabrukt;
starpība: 0 auto;
}td {
platums: 100px;
augstums: 100px;
teksta līdzināšana: centrs;
vertikāli izlīdzināt: vidū;
robeža: 1pxcietsmelns;
} - Saistiet CSS failu ar savu HTML failu, pievienojot to head tagam:
<saiterel="stila lapa"veids="text/css"href="styles.css">
Kā pēc kārtas pievienot simbolus spēļu galdiņam
Spēlē būs divi spēlētāji, katrs ar simbolu "X" vai "O". Varat pievienot simbolu "X" vai "O", noklikšķinot uz vienas no režģa šūnām. Tas turpināsies, līdz kāds no jums ir izveidojis taisnu horizontālu, vertikālu vai diagonālu rindu.
Šo funkcionalitāti var pievienot, izmantojot JavaScript.
- Tajā pašā mapē, kur atrodas jūsu HTML un CSS faili, izveidojiet JavaScript failu ar nosaukumu "script.js".
- Saistiet JavaScript failu ar savu HTML failu, pievienojot skriptu body taga apakšā:
<ķermeni>
Tavs kods šeit
<skriptssrc="script.js">skripts>
ķermeni> - JavaScript failā pievienojiet virkni, kas attēlo spēlētāja simbolu. Tas var būt "X" vai "O". Pēc noklusējuma pirmais spēlētājs ievietos "X":
ļaut spēlētājsSimbols = "X"; - Pievienojiet vēl vienu mainīgo, lai izsekotu, vai spēle ir beigusies:
ļaut spēle beigusies = viltus - Katrai HTML tabulas šūnai ir ID no 1 līdz 9. Katrai tabulas šūnai pievienojiet notikumu uztvērēju, kas darbosies ikreiz, kad lietotājs noklikšķinās uz šūnas:
priekš (ļaut i = 1; es <= 9; i++) {
dokumentu.getElementById (i.toString()).addEventListener(
"klikšķis",
funkciju() {
}
);
} - Notikumu klausītājā mainiet iekšējo HTML, lai parādītu pašreizējo simbolu. Noteikti izmantojiet JavaScript nosacījuma priekšraksts lai vispirms pārliecinātos, ka šūna ir tukša un ka spēle vēl nav beigusies:
ja (šis.innerHTML "" && !gameEnded) {
šis.innerHTML = playerSymbol;
} - Pievienojiet klasi HTML elementam, lai izveidotu simbolu, kas tiks rādīts režģī. CSS klašu nosaukums būs "X" vai "O" atkarībā no simbola:
šis.classList.add (playerSymbol.toLowerCase()); - Failā "styles.css" pievienojiet šīs divas jaunās klases "X" un "O" simboliem. Simboli "X" un "O" tiks parādīti dažādās krāsās:
.x {
krāsa: zils;
fonta izmērs: 80px;
}.o {
krāsa: sarkans;
fonta izmērs: 80px;
} - JavaScript failā pēc iekšējā HTML maiņas, lai parādītu simbolu, nomainiet simbolu. Piemēram, ja spēlētājs tikko ievietojis "X", nomainiet nākamo simbolu uz "O":
ja (playerSymbol "X")
spēlētājsSimbols = "O"
cits
spēlētājsSimbols = "X" - Lai palaistu spēli, tīmekļa pārlūkprogrammā atveriet failu "index.html", lai parādītu režģi 3 x 3:
- Sāciet izvietot simbolus režģī, noklikšķinot uz šūnām. Spēlē pārmaiņus tiks izmantoti "X" un "O" simboli:
Kā noteikt uzvarētāju
Šobrīd spēle joprojām turpināsies, pat ja spēlētājs ir ievietojis trīs simbolus pēc kārtas. Jums būs jāpievieno beigu nosacījums, lai to pārbaudītu pēc katra pagrieziena.
- JavaScript failā pievienojiet jaunu mainīgo, lai saglabātu visas iespējamās "uzvarošās" pozīcijas režģī 3 x 3. Piemēram, "[1,2,3]" ir augšējā rinda vai "[1,4,7]" ir rinda pa diagonāli.
ļaut 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]
]; - Pievienojiet jaunu funkciju ar nosaukumu checkWin ():
funkcijucheckWin() {
} - Funkcijas ietvaros pārejiet cauri katrai no iespējamām uzvaras pozīcijām:
priekš (ļaut i = 0; i < winPos.length; i++) {} - For cilpas iekšpusē pārbaudiet, vai visās šūnās ir atskaņotāja simbols:
ja (
dokumentu.getElementById (winPos[i][0]).innerHTML playerSimbols &&
dokumentu.getElementById (winPos[i][1]).innerHTML playerSimbols &&
dokumentu.getElementById (winPos[i][2]).innerHTML playerSimbols
) {} - Ja nosacījums tiek novērtēts kā patiess, tad visi simboli atrodas taisnā līnijā. Paziņojumā if parādiet lietotājam ziņojumu. Varat arī mainīt HTML elementa stilu, pievienojot CSS klasi ar nosaukumu "win":
dokumentu.getElementById (winPos[i][0]).classList.add("uzvarēt");
dokumentu.getElementById (winPos[i][1]).classList.add("uzvarēt");
dokumentu.getElementById (winPos[i][2]).classList.add("uzvarēt");
spēle beigusies = taisnība;setTimeout(funkciju() {
brīdinājums (playerSymbol + "uzvar!");
}, 500); - Pievienojiet šo "win" CSS klasi failam "styles.css". Kad spēlētājs uzvar, tas mainīs uzvarējušo šūnu fona krāsu uz dzeltenu:
.win {
fona krāsa: dzeltens;
} - Izsauciet funkciju checkWin() katru reizi, kad spēlētājam ir gājiens, notikumu apstrādātājā, kas pievienots iepriekšējās darbībās:
priekš (ļaut i = 1; es <= 9; i++) {
// Ikreiz, kad spēlētājs noklikšķina uz šūnas
dokumentu.getElementById (i.toString()).addEventListener(
"klikšķis",
funkciju() {
ja (šis.innerHTML "" && !gameEnded) {
// Šūnā parādiet "X" vai "O" un veidojiet to
šis.innerHTML = playerSymbol;
šis.classList.add (playerSymbol.toLowerCase());
// Pārbaudiet, vai spēlētājs ir uzvarējis
checkWin();
// Apmainīt simbolu pret otru nākamajam pagriezienam
ja (playerSymbol "X")
spēlētājsSimbols = "O"
cits
spēlētājsSimbols = "X"
}
}
);
}
Kā atiestatīt spēļu dēli
Kad spēlētājs ir uzvarējis spēli, jūs varat atiestatīt spēles dēli. Neizšķirta rezultāta gadījumā varat arī atiestatīt spēles dēli.
- HTML failā pēc tabulas pievienojiet atiestatīšanas pogu:
<poguid="atiestatīt">Atiestatītpogu> - Pievienojiet atiestatīšanas pogai stilu:
.konteiners {
displejs: flex;
flex-virziens: kolonna;
}#atiestatīt {
starpība: 48px 40%;
polsterējums: 20px;
} - JavaScript failā pievienojiet notikumu apdarinātāju, kas darbosies ikreiz, kad lietotājs noklikšķinās uz atiestatīšanas pogas:
dokumentu.getElementById("atiestatīt").addEventListener(
"klikšķis",
funkciju() {}
); - Katrai režģa šūnai iegūstiet HTML elementu, izmantojot funkciju getElementById(). Atiestatiet iekšējo HTML, lai noņemtu simbolus "O" un "X" un noņemtu visus pārējos CSS stilus:
priekš (ļaut i = 1; es <= 9; i++) {
dokumentu.getElementById (i.toString()).innerHTML = "";
dokumentu.getElementById (i.toString()).classList.remove("x");
dokumentu.getElementById (i.toString()).classList.remove("o");
dokumentu.getElementById (i.toString()).classList.remove("uzvarēt");
spēle beigusies = viltus;
} - Palaidiet spēli, tīmekļa pārlūkprogrammā atverot failu "index.html".
- Sāciet ievietot simbolus "X" un "O" uz režģa. Mēģiniet likt vienam no simboliem uzvarēt.
- Nospiediet atiestatīšanas pogu, lai atiestatītu spēles dēli.
JavaScript apgūšana, veidojot spēles
Varat turpināt uzlabot savas programmēšanas prasmes, izveidojot vairāk projektu JavaScript. Tīmekļa vidē ir viegli izveidot vienkāršas spēles un rīkus, izmantojot starpplatformu atvērtās tehnoloģijas, piemēram, JavaScript un HTML.
Nav labāka veida, kā uzlabot programmēšanu, kā praktizēt programmu rakstīšanu!
