Tic-tac-toe yra populiarus žaidimas, kuriame naudojamas 3 × 3 tinklelis. Žaidimo tikslas yra būti pirmajam žaidėjui, kuris išdėlioja tris simbolius tiesioje horizontalioje, vertikalioje arba įstrižoje eilėje.
Galite sukurti „Tic-tac-toe“ žaidimą, kuris veikia žiniatinklio naršyklėje, naudojant HTML, CSS ir „JavaScript“. Galite naudoti HTML norėdami pridėti turinį, kuriame yra 3 × 3 tinklelis, ir CSS, kad pridėtumėte žaidimo dizaino stiliaus.
Tada galite naudoti „JavaScript“ žaidimo funkcijoms. Tai apima simbolių išdėstymą, paeiliui tarp žaidėjų ir sprendimą, kas laimės.
Kaip sukurti „Tic-Tac-Toe“ žaidimo vartotojo sąsają
Iš jo galite perskaityti ir atsisiųsti visą šio žaidimo šaltinio kodą GitHub saugykla.
Tic-tac-toe yra vienas iš daugelio žaidimų, kuriuos galite žaisti mokydamiesi programuoti. Naudinga praktikuoti naują kalbą ar aplinką, pvz PICO-8 žaidimų kūrimo variklis.
Norėdami sukurti „Tic-tac-toe“ žaidimą, kuris veikia žiniatinklio naršyklėje, turėsite pridėti puslapio turinio HTML. Tada galite tai padaryti naudodami CSS.
- Sukurkite naują failą pavadinimu „index.html“.
- Į „index.html“ įtraukite pagrindinę HTML failo struktūrą:
html>
<htmllang="en-US">
<galva>
<titulą>Tic Tac Toe žaidimastitulą>
galva>
<kūnas>
kūnas>
html> - Į HTML kūno žymą pridėkite lentelę, kurioje yra trys eilutės su trimis langeliais kiekvienoje eilutėje:
<divklasė="konteineris">
<stalo>
<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>
stalo>
div> - Tame pačiame aplanke kaip ir HTML failas sukurkite naują failą pavadinimu „styles.css“.
- CSS faile pridėkite šiek tiek stiliaus 3 x 3 tinklelyje:
stalo {
siena-griūtis: griūtis;
marža: 0 automatinis;
}td {
plotis: 100px;
aukščio: 100px;
teksto lygiavimas: centras;
vertikaliai išlyginti: vidurio;
siena: 1pxkietasjuodas;
} - Susiekite CSS failą su HTML failu pridėdami jį prie žymos head:
<nuorodarel="stiliaus lapas"tipo="text/css"href="styles.css">
Kaip paeiliui pridėti simbolius prie žaidimų lentos
Žaidime dalyvaus du žaidėjai, kiekvienas su „X“ arba „O“ simboliu. Galite pridėti „X“ arba „O“ simbolį spustelėdami vieną iš tinklelio langelių. Tai tęsis tol, kol vienas iš jūsų sukurs tiesią horizontalią, vertikalią arba įstrižą eilutę.
Šią funkciją galite pridėti naudodami „JavaScript“.
- Tame pačiame aplanke, kuriame yra HTML ir CSS failai, sukurkite „JavaScript“ failą pavadinimu „script.js“.
- Susiekite „JavaScript“ failą su HTML failu, pridėdami scenarijų į „body“ žymos apačią:
<kūnas>
Jūsų kodas čia
<scenarijussrc="script.js">scenarijus>
kūnas> - „JavaScript“ faile pridėkite eilutę, vaizduojančią žaidėjo simbolį. Tai gali būti „X“ arba „O“. Pagal numatytuosius nustatymus pirmasis žaidėjas deda „X“:
leisti žaidėjasSimbolis = "X"; - Pridėkite kitą kintamąjį, kad galėtumėte stebėti, ar žaidimas baigėsi:
leisti žaidimas baigėsi = klaidinga - Kiekvienas HTML lentelės langelis turi ID nuo 1 iki 9. Prie kiekvieno lentelės langelio pridėkite įvykių klausytoją, kuris bus paleistas kaskart vartotojui spustelėjus langelį:
dėl (leisti aš = 1; aš <= 9; i++) {
dokumentas.getElementById (i.toString()).addEventListener(
"spausti",
funkcija() {
}
);
} - Įvykių klausytojo viduje pakeiskite vidinį HTML, kad būtų rodomas dabartinis simbolis. Būtinai naudokite „JavaScript“ sąlyginis sakinys pirmiausia įsitikinkite, kad langelis tuščias ir ar žaidimas dar nesibaigė:
jeigu (tai.innerHTML "" && !gameEnded) {
tai.innerHTML = žaidėjo simbolis;
} - Pridėkite klasę prie HTML elemento, kad sukurtumėte tinklelyje rodomo simbolio stilių. CSS klasių pavadinimas bus „X“ arba „O“, priklausomai nuo simbolio:
tai.classList.add (playerSymbol.toLowerCase()); - Failo „styles.css“ viduje pridėkite šias dvi naujas simbolių „X“ ir „O“ klases. Simboliai „X“ ir „O“ bus rodomi skirtingomis spalvomis:
.x {
spalva: mėlyna;
šrifto dydis: 80px;
}.o {
spalva: raudona;
šrifto dydis: 80px;
} - „JavaScript“ faile pakeitę vidinį HTML, kad būtų rodomas simbolis, pakeiskite simbolį. Pavyzdžiui, jei žaidėjas ką tik padėjo „X“, kitą simbolį pakeiskite į „O“:
jeigu (žaidėjasSymbol "X")
žaidėjasSimbolis = "O"
Kitas
žaidėjasSimbolis = "X" - Norėdami paleisti žaidimą, žiniatinklio naršyklėje atidarykite failą „index.html“, kad būtų rodomas 3 x 3 tinklelis:
- Pradėkite dėti simbolius tinklelyje spustelėdami langelius. Žaidime bus rodomi „X“ ir „O“ simboliai:
Kaip nustatyti nugalėtoją
Šiuo metu žaidimas vis tiek tęsis, net jei žaidėjas įdėjo tris simbolius iš eilės. Norėdami tai patikrinti po kiekvieno posūkio, turėsite pridėti pabaigos sąlygą.
- Savo „JavaScript“ faile pridėkite naują kintamąjį, kad išsaugotumėte visas galimas „3 x 3“ tinklelio „laimėjimo“ pozicijas. Pavyzdžiui, „[1,2,3]“ yra viršutinė eilutė arba „[1,4,7]“ yra įstrižainė.
leisti 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]
]; - Pridėkite naują funkciją pavadinimu checkWin ():
funkcijacheckWin() {
} - Funkcijos viduje pereikite per kiekvieną iš galimų laimėjimų pozicijų:
dėl (leisti aš = 0; i < winPos.length; i++) {} - Ciklo for viduje patikrinkite, ar visuose langeliuose yra žaidėjo simbolis:
jeigu (
dokumentas.getElementById (winPos[i][0]).innerHTML grotuvasSimbolis &&
dokumentas.getElementById (winPos[i][1]).innerHTML grotuvasSimbolis &&
dokumentas.getElementById (winPos[i][2]).innerHTML grotuvasSimbolis
) {} - Jei sąlyga vertinama kaip tiesa, tada visi simboliai yra tiesioje linijoje. Jei sakinyje parodykite pranešimą vartotojui. Taip pat galite pakeisti HTML elemento stilių pridėdami CSS klasę pavadinimu „win“:
dokumentas.getElementById (winPos[i][0]).classList.add("laimėti");
dokumentas.getElementById (winPos[i][1]).classList.add("laimėti");
dokumentas.getElementById (winPos[i][2]).classList.add("laimėti");
žaidimas baigėsi = tiesa;setTimeout(funkcija() {
įspėjimas (playerSymbol + "laimi!");
}, 500); - Pridėkite šią „win“ CSS klasę prie „styles.css“ failo. Kai žaidėjas laimi, jis pakeis laimėjusių langelių fono spalvą į geltoną:
.laimėk {
fono spalva: geltona;
} - Iškvieskite funkciją checkWin() kiekvieną kartą, kai žaidėjas eina į eilę, įvykių tvarkyklėje, pridėtoje ankstesniais veiksmais:
dėl (leisti aš = 1; aš <= 9; i++) {
// Kai žaidėjas spusteli langelį
dokumentas.getElementById (i.toString()).addEventListener(
"spausti",
funkcija() {
jeigu (tai.innerHTML "" && !gameEnded) {
// Langelyje parodykite „X“ arba „O“ ir stilių
tai.innerHTML = žaidėjo simbolis;
tai.classList.add (playerSymbol.toLowerCase());
// Patikrinkite, ar žaidėjas laimėjo
checkWin ();
// Pakeiskite simbolį į kitą, kad galėtumėte sekti posūkį
jeigu (žaidėjasSymbol "X")
žaidėjasSimbolis = "O"
Kitas
žaidėjasSimbolis = "X"
}
}
);
}
Kaip iš naujo nustatyti žaidimų lentą
Kai žaidėjas laimi žaidimą, galite iš naujo nustatyti žaidimo lentą. Taip pat galite iš naujo nustatyti žaidimo lentą lygiųjų atveju.
- HTML faile po lentelės pridėkite nustatymo iš naujo mygtuką:
<mygtukąid="nustatyti iš naujo">Nustatyti iš naujomygtuką> - Pridėkite šiek tiek stiliaus prie atstatymo mygtuko:
.konteineris {
ekranas: lankstus;
lankstumo kryptis: stulpelyje;
}#atstatyti iš naujo {
marža: 48px 40%;
kamšalas: 20px;
} - „JavaScript“ faile pridėkite įvykių tvarkyklę, kuri veiks, kai vartotojas spustelėja nustatymo iš naujo mygtuką:
dokumentas.getElementById("nustatyti iš naujo").addEventListener(
"spausti",
funkcija() {}
); - Kiekviename tinklelio langelyje gaukite HTML elementą naudodami funkciją getElementById(). Iš naujo nustatykite vidinį HTML, kad pašalintumėte simbolius „O“ ir „X“ ir pašalintumėte visą kitą CSS stilių:
dėl (leisti aš = 1; aš <= 9; i++) {
dokumentas.getElementById (i.toString()).innerHTML = "";
dokumentas.getElementById (i.toString()).classList.remove("x");
dokumentas.getElementById (i.toString()).classList.remove("o");
dokumentas.getElementById (i.toString()).classList.remove("laimėti");
žaidimas baigėsi = klaidinga;
} - Paleiskite žaidimą atidarę failą „index.html“ žiniatinklio naršyklėje.
- Pradėkite dėti „X“ ir „O“ simbolius tinklelyje. Pasistenkite, kad vienas iš simbolių laimėtų.
- Norėdami iš naujo nustatyti žaidimo lentą, paspauskite atstatymo mygtuką.
„JavaScript“ mokymasis kuriant žaidimus
Galite toliau tobulinti savo programavimo įgūdžius kurdami daugiau projektų „JavaScript“. Lengva kurti paprastus žaidimus ir įrankius žiniatinklio aplinkoje, naudojant kelių platformų atvirąsias technologijas, pvz., JavaScript ir HTML.
Nėra geresnio būdo tobulinti savo programavimą, nei praktikuotis rašant programas!