Kuidas teha Snake mängu HTML-i, CSS-i ja JavaScripti abil

Madumäng on klassikaline programmeerimisharjutus, mille abil saate parandada oma programmeerimis- ja probleemide lahendamise oskusi. Mängu saate luua veebibrauseris, kasutades HTML-i, CSS-i ja JavaScripti.

Mängus juhite madu, mis liigub ümber laua. Madu kasvab toidu kogumisel. Mäng lõpeb, kui põrkate kokku oma saba või mõne seinaga.

Kuidas luua lõuendi kasutajaliidest

Kasutage HTML-i ja CSS-i, et lisada lõuend, et madu saaks edasi liikuda. On palju teisigi HTML ja CSS projektid saate edasi harjutada, kui teil on vaja mõnda põhikontseptsiooni üle vaadata.

Võite viidata sellele projektile GitHubi hoidla täieliku lähtekoodi jaoks.

1. Looge uus fail nimega "index.html".
2. Avage fail mis tahes tekstiredaktoriga, näiteks
   instagram viewer
   Visuaalne kood või Atom. Lisage põhiline HTML-koodi struktuur:

   html>
   <htmllang="en-US">
   <pea>
   <pealkiri>Madu mängpealkiri>
   pea>
   <keha>
   keha>
   html>

3. Lisage kehasildi sisse lõuend, mis tähistab mao mängulauda.

   <h2>Madu mängh2>
   <divid="mäng">
   <lõuendid="madu">lõuend>
   div>

4. Looge HTML-failiga samas kaustas uus fail nimega "styles.css".
5. Lisage kogu veebilehe jaoks veidi CSS-i. Saate oma veebisaidi stiili muuta ka muu abil olulisi CSS-i näpunäiteid ja nippe.

   #mäng {
   laius:400 pikslit;
   kõrgus:400 pikslit;
   marginaal:0auto;
   taustavärv:#eee;
   }
   h2 {
   teksti joondamine:Keskus;
   font-perekond: Arial;
   fondi suurus:36 pikslit;
   } 
   

6. Lisage oma HTML-faili head-märgendisse link CSS-ile:

   <linkrel="laadileht"tüüp="text/css"href="stiilid.css">

7. Lõuendi vaatamiseks avage veebibrauseris fail "index.html".

Kuidas madu joonistada

Allolevas näites tähistab must joon madu:

Madu moodustavad mitu ruutu või "segmenti". Madu kasvades suureneb ka ruutude arv. Mängu alguses on mao pikkus üks tükk.

1. Linkige oma HTML-failis body-märgendi allosas olevale uuele JavaScript-failile:

   <keha>
    Sinu kood siin 
   <stsenaariumsrc="script.js">stsenaarium>
   keha>

2. Looge script.js ja alustage lõuendi DOM-elemendi hankimisega:

   var lõuend = dokument.getElementById("madu");

3. Määrake lõuendi HTML-elemendi kontekst. Sel juhul soovite, et mäng renderdaks 2D lõuendi. See võimaldab teil HTML-elemendile joonistada mitu kujundit või pilti.

   var canvas2d = canvas.getContext("2d");

4. Määrake muud mängusisesed muutujad, näiteks kas mäng on lõppenud ning lõuendi kõrgus ja laius:

   var mäng lõppes = vale;
   lõuend.laius = 400;
   lõuend.kõrgus = 400;

5. Deklareerige muutuja nimega "snakeSegments". See mahutab "ruutude" arvu, mille madu võtab. Mao pikkuse jälgimiseks saate luua ka muutuja:

   var snakeSegments = [];
   var maduPikkus = 1;
   

6. Deklareerige mao esialgne X- ja Y-asend:

   var maduX = 0;
   var maduY = 0;

7. Looge uus funktsioon. Lisage sees snakeSegmentsi massiivi alustav madu koos selle X- ja Y-koordinaatidega:

   funktsiooniliikuda Madu() {
    snakeSegments.unshift({ x: maduX, y: snakeY });
   }

8. Looge uus funktsioon. Seadke sees täitelaad mustaks. Seda värvi kasutatakse mao joonistamiseks:

   funktsioonijoonistamaMadu() {
    canvas2d.fillStyle = "must"; 
   }

