Kako napraviti igru ​​Snake koristeći HTML, CSS i JavaScript

Igra zmija je klasična vježba programiranja koju možete koristiti za poboljšanje svojih vještina programiranja i rješavanja problema. Igru možete izraditi u web pregledniku koristeći HTML, CSS i JavaScript.

U igrici upravljate zmijom koja se kreće po ploči. Zmija raste u veličini dok skupljate hranu. Igra će završiti ako se sudarite s vlastitim repom ili bilo kojim zidom.

Kako stvoriti korisničko sučelje za Canvas

Upotrijebite HTML i CSS da dodate platno po kojem se zmija može kretati. Postoje mnogi drugi HTML i CSS projekti možete vježbati, ako trebate ponoviti bilo koji osnovni koncept.

Možete se pozvati na ovaj projekt GitHub spremište za puni izvorni kod.

1. Napravite novu datoteku pod nazivom "index.html".
instagram viewer
2. Otvorite datoteku pomoću bilo kojeg uređivača teksta, npr Vizualni kod ili atom. Dodajte osnovnu strukturu HTML koda:

   html>
   <htmljezik="en-US">
   <glava>
   <titula>Igra zmijatitula>
   glava>
   <tijelo>
   tijelo>
   html>

3. Unutar oznake tijela dodajte platno koje predstavlja ploču za igru ​​za zmiju.

   <h2>Igra zmijah2>
   <diviskaznica="igra">
   <platnoiskaznica="zmija">platno>
   div>

4. U istoj mapi u kojoj je vaša HTML datoteka, stvorite novu datoteku pod nazivom "styles.css".
5. Unutra dodajte malo CSS-a za cjelokupnu web stranicu. Također možete oblikovati svoje web mjesto pomoću drugih bitne CSS savjete i trikove.

   #igra {
   širina:400 px;
   visina:400 px;
   margina:0auto;
   boja pozadine:#eee;
   }
   h2 {
   poravnanje teksta:centar;
   obitelj-fontova:Arial;
   veličina fonta:36px;
   } 
   

6. Unutar svoje HTML datoteke dodajte vezu na CSS u oznaku head:

   <vezarel="list stilova"tip="tekst/css"href="styles.css">

7. Da biste pogledali platno, otvorite datoteku "index.html" u web pregledniku.

Kako nacrtati zmiju

U donjem primjeru crna linija predstavlja zmiju:

Višestruki kvadrati ili "segmenti" čine zmiju. Kako zmija raste, tako se povećava i broj polja. Na početku igre, duljina zmije je jedna figura.

1. Unutar svoje HTML datoteke povežite se s novom JavaScript datotekom na dnu oznake tijela:

   <tijelo>
    Vaš kod ovdje 
   <skriptasrc="script.js">skripta>
   tijelo>

2. Napravite script.js i počnite dobivanjem DOM elementa platna:

   var platno = dokument.getElementById("zmija");

3. Postavite kontekst za HTML element platna. U ovom slučaju, želite da igra prikazuje 2D platno. To će vam omogućiti crtanje više oblika ili slika na HTML element.

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

4. Postavite druge varijable u igri kao što je je li igra završila te visinu i širinu platna:

   var igrazavršena = lažno;
   platno.širina = 400;
   platno.visina = 400;

5. Deklarirajte varijablu pod nazivom "snakeSegments". Ovo će sadržavati broj "kvadrata" koje će zmija zauzeti. Također možete stvoriti varijablu za praćenje duljine zmije:

   var zmijski segmenti = [];
   var duljina zmije = 1;
   

6. Deklarirajte početni X i Y položaj zmije:

   var zmijaX = 0;
   var zmijaY = 0;

7. Stvorite novu funkciju. Unutra dodajte početni dio zmije u niz snakeSegments, s njegovim početnim X i Y koordinatama:

   funkcijapomakni seZmija() {
    snakeSegments.unshift({ x: zmijaX, g: zmijaY });
   }

8. Stvorite novu funkciju. Unutra, postavite stil ispune na crno. Ovo je boja koju će koristiti za crtanje zmije:

   funkcijanacrtajZmiju() {
    canvas2d.fillStyle = "crno"; 
   }

9. Za svaki segment koji čini veličinu zmije nacrtajte kvadrat širine i visine 10 piksela:

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

