Tekijä: Sharlene Khan

Luo tämä vanhan koulun peli uudelleen selaimessasi ja opi matkan varrella JavaScript-pelien kehittämisestä.

Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

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.

  1. Luo uusi tiedosto nimeltä "index.html".
  2. Avaa tiedosto millä tahansa tekstieditorilla, kuten
    instagram viewer
    Visual Code tai Atom. Lisää HTML-koodin perusrakenne:
    html>
    <htmllang="en-US">
    <pää>
    <otsikko>Käärme peliotsikko>
    pää>
    <kehon>

    kehon>
    html>

  3. Lisää body-tunnisteen sisään kangas edustamaan käärmeen pelilautaa.
    <h2>Käärme pelih2>
    <divid="peli">
    <kangasid="käärme">kangas>
    div>
  4. Luo samaan kansioon HTML-tiedoston kanssa uusi tiedosto nimeltä "styles.css".
  5. 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;
    }
  6. Lisää HTML-tiedostosi head-tunnisteeseen linkki CSS: ään:
    <linkkirel="tyylitaulukko"tyyppi="teksti/css"href="tyylit.css">
  7. 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.

  1. Linkitä HTML-tiedostossasi uuteen JavaScript-tiedostoon body-tagin alaosassa:
    <kehon>
    Koodisi tässä
    <käsikirjoitussrc="script.js">käsikirjoitus>
    kehon>
  2. Luo script.js ja aloita hankkimalla kankaan DOM-elementti:
    var kangas = asiakirja.getElementById("käärme");
  3. 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");
  4. 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;
  5. 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;
  6. Ilmoita käärmeen X- ja Y-alkuasento:
    var käärmeX = 0;
    var käärmeY = 0;
  7. Luo uusi toiminto. Lisää aloituskäärmepala snakeSegments-taulukkoon sen X- ja Y-alkukoordinaateineen:
    toimintoliikkuaKäärme() {
    snakeSegments.unshift({ x: käärmeX, y: käärmeY });
    }
  8. 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";
    }
  9. 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);
    }
  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();
  11. 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ä.

  1. Ilmoita tiedoston yläosassa käärmeen alkusuunta:
    var suuntaX = 10;
    var suuntaY = 0;
  2. Lisää tapahtumakäsittelijä, joka laukeaa, kun pelaaja painaa näppäintä:
    asiakirja.onkeydown = toiminto(tapahtuma) {

    };

  3. 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;
    }
  4. 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;
    }
  5. Peli ei tällä hetkellä poista aiempia osia käärmeen liikkuessa. Tämä saa käärmeestä näyttämään tältä:
  6. 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);
  7. Sinun on myös poistettava snakeSegments-taulukon viimeinen elementti moveSnake()-funktion sisällä:
    sillä aikaa (snakeSegments.length > snakeLength) {
    käärmeSegments.pop();
    }
  8. 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.

  1. Ilmoita uusi muuttuja tiedoston yläosaan ruokapalojen tallentamiseksi:
    var pisteet = [];
  2. 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 });
    }
    }
  3. 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);
    }
  4. Kutsu uusi spawnDots()-funktio pelisilmukan sisällä:
    toimintogameLoop() {
    liikkuaKäärme();
    piirräKäärme();
    spawnDots();
    jos(!peli päättynyt) {
    setTimeout (gameLoop, 100);
    }
    }
  5. 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.

  1. Luo uusi toiminto. Selaa sen sisällä pistetaulukon jokaisen elementin läpi:
    toimintotarkista Törmäys() {
    varten (var minä = 0; i < dots.length; i++) {

    }
    }
  2. 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);
    }
  3. Kutsu uusi checkCollision()-funktio pelisilmukassa:
    toimintogameLoop() {
    liikkuaKäärme();
    piirräKäärme();
    spawnDots();
    checkCollision();
    jos(!peli päättynyt) {
    setTimeout (gameLoop, 100);
    }
    }
  4. 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.

  1. Luo uusi toiminto "Peli ohi" -ilmoituksen tulostamiseksi.
    toimintopeli ohi() {
    setTimeout(toiminto() {
    hälytys ("Peli ohi!");
    }, 500);
    peli päättynyt = totta
    }
  2. 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();
    }
  3. 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++) {

    }

  4. 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();
    }
  5. 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.

tilaa uutiskirjeemme

Kommentit

JaaTweetJaaJaaJaa
Kopio
Sähköposti
Jaa
JaaTweetJaaJaaJaa
Kopio
Sähköposti

Linkki kopioitu leikepöydälle

Liittyvät aiheet

  • Ohjelmointi
  • Pelaaminen
  • Ohjelmointi
  • JavaScript
  • Pelin kehitys

Kirjailijasta

Sharlene Khan (83 artikkelia julkaistu)

Shay työskentelee kokopäiväisesti ohjelmistokehittäjänä ja kirjoittaa mielellään oppaita auttaakseen muita. Hän on koulutukseltaan IT ja hänellä on aikaisempaa kokemusta laadunvarmistuksesta ja ohjauksesta. Shay rakastaa pelaamista ja pianon soittamista.