Kako narediti igro Snake z uporabo HTML, CSS in JavaScript

Igra kača je klasična programska vaja, s katero lahko izboljšate svoje sposobnosti programiranja in reševanja problemov. Igro lahko ustvarite v spletnem brskalniku z uporabo HTML, CSS in JavaScript.

V igri upravljate kačo, ki se premika po plošči. Kača raste, ko zbirate hrano. Igra se konča, če trčite v lasten rep ali katero od sten.

Kako ustvariti uporabniški vmesnik za Canvas

Uporabite HTML in CSS, da dodate platno, po katerem se kača premika. Obstaja veliko drugih Projekti HTML in CSS lahko vadite, če morate ponoviti osnovne pojme.

Lahko se sklicujete na ta projekt Repozitorij GitHub za celotno izvorno kodo.

1. Ustvarite novo datoteko z imenom "index.html".
2. Odprite datoteko s katerim koli urejevalnikom besedil, kot je npr
   instagram viewer
   Vizualna koda ali Atom. Dodajte osnovno strukturo kode HTML:

   html>
   <htmljezik="en-US">
   <glavo>
   <naslov>Igra Kačanaslov>
   glavo>
   <telo>
   telo>
   html>

3. Znotraj oznake telesa dodajte platno, ki bo predstavljalo igralno ploščo za kačo.

   <h2>Igra Kačah2>
   <divid="igra">
   <platnoid="kača">platno>
   div>

4. V isti mapi kot vaša datoteka HTML ustvarite novo datoteko z imenom "styles.css".
5. V notranjost dodajte nekaj CSS-ja za celotno spletno stran. Svoje spletno mesto lahko oblikujete tudi z drugimi bistveni nasveti in triki CSS.

   #igra {
   premer:400 slikovnih pik;
   višina:400 slikovnih pik;
   marža:0avto;
   Barva ozadja:#eee;
   }
   h2 {
   poravnava besedila:center;
   družina pisav:Arial;
   velikost pisave:36px;
   } 
   

6. Znotraj datoteke HTML dodajte povezavo do CSS v oznaki head:

   <povezavarel="stylesheet"vrsta="besedilo/css"href="styles.css">

7. Če si želite ogledati platno, odprite datoteko "index.html" v spletnem brskalniku.

Kako narisati kačo

V spodnjem primeru črna črta predstavlja kačo:

Več kvadratov ali "segmentov" sestavlja kačo. Ko kača raste, se povečuje tudi število kvadratov. Na začetku igre je dolžina kače en kos.

1. Znotraj datoteke HTML se na dnu oznake body povežite z novo datoteko JavaScript:

   <telo>
    Vaša koda tukaj 
   <scenarijsrc="script.js">scenarij>
   telo>

2. Ustvarite script.js in začnite s pridobivanjem elementa DOM platna:

   var platno = dokument.getElementById("kača");

3. Nastavite kontekst za element HTML platna. V tem primeru želite, da igra upodablja 2D platno. To vam bo omogočilo, da na element HTML narišete več oblik ali slik.

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

4. Nastavite druge spremenljivke v igri, na primer, ali se je igra končala, ter višino in širino platna:

   var gameEnded = lažno;
   canvas.width = 400;
   canvas.height = 400;

5. Deklarirajte spremenljivko, imenovano "snakeSegments". To bo vsebovalo število "kvadratov", ki jih bo zasedla kača. Ustvarite lahko tudi spremenljivko za spremljanje dolžine kače:

   var snakeSegments = [];
   var snakeLength = 1;
   

6. Razglasite začetni položaj X in Y kače:

   var kačaX = 0;
   var kačaY = 0;

7. Ustvari novo funkcijo. Znotraj dodajte začetni kos kače v matriko snakeSegments z začetnima koordinatama X in Y:

   funkcijopremakniKača() {
    snakeSegments.unshift({ x: snakeX, l: kačaY });
   }

8. Ustvari novo funkcijo. V notranjosti nastavite slog polnila na črno. To je barva, ki jo bo uporabil za risanje kače:

   funkcijodrawSnake() {
    canvas2d.fillStyle = "Črna"; 
   }

9. Za vsak segment, ki predstavlja velikost kače, narišite kvadrat s širino in višino 10 slikovnih pik:

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

