Jak vytvořit hru Snake pomocí HTML, CSS a JavaScriptu

Hra s hadem je klasické programovací cvičení, které můžete použít ke zlepšení svých dovedností v programování a řešení problémů. Hru můžete vytvořit ve webovém prohlížeči pomocí HTML, CSS a JavaScriptu.

Ve hře ovládáte hada, který se pohybuje po desce. Had roste ve velikosti, jak sbíráte jídlo. Hra skončí, pokud se srazíte s vlastním ocasem nebo některou ze stěn.

Jak vytvořit uživatelské rozhraní pro plátno

Použijte HTML a CSS k přidání plátna, aby se had mohl pohybovat dál. Existuje mnoho dalších Projekty HTML a CSS můžete procvičovat, pokud potřebujete revidovat nějaké základní pojmy.

Můžete odkazovat na tento projekt úložiště GitHub pro celý zdrojový kód.

1. Vytvořte nový soubor s názvem „index.html“.
instagram viewer
2. Otevřete soubor pomocí libovolného textového editoru, např Vizuální kód nebo atom. Přidejte základní strukturu HTML kódu:

   html>
   <htmllang="en-US">
   <hlava>
   <titul>Hra hadtitul>
   hlava>
   <tělo>
   tělo>
   html>

3. Uvnitř štítku s tělem přidejte plátno, které bude představovat herní plán pro hada.

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

4. Ve stejné složce jako váš soubor HTML vytvořte nový soubor s názvem „styles.css“.
5. Uvnitř přidejte nějaké CSS pro celkovou webovou stránku. Svůj web můžete také stylizovat pomocí jiného základní CSS tipy a triky.

   #hra {
   šířka: 400 pixelů;
   výška: 400 pixelů;
   okraj:0auto;
   barva pozadí:#eee;
   }
   h2 {
   zarovnání textu:centrum;
   rodina písem:Arial;
   velikost písma: 36 pixelů;
   } 
   

6. Do souboru HTML přidejte odkaz na CSS ve značce head:

   <odkazrel="stylesheet"typ="text/css"href="styles.css">

7. Chcete-li zobrazit plátno, otevřete soubor „index.html“ ve webovém prohlížeči.

Jak nakreslit hada

V níže uvedeném příkladu černá čára představuje hada:

Více čtverců nebo "segmentů" tvoří hada. Jak had roste, zvyšuje se také počet polí. Na začátku hry je délka hada jeden kus.

1. Uvnitř souboru HTML zadejte odkaz na nový soubor JavaScript ve spodní části značky body:

   <tělo>
    Váš kód zde 
   <skriptsrc="script.js">skript>
   tělo>

2. Vytvořte script.js a začněte získáním prvku DOM plátna:

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

3. Nastavte kontext pro prvek HTML canvas. V tomto případě chcete, aby hra vykreslila 2D plátno. To vám umožní nakreslit více tvarů nebo obrázků do prvku HTML.

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

4. Nastavte další proměnné ve hře, například zda hra skončila, a výšku a šířku plátna:

   var hra ukončena = Nepravdivé;
   plátno.šířka = 400;
   výška plátna = 400;

5. Deklarujte proměnnou s názvem „snakeSegments“. To bude držet počet "čtverečků", které had zabere. Můžete také vytvořit proměnnou pro sledování délky hada:

   var hadí segmenty = [];
   var délka hada = 1;
   

6. Deklarujte počáteční polohu X a Y hada:

   var snakeX = 0;
   var hadY = 0;

7. Vytvořte novou funkci. Uvnitř přidejte počáteční kus hada do pole snakeSegments s jeho počátečními souřadnicemi X a Y:

   funkcepohybovatSnake() {
    snakeSegments.unshift({ X: snakeX, y: hadY });
   }

8. Vytvořte novou funkci. Uvnitř nastavte styl výplně na černou. Toto je barva, kterou nakreslí hada:

   funkceremízaSnake() {
    canvas2d.fillStyle = "Černá"; 
   }

