Luo tämä vanhan koulun peli uudelleen selaimessasi ja opi matkan varrella JavaScript-pelien kehittämisestä.
Käärmepeli on klassinen ohjelmointiharjoitus, jonka avulla voit parantaa ohjelmointi- ja ongelmanratkaisutaitojasi. Voit luoda pelin verkkoselaimella HTML: n, CSS: n ja JavaScriptin avulla.
Pelissä ohjaat käärmettä, joka liikkuu laudan ympärillä. Käärme kasvaa kokoa, kun keräät ruokaa. Peli päättyy, jos törmäät omaan häntäsi tai johonkin seinään.
Käyttöliittymän luominen Canvasille
Käytä HTML: ää ja CSS: ää lisätäksesi kankaan käärmeen liikkumista varten. On monia muitakin HTML- ja CSS-projektit voit harjoitella, jos haluat tarkistaa peruskäsitteitä.
Voit viitata tähän projektiin GitHub-arkisto koko lähdekoodille.
- Luo uusi tiedosto nimeltä "index.html".
- Avaa tiedosto millä tahansa tekstieditorilla, kuten
Visual Code tai Atom. Lisää HTML-koodin perusrakenne:
html>
<htmllang="en-US">
<pää>
<otsikko>Käärme peliotsikko>
pää>
<kehon>kehon>
html> - Lisää body-tunnisteen sisään kangas edustamaan käärmeen pelilautaa.
<h2>Käärme pelih2>
<divid="peli">
<kangasid="käärme">kangas>
div> - Luo samaan kansioon HTML-tiedoston kanssa uusi tiedosto nimeltä "styles.css".
- Lisää sisälle hieman CSS: ää koko verkkosivulle. Voit myös tyylittää verkkosivusi käyttämällä muita tärkeitä CSS-vinkkejä ja temppuja.
#peli {
leveys:400px;
korkeus:400px;
marginaali:0auto;
taustaväri:#eee;
}
h2 {
tekstin tasaus:keskusta;
font-perhe: Arial;
Fonttikoko:36px;
} - Lisää HTML-tiedostosi head-tunnisteeseen linkki CSS: ään:
<linkkirel="tyylitaulukko"tyyppi="teksti/css"href="tyylit.css">
- Voit tarkastella kangasta avaamalla "index.html"-tiedostosi verkkoselaimessa.
Kuinka piirtää käärme
Alla olevassa esimerkissä musta viiva edustaa käärmettä:
Useat neliöt tai "segmentit" muodostavat käärmeen. Kun käärme kasvaa, myös ruutujen määrä kasvaa. Pelin alussa käärmeen pituus on yksi pala.
- Linkitä HTML-tiedostossasi uuteen JavaScript-tiedostoon body-tagin alaosassa:
<kehon>
Koodisi tässä
<käsikirjoitussrc="script.js">käsikirjoitus>
kehon> - Luo script.js ja aloita hankkimalla kankaan DOM-elementti:
var kangas = asiakirja.getElementById("käärme");
- Aseta konteksti canvas-HTML-elementille. Tässä tapauksessa haluat pelin renderöivän 2D-kankaan. Tämän avulla voit piirtää useita muotoja tai kuvia HTML-elementtiin.
var canvas2d = canvas.getContext("2d");
- Aseta muut pelin sisäiset muuttujat, kuten onko peli päättynyt ja kankaan korkeus ja leveys:
var peli päättynyt = väärä;
canvas.width = 400;
canvas.height = 400; - Ilmoita muuttuja nimeltä "snakeSegments". Tämä pitää sisällään käärmeen viemien "neliöiden" määrän. Voit myös luoda muuttujan seurataksesi käärmeen pituutta:
var snakeSegments = [];
var käärmeen pituus = 1; - Ilmoita käärmeen X- ja Y-alkuasento:
var käärmeX = 0;
var käärmeY = 0; - Luo uusi toiminto. Lisää aloituskäärmepala snakeSegments-taulukkoon sen X- ja Y-alkukoordinaateineen:
toimintoliikkuaKäärme() {
snakeSegments.unshift({ x: käärmeX, y: käärmeY });
} - Luo uusi toiminto. Aseta sisällä täyttötyyli mustaksi. Tätä väriä se käyttää käärmeen piirtämiseen:
toimintopiirräKäärme() {
canvas2d.fillStyle = "musta";
} - Piirrä jokaiselle käärmeen koon muodostavalle segmentille neliö, jonka leveys ja korkeus on 10 pikseliä:
varten (var minä = 0; i < käärmeSegments.length; i++) {
canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
} - Luo pelisilmukka, joka pyörii 100 millisekunnin välein. Tämä saa pelin jatkuvasti piirtämään käärmeen uuteen asentoonsa, mikä on erittäin tärkeää, kun käärme alkaa liikkua:
toimintogameLoop() {
liikkuaKäärme();
piirräKäärme(); - Avaa "index.html"-tiedosto verkkoselaimessa nähdäksesi käärmeen pienimmässä koossa aloitusasennossaan.
Kuinka saada käärme liikkumaan
Lisää logiikkaa siirtääksesi käärmettä eri suuntiin riippuen siitä, mitä painiketta pelaaja painaa näppäimistöllä.
- Ilmoita tiedoston yläosassa käärmeen alkusuunta:
var suuntaX = 10;
var suuntaY = 0; - Lisää tapahtumakäsittelijä, joka laukeaa, kun pelaaja painaa näppäintä:
asiakirja.onkeydown = toiminto(tapahtuma) {
};
- Muuta käärmeen liikkeen suuntaa tapahtumakäsittelijän sisällä painetun näppäimen perusteella:
vaihtaa (tapahtuma.avainkoodi) {
tapaus37: // Vasen nuoli
suuntaX = -10;
suuntaY = 0;
tauko;
tapaus38: // Nuoli ylös
suuntaX = 0;
suuntaY = -10;
tauko;
tapaus39: // Oikea nuoli
suuntaX = 10;
suuntaY = 0;
tauko;
tapaus40: // Nuoli alas
suuntaX = 0;
suuntaY = 10;
tauko;
} - Käytä moveSnake()-funktiossa suuntaa päivittääksesi käärmeen X- ja Y-koordinaatit. Jos esimerkiksi käärmeen täytyy liikkua vasemmalle, X-suunta on "-10". Tämä päivittää X-koordinaatin poistamaan 10 pikseliä jokaisesta pelin kehyksestä:
toimintoliikkuaKäärme() {
snakeSegments.unshift({ x: käärmeX, y: käärmeY });
käärmeX += suuntaX;
käärmeY += suuntaY;
} - Peli ei tällä hetkellä poista aiempia osia käärmeen liikkuessa. Tämä saa käärmeestä näyttämään tältä:
- Korjaa tämä tyhjentämällä kangas ennen uuden käärmeen piirtämistä jokaiseen kehykseen drawSnake()-funktion alussa:
canvas2d.clearRect(0, 0, canvas.width, canvas.height);
- Sinun on myös poistettava snakeSegments-taulukon viimeinen elementti moveSnake()-funktion sisällä:
sillä aikaa (snakeSegments.length > snakeLength) {
käärmeSegments.pop();
} - Avaa "index.html"-tiedosto ja siirrä käärmettä painamalla vasenta, oikeaa, ylös- tai alasnäppäintä.
Kuinka lisätä ruokaa kankaalle
Lisää pisteitä lautapeliin edustamaan käärmeen ruokaosia.
- Ilmoita uusi muuttuja tiedoston yläosaan ruokapalojen tallentamiseksi:
var pisteet = [];
- Luo uusi toiminto. Luo sisällä satunnaiset X- ja Y-koordinaatit pisteille. Voit myös varmistaa, että taululla on kerrallaan vain 10 pistettä:
toimintospawnDots() {
jos(pisteet.pituus < 10) {
var dotX = Matematiikka.lattia(Matematiikka.random() * canvas.width);
var dotY = Matematiikka.lattia(Matematiikka.random() * canvas.height);
dots.push({ x: dotX, y: dotY });
}
} - Kun olet luonut X- ja Y-koordinaatit ruoalle, piirrä ne kankaalle punaisella värillä:
varten (var minä = 0; i < dots.length; i++) {
canvas2d.fillStyle = "punainen";
canvas2d.fillRect (dots[i].x, dots[i].y, 10, 10);
} - Kutsu uusi spawnDots()-funktio pelisilmukan sisällä:
toimintogameLoop() {
liikkuaKäärme();
piirräKäärme();
spawnDots();
jos(!peli päättynyt) {
setTimeout (gameLoop, 100);
}
} - Avaa "index.html"-tiedosto nähdäksesi ruoan pelilaudalla.
Kuinka saada käärme kasvamaan
Voit saada käärmeen kasvamaan lisäämällä sen pituutta, kun se törmää ruokapisteeseen.
- Luo uusi toiminto. Selaa sen sisällä pistetaulukon jokaisen elementin läpi:
toimintotarkista Törmäys() {
varten (var minä = 0; i < dots.length; i++) {
}
} - Jos käärmeen sijainti vastaa minkä tahansa pisteen koordinaatteja, lisää käärmeen pituutta ja poista piste:
jos (käärmeX < pistettä[i].x + 10 &&
käärmeX + 10 > pisteet[i].x &&
käärmeY < pisteet[i].y + 10 &&
käärmeY + 10 > pisteet[i].y) {
snakeLength++;
dots.splice (i, 1);
} - Kutsu uusi checkCollision()-funktio pelisilmukassa:
toimintogameLoop() {
liikkuaKäärme();
piirräKäärme();
spawnDots();
checkCollision();
jos(!peli päättynyt) {
setTimeout (gameLoop, 100);
}
} - Avaa "index.html"-tiedosto verkkoselaimessa. Siirrä käärmettä näppäimistön avulla kerätäksesi ruokapalat ja kasvattaaksesi käärmettä.
Pelin lopettaminen
Päättääksesi pelin tarkista, törmäsikö käärme omaan häntäänsä tai johonkin seinään.
- Luo uusi toiminto "Peli ohi" -ilmoituksen tulostamiseksi.
toimintopeli ohi() {
setTimeout(toiminto() {
hälytys ("Peli ohi!");
}, 500);
peli päättynyt = totta
} - Tarkista checkCollision()-funktion sisällä, osuiko käärme johonkin kankaan seinään. Jos näin on, kutsu gameOver()-funktio:
jos (käärmeX < -10 ||
käärmeY < -10 ||
käärmeX > canvas.width+10 ||
käärmeY > canvas.height+10) {
peli ohi();
} - Tarkistaaksesi, törmäsikö käärmeen pää johonkin hännän osaan, kiertele jokaisen käärmeen palan läpi:
varten (var minä = 1; i < käärmeSegments.length; i++) {
}
- Tarkista for-silmukan sisällä, vastaako käärmeen pään sijainti jotakin hännän segmenttiä. Jos näin on, tämä tarkoittaa, että pää törmäsi häntään, joten lopeta peli:
jos (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
peli ohi();
} - Avaa "index.html"-tiedosto verkkoselaimessa. Yritä lyödä seinää tai omaa häntääsi lopettaaksesi pelin.
JavaScript-käsitteiden oppiminen pelien kautta
Pelien luominen voi olla loistava tapa tehdä oppimiskokemuksestasi nautinnollisempi. Tee lisää pelejä jatkaaksesi JavaScript-tietojesi parantamista.