Tic-tac-toe on populaarne mäng, mis kasutab 3 × 3 ruudustikku. Mängu eesmärk on olla esimene mängija, kes asetab kolm sümbolit sirgele horisontaalsele, vertikaalsele või diagonaalsele reale.
Saate luua Tic-tac-toe mängu, mis töötab veebibrauseris, kasutades HTML-i, CSS-i ja JavaScripti. Saate kasutada HTML-i, et lisada sisu, mis sisaldab 3 × 3 ruudustikku, ja CSS-i, et lisada mängu kujundusele stiili.
Seejärel saate mängu funktsioonide jaoks kasutada JavaScripti. See hõlmab sümbolite paigutamist, vaheldumisi mängijate vahel ja otsustamist, kes võidab.
Kuidas luua Tic-Tac-Toe mängu kasutajaliidest
Selle mängu täielikku lähtekoodi saate lugeda ja alla laadida GitHubi hoidla.
Tic-tac-toe on üks paljudest mängudest, mida saate programmeerimist õppides teha. Hea on harjutada uut keelt või keskkonda, näiteks PICO-8 mänguarendusmootor.
Veebibrauseris töötava Tic-tac-toe mängu loomiseks peate lehe sisu jaoks lisama HTML-i. Seejärel saate selle stiili CSS-i abil.
- Looge uus fail nimega "index.html".
- Lisage faili "index.html" HTML-faili põhistruktuur:
html>
<htmllang="en-US">
<pea>
<pealkiri>Tic Tac Toe mängpealkiri>
pea>
<keha>
keha>
html> - Lisage HTML-i body-märgendi sisse tabel, mis sisaldab kolme rida, kus igas reas on kolm lahtrit.
<divklass="konteiner">
<laud>
<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>
laud>
div> - Looge HTML-failiga samas kaustas uus fail nimega "styles.css".
- Lisage CSS-failis oma 3x3 ruudustikule veidi stiili:
laud {
piiri-kokkuvarisemine: kollaps;
marginaal: 0 auto;
}td {
laius: 100px;
kõrgus: 100px;
teksti joondamine: Keskus;
vertikaalne joondamine: keskel;
piir: 1pxtahkemust;
} - Linkige CSS-fail oma HTML-failiga, lisades selle head-märgendile:
<linkrel="laadileht"tüüp="text/css"href="stiilid.css">
Kuidas mängulauale sümboleid kordamööda lisada
Mängus osaleb kaks mängijat, mõlemal kas "X" või "O" sümbol. Saate lisada sümboli "X" või "O", klõpsates ühel ruudustiku lahtritest. See jätkub, kuni üks teist on loonud sirge horisontaalse, vertikaalse või diagonaalse rea.
Selle funktsiooni saate lisada JavaScripti abil.
- Looge HTML- ja CSS-failidega samas kaustas JavaScripti fail nimega "script.js".
- Linkige JavaScripti fail oma HTML-failiga, lisades skripti body-märgendi allossa:
<keha>
Sinu kood siin
<stsenaariumsrc="script.js">stsenaarium>
keha> - Lisage JavaScript-faili string, mis tähistab mängija sümbolit. See võib olla kas "X" või "O". Vaikimisi paneb esimene mängija "X":
lase mängija Sümbol = "X"; - Lisage veel üks muutuja, et jälgida, kas mäng on lõppenud:
lase mäng lõppes = vale - Iga HTML-tabeli lahtri ID on vahemikus 1 kuni 9. Lisage iga tabeli lahtri jaoks sündmuste kuulaja, mis käivitub alati, kui kasutaja lahtril klõpsab:
jaoks (lase i = 1; mina <= 9; i++) {
dokument.getElementById (i.toString()).addEventListener(
"klõpsake",
funktsiooni() {
}
);
} - Muutke sündmusekuulajas sisemist HTML-i, et kuvada praegune sümbol. Kasutage kindlasti JavaScripti tingimuslause et esmalt veenduda, et lahter on tühi ja et mäng pole veel lõppenud:
kui (see.innerHTML "" && !gameEnded) {
see.innerHTML = mängijasümbol;
} - Lisage HTML-elemendile klass, et kujundada ruudustikus kuvatav sümbol. CSS-klasside nimed on kas "X" või "O", olenevalt sümbolist:
see.classList.add (playerSymbol.toLowerCase()); - Lisage faili "styles.css" need kaks uut klassi sümbolite "X" ja "O" jaoks. Sümbolid "X" ja "O" kuvatakse erinevate värvidena:
.x {
värvi: sinine;
fondi suurus: 80px;
}.o {
värvi: punane;
fondi suurus: 80px;
} - Pärast sisemise HTML-i muutmist sümboli kuvamiseks vahetage sümbol JavaScripti failis. Näiteks kui mängija pani just tähe "X", muutke järgmiseks sümboliks "O":
kui (mängija sümbol "X")
mängija Sümbol = "O"
muidu
mängija Sümbol = "X" - Mängu käivitamiseks avage veebibrauseris fail "index.html", et kuvada kolm korda kolme ruudustik:
- Alustage sümbolite paigutamist ruudustikule, klõpsates lahtritel. Mängus kasutatakse vaheldumisi "X" ja "O" sümboleid:
Kuidas määrata võitja
Hetkel mäng jätkub ka siis, kui mängija on asetanud kolm järjestikust sümbolit. Selle kontrollimiseks pärast iga pööret peate lisama lõputingimuse.
- Lisage oma JavaScript-faili uus muutuja, et salvestada kõikvõimalikud võidupositsioonid 3x3 ruudustiku jaoks. Näiteks "[1,2,3]" on ülemine rida või "[1,4,7]" on diagonaalrida.
lase 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]
]; - Lisage uus funktsioon nimega checkWin():
funktsioonicheckWin() {
} - Funktsiooni sees sirvige läbi kõik võimalikud võidupositsioonid:
jaoks (lase i = 0; i < winPos.length; i++) {} - Kontrollige for-tsükli sees, kas kõik lahtrid sisaldavad mängija sümbolit:
kui (
dokument.getElementById (winPos[i][0]).innerHTML player Sümbol &&
dokument.getElementById (winPos[i][1]).innerHTML player Sümbol &&
dokument.getElementById (winPos[i][2]).innerHTML playerSümbol
) {} - Kui tingimuse väärtus on tõene, on kõik sümbolid sirgel. Kui-lause sees kuvage kasutajale teade. Samuti saate muuta HTML-elemendi stiili, lisades CSS-klassi nimega "win":
dokument.getElementById (winPos[i][0]).classList.add("võit");
dokument.getElementById (winPos[i][1]).classList.add("võit");
dokument.getElementById (winPos[i][2]).classList.add("võit");
mäng lõppes = tõsi;setTimeout(funktsiooni() {
hoiatus (playerSymbol + "võidab!");
}, 500); - Lisage see "win" CSS-klass faili "styles.css". Kui mängija võidab, muudab see võitnud lahtrite taustavärvi kollaseks:
.võit {
taustavärv: kollane;
} - Kutsuge funktsiooni checkWin() iga kord, kui mängijal on kord, eelmistes sammudes lisatud sündmuste käitleja sees:
jaoks (lase i = 1; mina <= 9; i++) {
// Iga kord, kui mängija lahtril klõpsab
dokument.getElementById (i.toString()).addEventListener(
"klõpsake",
funktsiooni() {
kui (see.innerHTML "" && !gameEnded) {
// Kuvage lahtris kas "X" või "O" ja kujundage see
see.innerHTML = mängijasümbol;
see.classList.add (playerSymbol.toLowerCase());
// Kontrollige, kas mängija on võitnud
checkWin();
// Vahetage sümbol järgmise pöörde jaoks teise vastu
kui (mängija sümbol "X")
mängija Sümbol = "O"
muidu
mängija Sümbol = "X"
}
}
);
}
Kuidas mängulauda lähtestada
Kui mängija on mängu võitnud, saate mängulaua lähtestada. Võrdse tulemuse korral saate mängulaua ka lähtestada.
- Lisage HTML-failis pärast tabelit lähtestamise nupp:
<nuppuid="lähtestada">Lähtestanuppu> - Lisage lähtestamisnupule veidi stiili:
.konteiner {
kuva: painduv;
painduv suund: veerg;
}#lähtestamine {
marginaal: 48px 40%;
polsterdus: 20px;
} - Lisage JavaScripti faili sündmuste töötleja, mis käivitub alati, kui kasutaja klõpsab lähtestamisnupul:
dokument.getElementById("lähtestada").addEventListener(
"klõpsake",
funktsiooni() {}
); - Iga ruudustiku lahtri jaoks hankige funktsiooni getElementById() abil HTML-element. Lähtestage sisemine HTML, et eemaldada sümbolid "O" ja "X" ning eemaldada kõik muud CSS-stiilid.
jaoks (lase i = 1; mina <= 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("võit");
mäng lõppes = vale;
} - Käivitage mäng, avades veebibrauseris faili "index.html".
- Alustage ruudustikule sümbolite "X" ja "O" paigutamist. Proovige panna üks sümbolitest võitma.
- Mängulaua lähtestamiseks vajutage lähtestusnuppu.
JavaScripti õppimine mängude loomise kaudu
Saate jätkata oma programmeerimisoskuste täiustamist, luues JavaScriptis rohkem projekte. Veebikeskkonnas on lihtne luua lihtsaid mänge ja tööriistu, kasutades platvormiüleseid avatud tehnoloogiaid, nagu JavaScript ja HTML.
Programmeerimise parandamiseks pole paremat viisi kui programmide kirjutamise harjutamine!
