Ako vytvoriť hru Snake pomocou HTML, CSS a JavaScriptu

Hra hada je klasické programovacie cvičenie, ktoré môžete použiť na zlepšenie svojich schopností programovania a riešenia problémov. Hru môžete vytvoriť vo webovom prehliadači pomocou HTML, CSS a JavaScriptu.

V hre ovládate hada, ktorý sa pohybuje po hracej ploche. Had rastie vo veľkosti, keď zbierate jedlo. Hra sa skončí, ak sa zrazíte s vlastným chvostom alebo niektorou zo stien.

Ako vytvoriť používateľské rozhranie pre plátno

Použite HTML a CSS na pridanie plátna, aby sa had mohol pohybovať ďalej. Existuje mnoho ďalších Projekty HTML a CSS môžete trénovať, ak potrebujete zrevidovať nejaké základné pojmy.

Môžete sa obrátiť na tento projekt úložisko GitHub pre úplný zdrojový kód.

1. Vytvorte nový súbor s názvom „index.html“.
instagram viewer
2. Otvorte súbor pomocou ľubovoľného textového editora, napr Vizuálny kód alebo atóm. Pridajte základnú štruktúru HTML kódu:

   html>
   <htmllang="en-US">
   <hlavu>
   <titul>Hra Snaketitul>
   hlavu>
   <telo>
   telo>
   html>

3. Vnútri štítku s telom pridajte plátno, ktoré bude predstavovať hraciu dosku pre hada.

   <h2>Hra Snakeh2>
   <divid="hra">
   <plátnoid="had">plátno>
   div>

4. V rovnakom priečinku ako váš súbor HTML vytvorte nový súbor s názvom „styles.css“.
5. Vnútri pridajte nejaké CSS pre celkovú webovú stránku. Svoju webovú stránku môžete upraviť aj pomocou iných základné CSS tipy a triky.

   #hra {
   šírka: 400 pixelov;
   výška: 400 pixelov;
   marža:0auto;
   farba pozadia:#eee;
   }
   h2 {
   zarovnanie textu:centrum;
   font-family:Arial;
   veľkosť písma: 36 pixelov;
   } 
   

6. Do súboru HTML pridajte odkaz na CSS do značky head:

   <odkazrel="štýlov"typu="text/css"href="styles.css">

7. Ak chcete zobraziť plátno, otvorte súbor „index.html“ vo webovom prehliadači.

Ako nakresliť hada

V nižšie uvedenom príklade čierna čiara predstavuje hada:

Viaceré štvorce alebo "segmenty" tvoria hada. Ako had rastie, zvyšuje sa aj počet štvorcov. Na začiatku hry je dĺžka hada jeden kus.

1. V súbore HTML vytvorte odkaz na nový súbor JavaScript v spodnej časti značky body:

   <telo>
    Váš kód tu 
   <skriptsrc="script.js">skript>
   telo>

2. Vytvorte script.js a začnite získaním prvku DOM z plátna:

   var plátno = dokument.getElementById("had");

3. Nastavte kontext pre prvok HTML canvas. V tomto prípade chcete, aby hra vykreslila 2D plátno. To vám umožní nakresliť viacero tvarov alebo obrázkov do prvku HTML.

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

4. Nastavte ďalšie premenné v hre, napríklad či sa hra skončila, a výšku a šírku plátna:

   var hra sa skončila = falošný;
   canvas.width = 400;
   výška plátna = 400;

5. Deklarujte premennú s názvom „snakeSegments“. To bude držať počet "štvorcov", ktoré had zaberie. Môžete tiež vytvoriť premennú na sledovanie dĺžky hada:

   var hadie segmenty = [];
   var Dĺžka hada = 1;
   

6. Uveďte počiatočnú polohu X a Y hada:

   var snakeX = 0;
   var hadY = 0;

7. Vytvorte novú funkciu. Vnútri pridajte počiatočný kus hada do poľa snakeSegments s jeho počiatočnými súradnicami X a Y:

   funkciupohybovaťSnake() {
    snakeSegments.unshift({ X: snakeX, r: hadY });
   }

8. Vytvorte novú funkciu. Vnútri nastavte štýl výplne na čiernu. Toto je farba, ktorú použije na kreslenie hada:

   funkciukresliťSnake() {
    canvas2d.fillStyle = "čierna"; 
   }

