Kuinka tehdä käärmepeli HTML: n, CSS: n ja JavaScriptin avulla

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.