Tic-tac-toe on suosittu peli, joka käyttää 3×3-ruudukkoa. Pelin tavoitteena on olla ensimmäinen pelaaja, joka asettaa kolme symbolia suoraan vaakasuoraan, pystysuoraan tai vinottaiseen riviin.
Voit luoda Tic-tac-toe-pelin, joka toimii verkkoselaimessa HTML: n, CSS: n ja JavaScriptin avulla. Voit käyttää HTML: ää lisätäksesi sisältöä, joka sisältää 3×3-ruudukon, ja CSS: n avulla lisätäksesi tyyliä pelin suunnitteluun.
Tämän jälkeen voit käyttää JavaScriptiä pelin toiminnassa. Tämä sisältää symbolien sijoittamisen, vuorottelemisen pelaajien välillä ja voittajan päättämisen.
Kuinka luoda käyttöliittymä Tic-Tac-Toe -pelille
Voit lukea ja ladata tämän pelin täydellisen lähdekoodin siitä GitHub-arkisto.
Tic-tac-toe on yksi monista peleistä, joita voit tehdä, kun opettelet ohjelmoinnin. On hyvä harjoitella uutta kieltä tai ympäristöä, esim PICO-8 pelinkehitysmoottori.
Jos haluat luoda verkkoselaimessa toimivan Tic-tac-toe-pelin, sinun on lisättävä sivun sisältöön HTML. Tämän jälkeen voit muotoilla tämän CSS: n avulla.
- Luo uusi tiedosto nimeltä "index.html".
- Lisää kohtaan "index.html" HTML-tiedoston perusrakenne:
html>
<htmllang="en-US">
<pää>
<otsikko>Tic Tac Toe peliotsikko>
pää>
<kehon>
kehon>
html> - Lisää HTML-tekstitunnisteen sisään taulukko, joka sisältää kolme riviä ja kolme solua kullakin rivillä:
<divluokkaa="kontti">
<pöytä>
<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>
pöytä>
div> - Luo samaan kansioon HTML-tiedoston kanssa uusi tiedosto nimeltä "styles.css".
- Lisää tyyliä 3 x 3 -ruudukkoon CSS-tiedoston sisällä:
pöytä {
rajan romahtaminen: romahdus;
marginaali: 0 auto;
}td {
leveys: 100px;
korkeus: 100px;
tekstin tasaus: keskusta;
pystytasaus: keskellä;
rajaa: 1pxkiinteämusta;
} - Linkitä CSS-tiedosto HTML-tiedostoosi lisäämällä se head-tunnisteeseen:
<linkkirel="tyylitaulukko"tyyppi="teksti/css"href="tyylit.css">
Kuinka lisätä symboleja vuorotellen pelilaudalle
Pelissä on kaksi pelaajaa, joilla kummallakin on joko "X" tai "O" symboli. Voit lisätä joko "X"- tai "O"-symbolin napsauttamalla yhtä ruudukon soluista. Tämä jatkuu, kunnes joku teistä on luonut suoran vaaka-, pysty- tai diagonaalirivin.
Voit lisätä tämän toiminnon JavaScriptin avulla.
- Luo samaan kansioon HTML- ja CSS-tiedostojesi kanssa JavaScript-tiedosto nimeltä "script.js".
- Linkitä JavaScript-tiedosto HTML-tiedostoosi lisäämällä komentosarja body-tagin alaosaan:
<kehon>
Koodisi tässä
<käsikirjoitussrc="script.js">käsikirjoitus>
kehon> - Lisää JavaScript-tiedoston sisään merkkijono, joka edustaa pelaajan symbolia. Tämä voi olla joko "X" tai "O". Oletuksena ensimmäinen pelaaja asettaa "X":n:
antaa pelaajaSymboli = "X"; - Lisää toinen muuttuja seurataksesi, onko peli päättynyt:
antaa peli päättynyt = väärä - Jokaisella HTML-taulukon solulla on tunnus väliltä 1–9. Lisää jokaiseen taulukon soluun tapahtumaseurain, joka käynnistyy aina, kun käyttäjä napsauttaa solua:
varten (antaa minä = 1; minä <= 9; i++) {
asiakirja.getElementById (i.toString()).addEventListener(
"klikkaus",
toiminto() {
}
);
} - Muuta tapahtuman kuuntelun sisällä sisäinen HTML näyttämään nykyinen symboli. Muista käyttää JavaScript-ehdollinen lauseke Varmista ensin, että solu on tyhjä ja että peli ei ole vielä päättynyt:
jos (Tämä.innerHTML "" && !gameEnded) {
Tämä.innerHTML = playerSymbol;
} - Lisää luokka HTML-elementtiin muokataksesi ruudukossa näkyvää symbolia. CSS-luokkien nimi on joko "X" tai "O" symbolista riippuen:
Tämä.classList.add (playerSymbol.toLowerCase()); - Lisää "styles.css"-tiedostoon nämä kaksi uutta luokkaa "X"- ja "O"-symboleille. "X"- ja "O"-symbolit näkyvät eri väreinä:
.x {
väri: sininen;
Fonttikoko: 80px;
}.o {
väri: punainen;
Fonttikoko: 80px;
} - Vaihda symboli JavaScript-tiedostossa sen jälkeen, kun olet muuttanut sisemmän HTML-koodin näyttämään symbolin. Jos pelaaja esimerkiksi laittoi juuri "X", muuta seuraavaksi symboliksi "O":
jos (pelaajasymboli "X")
pelaajaSymboli = "O"
muu
pelaajaSymboli = "X" - Pelin käynnistämiseksi avaa "index.html"-tiedosto verkkoselaimessa näyttääksesi 3 x 3 -ruudukon:
- Aloita symbolien sijoittaminen ruudukkoon napsauttamalla soluja. Peli vaihtelee "X"- ja "O"-symbolien välillä:
Kuinka määrittää voittaja
Tällä hetkellä peli jatkuu, vaikka pelaaja olisi asettanut kolme peräkkäistä symbolia. Sinun on lisättävä loppuehto tarkistaaksesi tämän jokaisen käännöksen jälkeen.
- Lisää JavaScript-tiedostoon uusi muuttuja, joka tallentaa kaikki mahdolliset "voittajapaikat" 3 x 3 -ruudukkoon. Esimerkiksi "[1,2,3]" on ylin rivi tai "[1,4,7]" on diagonaalinen rivi.
antaa 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]
]; - Lisää uusi funktio nimeltä checkWin():
toimintocheckWin() {
} - Käy funktion sisällä läpi jokaisen mahdollisen voittopaikan:
varten (antaa minä = 0; i < winPos.length; i++) {} - Tarkista for-silmukan sisällä, sisältävätkö kaikki solut pelaajan symbolin:
jos (
asiakirja.getElementById (winPos[i][0]).innerHTML playerSymboli &&
asiakirja.getElementById (winPos[i][1]).innerHTML playerSymboli &&
asiakirja.getElementById (winPos[i][2]).innerHTML playerSymbol
) {} - Jos ehdon arvo on tosi, kaikki symbolit ovat suorassa linjassa. Näytä viesti käyttäjälle if-lausekkeen sisällä. Voit myös muuttaa HTML-elementin tyyliä lisäämällä CSS-luokan "win":
asiakirja.getElementById (winPos[i][0]).classList.add("voittaa");
asiakirja.getElementById (winPos[i][1]).classList.add("voittaa");
asiakirja.getElementById (winPos[i][2]).classList.add("voittaa");
peli päättynyt = totta;setTimeout(toiminto() {
hälytys (playerSymbol + "voitto!");
}, 500); - Lisää tämä "win" CSS-luokka "styles.css"-tiedostoon. Kun pelaaja voittaa, se muuttaa voittaneiden solujen taustavärin keltaiseksi:
.voittaa {
taustaväri: keltainen;
} - Kutsu checkWin()-funktiota joka kerta, kun pelaajalla on vuoro, edellisissä vaiheissa lisätyn tapahtumakäsittelijän sisällä:
varten (antaa minä = 1; minä <= 9; i++) {
// Aina kun pelaaja napsauttaa solua
asiakirja.getElementById (i.toString()).addEventListener(
"klikkaus",
toiminto() {
jos (Tämä.innerHTML "" && !gameEnded) {
// Näytä joko "X" tai "O" solussa ja muotoile se
Tämä.innerHTML = playerSymbol;
Tämä.classList.add (playerSymbol.toLowerCase());
// Tarkista, onko pelaaja voittanut
checkWin();
// Vaihda symboli toiseen seuraavaa vuoroa varten
jos (pelaajasymboli "X")
pelaajaSymboli = "O"
muu
pelaajaSymboli = "X"
}
}
);
}
Kuinka nollata pelilauta
Kun pelaaja on voittanut pelin, voit nollata pelilaudan. Voit myös nollata pelilaudan tasatilanteessa.
- Lisää HTML-tiedostoon taulukon jälkeen nollauspainike:
<-painikettaid="nollaa">Nollaa-painiketta> - Lisää tyyliä nollauspainikkeeseen:
.container {
näyttö: flex;
flex-suunta: sarakkeessa;
}#nollaus {
marginaali: 48px 40%;
pehmuste: 20px;
} - Lisää JavaScript-tiedostoon tapahtumakäsittelijä, joka käynnistyy aina, kun käyttäjä napsauttaa nollauspainiketta:
asiakirja.getElementById("nollaa").addEventListener(
"klikkaus",
toiminto() {}
); - Hae jokaiselle ruudukon solulle HTML-elementti käyttämällä getElementById()-funktiota. Nollaa sisäinen HTML poistaaksesi O- ja X-symbolit ja kaikki muut CSS-tyylit:
varten (antaa minä = 1; minä <= 9; i++) {
asiakirja.getElementById (i.toString()).innerHTML = "";
asiakirja.getElementById (i.toString()).classList.remove("x");
asiakirja.getElementById (i.toString()).classList.remove("o");
asiakirja.getElementById (i.toString()).classList.remove("voittaa");
peli päättynyt = väärä;
} - Suorita peli avaamalla "index.html"-tiedosto verkkoselaimessa.
- Aloita X- ja O-symbolien sijoittaminen ruudukkoon. Yritä saada yksi symboleista voittamaan.
- Paina nollauspainiketta nollataksesi pelilaudan.
JavaScriptin oppiminen tekemällä pelejä
Voit jatkaa ohjelmointitaitosi parantamista luomalla lisää projekteja JavaScriptillä. Yksinkertaisia pelejä ja työkaluja on helppo rakentaa verkkoympäristössä käyttämällä monialustaisia, avoimia teknologioita, kuten JavaScript ja HTML.
Ei ole parempaa tapaa parantaa ohjelmointiasi kuin harjoitella ohjelmien kirjoittamista!