9. Iga mao suuruse moodustava segmendi jaoks tõmmake ruut laiuse ja kõrgusega 10 pikslit:

   jaoks (var i = 0; i < snakeSegments.length; i++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Looge mängutsükkel, mis jookseb iga 100 millisekundi järel. See paneb mängu madu pidevalt uude asendisse tõmbama, mis on väga oluline, kui madu hakkab liikuma:

    funktsioonigameLoop() {
     liigutamaSnake();
     joonistamaSnake();

11. Avage veebibrauseris fail "index.html", et näha madu oma väikseimas suuruses algpositsioonis.

Kuidas madu liikuma panna

Lisage loogikat, et liigutada madu erinevates suundades, olenevalt sellest, millist nuppu mängija klaviatuuril vajutab.

1. Faili ülaosas deklareerige mao esialgne suund:

   var suundX = 10;
   var suundY = 0;
   

2. Lisage sündmuste töötleja, mis käivitub, kui mängija vajutab klahvi:

   dokument.onkeydown = funktsiooni(sündmus) {
   };

3. Muutke sündmuste käitlejas madu liikumissuunda vajutatud klahvi alusel:

   lüliti (sündmus.keyCode) {
   juhtum37: // Vasak nool
    suundX = -10;
    suundY = 0;
   murda;
   juhtum38: // Ülesnool
    suundX = 0;
    suundY = -10;
   murda;
   juhtum39: // Paremnool
    suundX = 10;
    suundY = 0;
   murda;
   juhtum40: // Allanool
    suundX = 0;
    suundY = 10;
   murda;
   }

4. Funktsioonis moveSnake() kasutage suunda, et värskendada madu X- ja Y-koordinaate. Näiteks kui madu peab liikuma vasakule, on X suund "-10". See värskendab X-koordinaati, et eemaldada 10 pikslit iga mängu kaadri kohta:

   funktsiooniliikuda Madu() {
    snakeSegments.unshift({ x: maduX, y: snakeY });
    maduX += suundX;
    snakeY += suundY;
   }

5. Mäng ei eemalda praegu madu liikumise ajal eelmisi segmente. See muudab madu selliseks:
6. Selle parandamiseks tühjendage lõuend enne igasse kaadrisse uue mao joonistamist funktsiooni drawSnake() alguses:

   canvas2d.clearRect(0, 0, canvas.width, canvas.height);

7. Samuti peate eemaldama massiivi snakeSegments viimase elemendi funktsiooni moveSnake() seest:

   samal ajal (snakeSegments.length > snakeLength) {
    snakeSegments.pop();
   }

8. Avage fail "index.html" ja vajutage ussi liigutamiseks vasak-, parem-, üles- või allaklahvi.

Kuidas lõuendile toitu lisada

Lisage lauamängule punkte, mis tähistavad maole mõeldud toidutükke.

1. Toidutükkide massiivi salvestamiseks deklareerige faili ülaosas uus muutuja:

   var punktid = [];

2. Looge uus funktsioon. Sees genereerige punktide jaoks juhuslikud X- ja Y-koordinaadid. Samuti saate tagada, et tahvlil oleks igal ajal ainult 10 punkti:

   funktsioonispawnDots() {
   kui(punktid.pikkus < 10) {
   var dotX = matemaatika.floor(matemaatika.random() * canvas.width);
   var dotY = matemaatika.floor(matemaatika.random() * lõuend.kõrgus);
    dots.push({ x: dotX, y: dotY });
    }
   }

3. Pärast toidu X- ja Y-koordinaatide loomist joonistage need punase värviga lõuendile:

   jaoks (var i = 0; i < dots.length; i++) {
    canvas2d.fillStyle = "punane";
    canvas2d.fillRect (dots[i].x, dots[i].y, 10, 10);
   }

4. Kutsuge mängutsükli sees välja uus funktsioon spawnDots().

   funktsioonigameLoop() {
    liigutamaSnake();
    joonistamaSnake();
    spawnDots();
   kui(!mäng lõppes) {
    setTimeout (gameLoop, 100);
    }
   }

5. Toidu mängulaual vaatamiseks avage fail "index.html".

Kuidas panna madu kasvama

Saate panna mao kasvama, suurendades selle pikkust, kui see põrkub toidupunktiga.

1. Looge uus funktsioon. Sirvige selle sees läbi punktide massiivi kõik elemendid:

   funktsioonikontrollige Kokkupõrget() {
   jaoks (var i = 0; i < dots.length; i++) {
   
    }
   }

2. Kui mao asukoht ühtib mis tahes punkti koordinaatidega, suurendage mao pikkust ja kustutage punkt:

   kui (maduX < punktid[i].x + 10 && 
    maduX + 10 > dots[i].x && 
    maduY < punktid[i].y + 10 && 
    maduY + 10 > dots[i].y) {
    snakeLength++;
    dots.splice (i, 1);
   }

3. Kutsuge mängutsüklis välja uus funktsioon checkCollision().

   funktsioonigameLoop() {
    liigutamaSnake();
    joonistamaSnake();
    spawnDots();
    checkCollision();
   kui(!mäng lõppes) {
    setTimeout (gameLoop, 100);
    }
   }

4. Avage veebibrauseris fail "index.html". Liigutage madu klaviatuuri abil, et koguda toidutükke ja kasvatada madu.

Kuidas mängu lõpetada

Mängu lõpetamiseks kontrollige, kas madu põrkas kokku oma saba või mõne seinaga.

1. Looge uus funktsioon, et printida "Mäng läbi" hoiatus.

   funktsioonimäng läbi() {
    setTimeout(funktsiooni() {
    hoiatus ("Mäng läbi!");
    }, 500); 
    mäng lõppes = tõsi
   }

2. Kontrollige funktsiooni checkCollision() sees, kas madu tabas mõnda lõuendi seina. Kui jah, kutsuge funktsioon gameOver() välja:

   kui (maduX < -10 || 
    maduY < -10 || 
    maduX > lõuend.laius+10 ||
    SnakeY > canvas.height+10) {
    mäng läbi();
   }

3. Kontrollimaks, kas mao pea põrkas kokku mõne sabaosaga, silmustage läbi iga mao osa:

   jaoks (var i = 1; i < snakeSegments.length; i++) {
   }

4. Kontrollige silmuse sees, kas mao pea asukoht ühtib mõne sabasegmendiga. Kui jah, siis see tähendab, et pea põrkas kokku sabaga, nii et lõpetage mäng:

   kui (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    mäng läbi();
   }

5. Avage veebibrauseris fail "index.html". Mängu lõpetamiseks proovige lüüa vastu seina või oma saba.

JavaScripti kontseptsioonide õppimine mängude kaudu

Mängude loomine võib olla suurepärane viis õppimiskogemuse nauditavamaks muutmiseks. Jätkake rohkemate mängude tegemist, et oma JavaScripti teadmisi täiendada.