A Tic-tac-toe egy népszerű játék, amely 3×3-as rácsot használ. A játék célja, hogy az első játékos legyen, aki három szimbólumot helyez el egy egyenes vízszintes, függőleges vagy átlós sorban.
Létrehozhat egy Tic-tac-toe játékot, amely webböngészőben fut HTML, CSS és JavaScript használatával. A HTML segítségével hozzáadhatja a 3 × 3-as rácsot tartalmazó tartalmat, a CSS-sel pedig némi stílust adhat hozzá a játéktervhez.
Ezután használhatja a JavaScriptet a játék működéséhez. Ez magában foglalja a szimbólumok elhelyezését, a játékosok közötti felváltást és annak eldöntését, hogy ki nyer.
Hogyan készítsünk felhasználói felületet a Tic-Tac-Toe játékhoz
Elolvashatja és letöltheti a játék teljes forráskódját GitHub adattár.
A Tic-tac-toe egyike annak a sok játéknak, amelyet a programozás tanulása során készíthet. Jó egy új nyelv vagy környezet gyakorlása, pl a PICO-8 játékfejlesztő motor.
Webböngészőben futó Tic-tac-toe játék létrehozásához HTML-kódot kell hozzáadnia az oldal tartalmához. Ezután CSS segítségével stílusozhatja ezt.
- Hozzon létre egy új fájlt "index.html" néven.
- Az "index.html"-ben adja hozzá a HTML-fájl alapvető szerkezetét:
html>
<htmllang="en-US">
<fej>
<cím>Tic Tac Toe játékcím>
fej>
<test>
test>
html> - A HTML body címkén belül adjon hozzá egy táblázatot, amely három sort tartalmaz, minden sorban három cellával:
<divosztály="tartály">
<asztal>
<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>
asztal>
div> - A HTML-fájllal azonos mappában hozzon létre egy új fájlt "styles.css" néven.
- A CSS-fájlon belül adjon hozzá néhány stílust a 3:3 rácshoz:
asztal {
határ-összeomlás: összeomlás;
árrés: 0 auto;
}td {
szélesség: 100px;
magasság: 100px;
szöveg igazítás: központ;
függőleges igazítás: középső;
határ: 1pxszilárdfekete;
} - Kapcsolja össze a CSS-fájlt a HTML-fájljával úgy, hogy hozzáadja a head címkéhez:
<linkrel="stíluslap"típus="text/css"href="stílusok.css">
Hogyan adjunk felváltva szimbólumokat a játéktáblához
A játékban két játékos vesz részt, mindegyiken "X" vagy "O" szimbólum látható. „X” vagy „O” szimbólumot is hozzáadhat a rács egyik cellájára kattintva. Ez addig folytatódik, amíg valamelyikőtök egyenes vízszintes, függőleges vagy átlós sort nem hoz létre.
Ezt a funkciót JavaScript segítségével adhatja hozzá.
- A HTML- és CSS-fájlokkal azonos mappában hozzon létre egy „script.js” nevű JavaScript-fájlt.
- Kapcsolja össze a JavaScript-fájlt a HTML-fájljával úgy, hogy hozzáadja a szkriptet a body címke aljához:
<test>
Itt a kódod
<forgatókönyvsrc="script.js">forgatókönyv>
test> - A JavaScript-fájlon belül adjon hozzá egy karakterláncot, amely a játékos szimbólumát ábrázolja. Ez lehet "X" vagy "O". Alapértelmezés szerint az első játékos "X"-et tesz:
hagyja playerSymbol = "X"; - Adjon hozzá egy másik változót annak nyomon követéséhez, hogy a játék véget ért-e:
hagyja játék véget ért = hamis - A HTML-tábla minden cellájának azonosítója 1 és 9 között van. A táblázat minden cellájához adjon hozzá egy eseményfigyelőt, amely akkor fut le, amikor a felhasználó a cellára kattint:
számára (hagyja i = 1; én <= 9; i++) {
dokumentum.getElementById (i.toString()).addEventListener(
"kattintás",
funkció() {
}
);
} - Az eseményfigyelőn belül módosítsa a belső HTML-kódot az aktuális szimbólum megjelenítéséhez. Feltétlenül használja egy JavaScript feltételes utasítás először győződjön meg arról, hogy a cella üres, és hogy a játék még nem ért véget:
ha (ez.innerHTML "" && !gameEnded) {
ez.innerHTML = playerSymbol;
} - Adjon hozzá egy osztályt a HTML elemhez a rácson megjelenő szimbólum stílusához. A CSS-osztályok neve "X" vagy "O" lesz, a szimbólumtól függően:
ez.classList.add (playerSymbol.toLowerCase()); - A „styles.css” fájlban adja hozzá ezt a két új osztályt az „X” és „O” szimbólumokhoz. Az "X" és az "O" szimbólumok különböző színekben jelennek meg:
.x {
szín: kék;
betűméret: 80px;
}.o {
szín: piros;
betűméret: 80px;
} - A JavaScript fájlban, miután megváltoztatta az innerHTML-t a szimbólum megjelenítéséhez, cserélje ki a szimbólumot. Például, ha a játékos most egy „X”-et helyezett el, módosítsa a következő szimbólumot „O”-ra:
ha (playerSymbol "X")
playerSymbol = "O"
más
playerSymbol = "X" - A játék futtatásához nyissa meg az "index.html" fájlt egy webböngészőben a 3x3 rács megjelenítéséhez:
- Kezdje el a szimbólumok elhelyezését a rácson a cellákra kattintva. A játékban az "X" és az "O" szimbólumok váltakoznak:
Hogyan határozzuk meg a nyertest
Jelenleg a játék akkor is folytatódik, ha egy játékos három egymást követő szimbólumot helyezett el. Ennek ellenőrzéséhez minden kör után hozzá kell adnia egy befejezési feltételt.
- A JavaScript-fájlon belül adjon hozzá egy új változót a 3:3 rács összes lehetséges „nyertes” pozíciójának tárolásához. Például az „[1,2,3]” a felső sor, vagy az „[1,4,7]” egy átlós sor.
hagyja 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]
]; - Adjon hozzá egy új, checkWin() nevű függvényt:
funkciócheckWin() {
} - A függvényen belül görgessen végig minden lehetséges nyerő pozíción:
számára (hagyja i = 0; i < winPos.length; i++) {} - A for cikluson belül ellenőrizze, hogy minden cella tartalmazza-e a játékos szimbólumát:
ha (
dokumentum.getElementById (winPos[i][0]).innerHTML playerSymbol &&
dokumentum.getElementById (winPos[i][1]).innerHTML playerSymbol &&
dokumentum.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Ha a feltétel kiértékelése igaz, akkor minden szimbólum egyenes vonalban van. Az if utasításon belül jelenítsen meg egy üzenetet a felhasználónak. A HTML-elem stílusát úgy is módosíthatja, hogy hozzáad egy "win" nevű CSS-osztályt:
dokumentum.getElementById (winPos[i][0]).classList.add("győzelem");
dokumentum.getElementById (winPos[i][1]).classList.add("győzelem");
dokumentum.getElementById (winPos[i][2]).classList.add("győzelem");
játék véget ért = igaz;setTimeout(funkció() {
figyelmeztetés (playerSymbol + "győzelem!");
}, 500); - Adja hozzá ezt a "win" CSS-osztályt a "styles.css" fájlhoz. Amikor a játékos nyer, a nyertes cellák háttérszínét sárgára változtatja:
.győzelem {
háttérszín: sárga;
} - Hívja meg a checkWin() függvényt minden alkalommal, amikor egy játékos köre van, az előző lépésekben hozzáadott eseménykezelőn belül:
számára (hagyja i = 1; én <= 9; i++) {
// Amikor egy játékos rákattint egy cellára
dokumentum.getElementById (i.toString()).addEventListener(
"kattintás",
funkció() {
ha (ez.innerHTML "" && !gameEnded) {
// Jelenítse meg az „X” vagy „O” jelet a cellában, és stílust állítson be
ez.innerHTML = playerSymbol;
ez.classList.add (playerSymbol.toLowerCase());
// Ellenőrizze, hogy egy játékos nyert-e
checkWin();
// Cserélje ki a szimbólumot a másikra a következő körhöz
ha (playerSymbol "X")
playerSymbol = "O"
más
playerSymbol = "X"
}
}
);
}
Hogyan állítsuk vissza a játéktáblát
Ha egy játékos megnyerte a játékot, visszaállíthatja a játéktáblát. Döntetlen esetén is visszaállíthatja a játéktáblát.
- A HTML-fájlban a táblázat után adjon hozzá egy visszaállítás gombot:
<gombid="Visszaállítás">Visszaállításgomb> - Adjon hozzá némi stílust a reset gombhoz:
.tartály {
kijelző: Flex;
flex-irány: oszlop;
}#Visszaállítás {
árrés: 48px 40%;
párnázás: 20px;
} - A JavaScript-fájlban adjon hozzá egy eseménykezelőt, amely akkor fut le, amikor a felhasználó a visszaállítás gombra kattint:
dokumentum.getElementById("Visszaállítás").addEventListener(
"kattintás",
funkció() {}
); - A rács minden cellájához szerezze be a HTML elemet a getElementById() függvény segítségével. Állítsa vissza a belső HTML-kódot az „O” és „X” szimbólumok eltávolításához, valamint az összes többi CSS-stílus eltávolításához:
számára (hagyja i = 1; én <= 9; i++) {
dokumentum.getElementById (i.toString()).innerHTML = "";
dokumentum.getElementById (i.toString()).classList.remove("x");
dokumentum.getElementById (i.toString()).classList.remove("o");
dokumentum.getElementById (i.toString()).classList.remove("győzelem");
játék véget ért = hamis;
} - Futtassa a játékot az "index.html" fájl megnyitásával egy webböngészőben.
- Kezdje el helyezni az „X” és „O” szimbólumokat a rácsra. Próbáld megnyerni valamelyik szimbólumot.
- Nyomja meg a reset gombot a játéktábla alaphelyzetbe állításához.
JavaScript tanulása játékok készítésével
Továbbfejlesztheti programozási készségeit, ha további projekteket hoz létre JavaScriptben. Könnyű egyszerű játékokat és eszközöket készíteni webes környezetben, többplatformos, nyílt technológiák, például JavaScript és HTML használatával.
Nincs jobb módszer a programozás fejlesztésére, mint a programok írásának gyakorlása!