10. Ustvarite zanko igre, ki se bo izvajala vsakih 100 milisekund. To bo povzročilo, da bo igra nenehno risala kačo v novem položaju, kar bo zelo pomembno, ko se kača začne premikati:

    funkcijogameLoop() {
     premikKača();
     drawSnake();

11. Odprite datoteko "index.html" v spletnem brskalniku, da vidite najmanjšo velikost kače v začetnem položaju.

Kako pripraviti kačo do premikanja

Dodajte nekaj logike za premikanje kače v različne smeri, odvisno od tega, kateri gumb igralec pritisne na tipkovnici.

1. Na vrhu datoteke navedite začetno smer kače:

   var smerX = 10;
   var smerY = 0;
   

2. Dodajte obravnavo dogodkov, ki se sproži, ko igralec pritisne tipko:

   dokument.onkeydown = funkcijo(dogodek) {
   };

3. Znotraj obdelovalnika dogodkov spremenite smer premikanja kače glede na pritisnjeno tipko:

   stikalo (event.keyCode) {
   Ovitek37: // Puščica levo
    smerX = -10;
    smerY = 0;
   odmor;
   Ovitek38: // Puščica navzgor
    smerX = 0;
    smerY = -10;
   odmor;
   Ovitek39: // Puščica desno
    smerX = 10;
    smerY = 0;
   odmor;
   Ovitek40: // Puščica navzdol
    smerX = 0;
    smerY = 10;
   odmor;
   }

4. V funkciji moveSnake() uporabite smer za posodobitev koordinat X in Y kače. Na primer, če se mora kača premakniti levo, bo smer X "-10". To bo posodobilo koordinato X za odstranitev 10 slikovnih pik za vsak okvir igre:

   funkcijopremakniKača() {
    snakeSegments.unshift({ x: snakeX, l: kačaY });
    kačaX += smerX;
    kačaY += smerY;
   }

5. Igra trenutno ne odstrani prejšnjih segmentov, medtem ko se kača premika. Tako bo kača izgledala takole:
6. Če želite to popraviti, počistite platno, preden narišete novo kačo v vsakem okvirju, na začetku funkcije drawSnake():

   canvas2d.clearRect(0, 0, širina.platna, višina.platna);

7. Prav tako boste morali odstraniti zadnji element matrike snakeSegments znotraj funkcije moveSnake():

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

8. Odprite datoteko "index.html" in pritisnite tipko levo, desno, gor ali dol, da premaknete kačo.

Kako dodati hrano na platno

Dodajte pike družabni igri, da predstavljate koščke hrane za kačo.

1. Na vrhu datoteke deklarirajte novo spremenljivko za shranjevanje niza kosov hrane:

   var pike = [];

2. Ustvari novo funkcijo. V notranjosti ustvarite naključne koordinate X in Y za pike. Prav tako lahko zagotovite, da je na tabli kadar koli le 10 pik:

   funkcijospawnDots() {
   če(pike.dolžina < 10) {
   var pika X = matematika.nadstropje(matematika.random() * canvas.width);
   var pika Y = matematika.nadstropje(matematika.random() * canvas.height);
    dots.push({ x: pika X, l: pika Y });
    }
   }

3. Ko ustvarite koordinate X in Y za hrano, ju narišite na platno z rdečo barvo:

   za (var jaz = 0; i < pike.dolžina; i++) {
    canvas2d.fillStyle = "rdeča";
    canvas2d.fillRect (pike[i].x, pike[i].y, 10, 10);
   }

4. Pokličite novo funkcijo spawnDots() znotraj igralne zanke:

   funkcijogameLoop() {
    premikKača();
    drawSnake();
    spawnDots();
   če(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Odprite datoteko "index.html", da si ogledate hrano na igralni plošči.

Kako narediti, da kača zraste

Kačo lahko povečate tako, da povečate njeno dolžino, ko trči s piko hrane.

1. Ustvari novo funkcijo. Znotraj tega se pomikajte po vseh elementih v nizu pik:

   funkcijocheckCollision() {
   za (var jaz = 0; i < pike.dolžina; i++) {
   
    }
   }

2. Če se položaj kače ujema s koordinatami katere koli pike, povečajte dolžino kače in izbrišite piko:

   če (kačaX < pike[i].x + 10 && 
    kačaX + 10 > pike[i].x && 
    kačaY < pike[i].y + 10 && 
    kačaY + 10 > pike[i].y) {
    snakeLength++;
    dots.splice (i, 1);
   }

3. Pokličite novo funkcijo checkCollision() v zanki igre:

   funkcijogameLoop() {
    premikKača();
    drawSnake();
    spawnDots();
    preveriTrčenje();
   če(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Odprite datoteko "index.html" v spletnem brskalniku. Premakni kačo s tipkovnico, da zbereš koščke hrane in vzgojiš kačo.

Kako končati igro

Za konec igre preverite, ali je kača trčila v svoj rep ali v katero od sten.

1. Ustvarite novo funkcijo za tiskanje opozorila »Igre je konec«.

   funkcijokonec igre() {
    setTimeout(funkcijo() {
    opozorilo("Konec igre!");
    }, 500); 
    gameEnded = prav
   }

2. Znotraj funkcije checkCollision() preverite, ali je kača zadela katero od sten platna. Če je tako, pokličite funkcijo gameOver():

   če (kačaX < -10 || 
    kačaY < -10 || 
    snakeX > canvas.width+10 ||
    snakeY > canvas.height+10) {
    konec igre();
   }

3. Če želite preveriti, ali je glava kače trčila v katerega od segmentov repa, pojdite skozi vsak kos kače:

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

4. Znotraj for-loop preverite, ali se lokacija kačje glave ujema s katerim od segmentov repa. Če je tako, to pomeni, da je glava trčila v rep, zato končajte igro:

   če (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    konec igre();
   }

5. Odprite datoteko "index.html" v spletnem brskalniku. Poskusite zadeti zid ali lasten rep, da končate igro.

Učenje konceptov JavaScript prek iger

Ustvarjanje iger je lahko odličen način za prijetnejšo učno izkušnjo. Ustvarjajte več iger, da še naprej izboljšujete svoje znanje JavaScripta.