9. Pro každý segment, který tvoří velikost hada, nakreslete čtverec o šířce a výšce 10 pixelů:

   pro (var i = 0; i < hadíSegmenty.délka; i++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Vytvořte herní smyčku, která se bude spouštět každých 100 milisekund. To způsobí, že hra neustále kreslí hada v jeho nové pozici, což bude velmi důležité, když se had začne pohybovat:

    funkcegameLoop() {
     moveSnake();
     drawSnake();

11. Otevřete soubor "index.html" ve webovém prohlížeči, abyste viděli hada v jeho nejmenší velikosti v jeho výchozí pozici.

Jak přimět hada v pohybu

Přidejte nějakou logiku pro pohyb hada různými směry v závislosti na tom, jaké tlačítko hráč na klávesnici stiskne.

1. V horní části souboru deklarujte počáteční směr hada:

   var směrX = 10;
   var směr Y = 0;
   

2. Přidejte obsluhu události, která se spustí, když hráč stiskne klávesu:

   dokument.onkeydown = funkce(událost) {
   };

3. Uvnitř obsluhy události změňte směr, kterým se had pohybuje, podle stisknuté klávesy:

   přepínač (event.keyCode) {
   pouzdro37: // Šipka vlevo
    směrX = -10;
    směr Y = 0;
   přestávka;
   pouzdro38: // Šipka nahoru
    směrX = 0;
    směr Y = -10;
   přestávka;
   pouzdro39: // Šipka vpravo
    směrX = 10;
    směr Y = 0;
   přestávka;
   pouzdro40: // Šipka dolů
    směrX = 0;
    směr Y = 10;
   přestávka;
   }

4. Ve funkci moveSnake() použijte směr k aktualizaci souřadnic X a Y hada. Pokud se například had potřebuje posunout doleva, směr X bude "-10". Tím se aktualizuje souřadnice X, aby se odstranilo 10 pixelů pro každý snímek hry:

   funkcepohybovatSnake() {
    snakeSegments.unshift({ X: snakeX, y: hadY });
    hadX += směrX;
    hadY += směrY;
   }

5. Hra aktuálně neodstraňuje předchozí segmenty, když se had pohybuje. Díky tomu bude had vypadat takto:
6. Chcete-li to opravit, vyčistěte plátno před nakreslením nového hada v každém snímku na začátku funkce drawSnake():

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

7. Budete také muset odstranit poslední prvek pole snakeSegments uvnitř funkce moveSnake():

   zatímco (snakeSegments.length > snakeLength) {
    snakeSegments.pop();
   }

8. Otevřete soubor „index.html“ a stisknutím klávesy doleva, doprava, nahoru nebo dolů hada přesuňte.

Jak přidat jídlo na plátno

Přidejte do deskové hry tečky, které představují kousky jídla pro hada.

1. V horní části souboru deklarujte novou proměnnou pro uložení řady kousků jídla:

   var tečky = [];

2. Vytvořte novou funkci. Uvnitř vygenerujte náhodné souřadnice X a Y pro tečky. Můžete také zajistit, aby na hrací ploše bylo vždy pouze 10 teček:

   funkcespawnDots() {
   -li(tečky.délka < 10) {
   var dotX = Matematika.podlaha(Matematika.random() * canvas.width);
   var tečka = Matematika.podlaha(Matematika.random() * canvas.height);
    tečky.push({ X: dotX, y: tečka });
    }
   }

3. Po vygenerování souřadnic X a Y pro jídlo je nakreslete na plátno pomocí červené barvy:

   pro (var i = 0; i < tečky.délka; i++) {
    canvas2d.fillStyle = "Červené";
    canvas2d.fillRect (tečky[i].x, tečky[i].y, 10, 10);
   }

4. Zavolejte novou funkci spawnDots() uvnitř herní smyčky:

   funkcegameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
   -li(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Otevřete soubor "index.html" a prohlédněte si jídlo na herním plánu.

Jak přimět hada růst

Hada můžete nechat růst zvětšením jeho délky, když se srazí s tečkou na jídlo.

1. Vytvořte novou funkci. Uvnitř procházejte každý prvek v poli teček:

   funkcecheckCollision() {
   pro (var i = 0; i < tečky.délka; i++) {
   
    }
   }

2. Pokud poloha hada odpovídá souřadnicím libovolné tečky, zvyšte délku hada a tečku odstraňte:

   -li (snakeX < tečky[i].x + 10 && 
    snakeX + 10 > tečky[i].x && 
    hadY < tečky[i].y + 10 && 
    hadY + 10 > tečky[i].y) {
    snakeLength++;
    dots.splice (i, 1);
   }

3. Zavolejte novou funkci checkCollision() ve smyčce hry:

   funkcegameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
    checkCollision();
   -li(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Otevřete soubor „index.html“ ve webovém prohlížeči. Pohybujte hadem pomocí klávesnice, sbírejte kousky jídla a hada vypěstujte.

Jak ukončit hru

Chcete-li hru ukončit, zkontrolujte, zda se had nesrazil s vlastním ocasem nebo některou ze stěn.

1. Vytvořte novou funkci pro tisk upozornění „Konec hry“.

   funkcekonec hry() {
    setTimeout(funkce() {
    upozornění ("Konec hry!");
    }, 500); 
    hra ukončena = skutečný
   }

2. Uvnitř funkce checkCollision() zkontrolujte, zda had narazil na některou ze stěn plátna. Pokud ano, zavolejte funkci gameOver():

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

3. Chcete-li zkontrolovat, zda se hlava hada nesrazila s některým z ocasních segmentů, protáhněte každý kus hada:

   pro (var i = 1; i < hadíSegmenty.délka; i++) {
   }

4. Uvnitř smyčky for-loop zkontrolujte, zda umístění hlavy hada odpovídá některému z ocasních segmentů. Pokud ano, znamená to, že se hlava srazila s ocasem, takže hru ukončete:

   -li (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    konec hry();
   }

5. Otevřete soubor „index.html“ ve webovém prohlížeči. Zkuste zasáhnout zeď nebo svůj vlastní ocas, abyste hru ukončili.

Učení konceptů JavaScriptu prostřednictvím her

Vytváření her může být skvělý způsob, jak si zpříjemnit učení. Pokračujte ve vytváření dalších her, abyste mohli nadále zlepšovat své znalosti JavaScriptu.