9. Pre každý segment, ktorý tvorí veľkosť hada, nakreslite štvorec so šírkou a výškou 10 pixelov:

   pre (var i = 0; i < hadSegmenty.dĺžka; i++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Vytvorte hernú slučku, ktorá sa spustí každých 100 milisekúnd. To spôsobí, že hra bude neustále kresliť hada v jeho novej polohe, čo bude veľmi dôležité, keď sa had začne pohybovať:

    funkciugameLoop() {
     moveSnake();
     drawSnake();

11. Otvorte súbor „index.html“ vo webovom prehliadači, aby ste videli hada v jeho najmenšej veľkosti v jeho počiatočnej polohe.

Ako rozhýbať hada

Pridajte trochu logiky na pohyb hada rôznymi smermi v závislosti od toho, aké tlačidlo hráč stlačí na klávesnici.

1. V hornej časti súboru deklarujte počiatočný smer hada:

   var smer X = 10;
   var smerY = 0;
   

2. Pridajte obsluhu udalosti, ktorá sa spustí, keď hráč stlačí kláves:

   dokument.onkeydown = funkciu(udalosť) {
   };

3. V obsluhe udalosti zmeňte smer, ktorým sa had pohybuje, na základe stlačeného klávesu:

   prepínač (event.keyCode) {
   prípad37: // Ľavá šípka
    smer X = -10;
    smerY = 0;
   prestávka;
   prípad38: // Šípka hore
    smer X = 0;
    smerY = -10;
   prestávka;
   prípad39: // Pravá šípka
    smer X = 10;
    smerY = 0;
   prestávka;
   prípad40: // Šípka nadol
    smer X = 0;
    smerY = 10;
   prestávka;
   }

4. Vo funkcii moveSnake() použite smer na aktualizáciu súradníc X a Y hada. Napríklad, ak sa had potrebuje posunúť doľava, smer X bude "-10". Týmto sa aktualizuje súradnica X, aby sa odstránilo 10 pixelov pre každú snímku hry:

   funkciupohybovaťSnake() {
    snakeSegments.unshift({ X: snakeX, r: hadY });
    hadX += smerX;
    hadY += smerY;
   }

5. Hra momentálne neodstraňuje predchádzajúce segmenty, kým sa had pohybuje. Vďaka tomu bude had vyzerať takto:
6. Ak to chcete vyriešiť, vyčistite plátno pred nakreslením nového hada v každom snímku na začiatku funkcie drawSnake():

   canvas2d.clearRect(0, 0, šírka. plátna, výška. plátna);

7. Budete tiež musieť odstrániť posledný prvok poľa snakeSegments vo funkcii moveSnake():

   zatiaľ čo (snakeSegments.length > snakeLength) {
    snakeSegments.pop();
   }

8. Otvorte súbor "index.html" a stlačte klávesy vľavo, vpravo, hore alebo dole, aby ste hada posunuli.

Ako pridať jedlo na plátno

Pridajte do stolovej hry bodky, ktoré budú predstavovať kúsky jedla pre hada.

1. V hornej časti súboru deklarujte novú premennú na uloženie radu kúskov jedla:

   var bodky = [];

2. Vytvorte novú funkciu. Vnútri vygenerujte náhodné súradnice X a Y pre bodky. Môžete sa tiež uistiť, že na tabuli bude vždy len 10 bodiek:

   funkciuspawnDots() {
   ak(bodky.dĺžka < 10) {
   var dotX = Matematika.poschodie(Matematika.random() * canvas.width);
   var bodka = Matematika.poschodie(Matematika.random() * canvas.height);
    bodky.push({ X: dotX, r: bodka });
    }
   }

3. Po vygenerovaní súradníc X a Y pre jedlo ich nakreslite na plátno pomocou červenej farby:

   pre (var i = 0; i < bodky.dĺžka; i++) {
    canvas2d.fillStyle = "červená";
    canvas2d.fillRect (bodky[i].x, bodky[i].y, 10, 10);
   }

4. Zavolajte novú funkciu spawnDots() v hernej slučke:

   funkciugameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
   ak(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Otvorte súbor "index.html" a pozrite si jedlo na hracom pláne.

Ako prinútiť hada rásť

Hada môžete nechať rásť zväčšovaním jeho dĺžky, keď sa zrazí s bodkou jedla.

1. Vytvorte novú funkciu. Vnútri prechádzajte cez každý prvok v poli bodiek:

   funkciucheckCollision() {
   pre (var i = 0; i < bodky.dĺžka; i++) {
   
    }
   }

2. Ak sa poloha hada zhoduje so súradnicami akýchkoľvek bodiek, zväčšite dĺžku hada a bodku odstráňte:

   ak (snakeX < bodky[i].x + 10 && 
    snakeX + 10 > bodky[i].x && 
    hadY < bodky[i].y + 10 && 
    hadY + 10 > bodky[i].y) {
    snakeLength++;
    bodky.splice (i, 1);
   }

3. Zavolajte novú funkciu checkCollision() v hernej slučke:

   funkciugameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
    checkCollision();
   ak(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Otvorte súbor „index.html“ vo webovom prehliadači. Pohybujte hadom pomocou klávesnice, aby ste zbierali kúsky jedla a pestovali hada.

Ako ukončiť hru

Ak chcete hru ukončiť, skontrolujte, či sa had nezrazil s vlastným chvostom alebo niektorou zo stien.

1. Vytvorte novú funkciu na tlač upozornenia „Koniec hry“.

   funkciukoniec hry() {
    setTimeout(funkciu() {
    upozornenie ("Koniec hry!");
    }, 500); 
    hra sa skončila = pravda
   }

2. Vo funkcii checkCollision() skontrolujte, či had narazil na niektorú zo stien plátna. Ak áno, zavolajte funkciu gameOver():

   ak (snakeX < -10 || 
    hadY < -10 || 
    snakeX > canvas.width+10 ||
    hadY > plátno.výška+10) {
    koniec hry();
   }

3. Ak chcete skontrolovať, či sa hlava hada nezrazila s niektorým z chvostových segmentov, prejdite cez každý kus hada:

   pre (var i = 1; i < hadSegmenty.dĺžka; i++) {
   }

4. Vo vnútri slučky for-loop skontrolujte, či sa umiestnenie hlavy hada zhoduje s niektorým z chvostových segmentov. Ak áno, znamená to, že hlava sa zrazila s chvostom, takže hru ukončite:

   ak (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    koniec hry();
   }

5. Otvorte súbor „index.html“ vo webovom prehliadači. Pokúste sa udrieť do steny alebo vlastného chvosta, aby ste hru ukončili.

Učenie sa konceptov JavaScriptu prostredníctvom hier

Vytváranie hier môže byť skvelým spôsobom, ako si spríjemniť učenie. Pokračujte vo vytváraní ďalších hier, aby ste mohli naďalej zlepšovať svoje znalosti jazyka JavaScript.