10. Napravite petlju igre koja će se pokretati svakih 100 milisekundi. Ovo će dovesti do toga da igra stalno crta zmiju u njenom novom položaju, što će biti vrlo važno kada se zmija počne kretati:

    funkcijagameLoop() {
     pomakniZmiju();
     nacrtajZmiju();

11. Otvorite datoteku "index.html" u web-pregledniku kako biste vidjeli najmanju zmiju u početnom položaju.

Kako natjerati zmiju da se kreće

Dodajte malo logike za pomicanje zmije u različitim smjerovima, ovisno o tome koji gumb igrač pritisne na tipkovnici.

1. Na vrhu datoteke deklarirajte početni smjer zmije:

   var smjerX = 10;
   var smjerY = 0;
   

2. Dodajte rukovatelj događajima koji se aktivira kada igrač pritisne tipku:

   dokument.onkeydown = funkcija(događaj) {
   };

3. Unutar rukovatelja događajima promijenite smjer kretanja zmije na temelju pritisnute tipke:

   sklopka (event.keyCode) {
   slučaj37: // Lijeva strelica
    smjerX = -10;
    smjerY = 0;
   pauza;
   slučaj38: // Strelica prema gore
    smjerX = 0;
    smjerY = -10;
   pauza;
   slučaj39: // Desna strijela
    smjerX = 10;
    smjerY = 0;
   pauza;
   slučaj40: // Strelica prema dolje
    smjerX = 0;
    smjerY = 10;
   pauza;
   }

4. U funkciji moveSnake() koristite smjer za ažuriranje X i Y koordinata zmije. Na primjer, ako se zmija treba pomaknuti ulijevo, smjer X bit će "-10". Ovo će ažurirati X koordinatu kako bi se uklonilo 10 piksela za svaki okvir igre:

   funkcijapomakni seZmija() {
    snakeSegments.unshift({ x: zmijaX, g: zmijaY });
    zmijaX += smjerX;
    zmijaY += smjerY;
   }

5. Igra trenutno ne uklanja prethodne segmente dok se zmija kreće. Ovo će učiniti da zmija izgleda ovako:
6. Da biste to popravili, očistite platno prije crtanja nove zmije u svakom okviru, na početku funkcije drawSnake():

   canvas2d.clearRect(0, 0, širina.platna, visina.platna);

7. Također ćete morati ukloniti zadnji element niza snakeSegments unutar funkcije moveSnake():

   dok (snakeSegments.length > snakeLength) {
    snakeSegments.pop();
   }

8. Otvorite datoteku "index.html" i pritisnite tipke lijevo, desno, gore ili dolje za pomicanje zmije.

Kako dodati hranu na platno

Dodajte točkice u igru ​​na ploči da predstavljaju komade hrane za zmiju.

1. Deklarirajte novu varijablu na vrhu datoteke za pohranjivanje niza komada hrane:

   var točkice = [];

2. Stvorite novu funkciju. Unutra generirajte nasumične X i Y koordinate za točkice. Također možete osigurati da samo 10 točaka bude na ploči u bilo kojem trenutku:

   funkcijaspawnDots() {
   ako(točke. duljina < 10) {
   var točkaX = matematika.kat(matematika.random() * canvas.width);
   var točka Y = matematika.kat(matematika.random() * canvas.height);
    dots.push({ x: dotX, g: točka Y });
    }
   }

3. Nakon generiranja X i Y koordinata za hranu, nacrtajte ih na platnu crvenom bojom:

   za (var ja = 0; i < točkice.duljina; i++) {
    canvas2d.fillStyle = "Crvena";
    canvas2d.fillRect (točke[i].x, točke[i].y, 10, 10);
   }

4. Pozovite novu funkciju spawnDots() unutar petlje igre:

   funkcijagameLoop() {
    pomakniZmiju();
    nacrtajZmiju();
    spawnDots();
   ako(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Otvorite datoteku "index.html" da vidite hranu na ploči za igru.

Kako natjerati zmiju da raste

Možete učiniti da zmija raste povećavajući njezinu duljinu kada se sudari s točkom hrane.

1. Stvorite novu funkciju. Unutar njega prođite kroz svaki element u nizu točaka:

   funkcijaprovjeriSudar() {
   za (var ja = 0; i < točkice.duljina; i++) {
   
    }
   }

2. Ako položaj zmije odgovara koordinatama bilo koje točke, povećajte duljinu zmije i izbrišite točku:

   ako (zmijaX < točkice[i].x + 10 && 
    zmijaX + 10 > točkice[i].x && 
    zmijaY < točkice[i].y + 10 && 
    zmijaY + 10 > točkice[i].y) {
    duljina zmije++;
    dots.splice (i, 1);
   }

3. Pozovite novu funkciju checkCollision() u petlji igre:

   funkcijagameLoop() {
    pomakniZmiju();
    nacrtajZmiju();
    spawnDots();
    provjeriSudar();
   ako(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Otvorite datoteku "index.html" u web pregledniku. Pomičite zmiju pomoću tipkovnice da skupite komade hrane i uzgojite zmiju.

Kako završiti igru

Za završetak igre provjerite je li se zmija sudarila s vlastitim repom ili bilo kojim zidom.

1. Stvorite novu funkciju za ispis upozorenja "Game Over".

   funkcijaigra je gotova() {
    setTimeout(funkcija() {
    upozorenje("Igra je gotova!");
    }, 500); 
    igrazavršena = pravi
   }

2. Unutar funkcije checkCollision(), provjerite je li zmija udarila u neki od zidova platna. Ako je tako, pozovite funkciju gameOver():

   ako (zmijaX < -10 || 
    zmijaY < -10 || 
    zmijaX > platno.širina+10 ||
    zmijaY > platno.visina+10) {
    igra je gotova();
   }

3. Kako biste provjerili je li se glava zmije sudarila s bilo kojim segmentom repa, prođite kroz svaki dio zmije:

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

4. Unutar prednje petlje provjerite odgovara li mjesto zmijske glave bilo kojem segmentu repa. Ako je tako, to znači da se glava sudarila s repom, pa završite igru:

   ako (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    igra je gotova();
   }

5. Otvorite datoteku "index.html" u web pregledniku. Pokušajte udariti u zid ili vlastiti rep da završite igru.

Učenje koncepata JavaScripta kroz igre

Stvaranje igara može biti izvrstan način da svoje iskustvo učenja učinite ugodnijim. Nastavite s izradom novih igara kako biste nastavili poboljšavati svoje znanje JavaScripta.