Hogyan készítsünk Snake játékot HTML, CSS és JavaScript használatával

A kígyójáték egy klasszikus programozási gyakorlat, amellyel fejlesztheti programozási és problémamegoldó készségeit. A játékot webböngészőben hozhatja létre HTML, CSS és JavaScript használatával.

A játékban egy tábla körül mozgó kígyót irányítasz. A kígyó mérete nő, ahogy gyűjti az ételt. A játék akkor ér véget, ha a saját farkával vagy valamelyik falával ütközik.

Hogyan készítsünk felhasználói felületet a Canvas számára

Használja a HTML-t és a CSS-t a vászon hozzáadásához, hogy a kígyó továbbhaladhasson. Sok más is van HTML és CSS projektek gyakorolhatsz tovább, ha át kell gondolnod az alapfogalmakat.

Hivatkozhat erre a projektre GitHub adattár a teljes forráskódhoz.

1. Hozzon létre egy új fájlt "index.html" néven.
instagram viewer
2. Nyissa meg a fájlt bármilyen szövegszerkesztővel, például Vizuális kód vagy Atom. Adja hozzá az alapvető HTML kódszerkezetet:

   html>
   <htmllang="en-US">
   <fej>
   <cím>Snake Gamecím>
   fej>
   <test>
   test>
   html>

3. A testcímkén belül adj hozzá egy vásznat, amely a kígyó játéktábláját ábrázolja.

   <h2>Snake Gameh2>
   <divid="játszma, meccs">
   <vászonid="kígyó">vászon>
   div>

4. A HTML-fájllal azonos mappában hozzon létre egy új fájlt "styles.css" néven.
5. Belül adjon hozzá némi CSS-t a teljes weboldalhoz. A webhely stílusát másokkal is beállíthatja alapvető CSS-tippek és trükkök.

   #játszma, meccs {
   szélesség:400 képpont;
   magasság:400 képpont;
   árrés:0auto;
   háttérszín:#eee;
   }
   h2 {
   szöveg igazítás:központ;
   betűtípus család:Arial;
   betűméret:36px;
   } 
   

6. A HTML-fájlon belül a head címkében adjon hozzá egy hivatkozást a CSS-hez:

   <linkrel="stíluslap"típus="text/css"href="stílusok.css">

7. A vászon megtekintéséhez nyissa meg az "index.html" fájlt egy webböngészőben.

Hogyan rajzoljunk kígyót

Az alábbi példában a fekete vonal a kígyót jelöli:

Több négyzet vagy "szegmens" alkotja a kígyót. Ahogy a kígyó növekszik, a négyzetek száma is növekszik. A játék elején a kígyó hossza egy darab.

1. A HTML-fájlban hivatkozzon egy új JavaScript-fájlra a body címke alján:

   <test>
    Itt a kódod 
   <forgatókönyvsrc="script.js">forgatókönyv>
   test>

2. Hozzon létre script.js fájlt, és kezdje a vászon DOM elemének beszerzésével:

   var vászon = dokumentum.getElementById("kígyó");

3. Állítsa be a vászon HTML-elem kontextusát. Ebben az esetben azt szeretné, hogy a játék 2D-s vásznat jelenítsen meg. Ez lehetővé teszi több alakzat vagy kép rajzolását a HTML elemre.

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

4. Állítson be más játékon belüli változókat, például azt, hogy a játék véget ért-e, illetve a vászon magasságát és szélességét:

   var játék véget ért = hamis;
   vászon.szélesség = 400;
   vászon.magasság = 400;

5. Deklaráljon egy „snakeSegments” nevű változót. Ez megtartja a "négyzetek" számát, amelyet a kígyó elfoglal. Létrehozhat egy változót is a kígyó hosszának nyomon követéséhez:

   var snakeSegments = [];
   var kígyóhossz = 1;
   

6. Adja meg a kígyó kezdeti X és Y helyzetét:

   var kígyóX = 0;
   var kígyóY = 0;

7. Hozzon létre egy új függvényt. Adja hozzá a kezdő kígyódarabot a snakeSegments tömbhöz a kezdő X és Y koordinátákkal:

   funkciómozogKígyó() {
    snakeSegments.unshift({ x: kígyóX, y: kígyóY });
   }

8. Hozzon létre egy új függvényt. Belül állítsa a kitöltési stílust feketére. Ezt a színt fogja használni a kígyó rajzolásához:

   funkciórajzolniKígyó() {
    canvas2d.fillStyle = "fekete"; 
   }

9. Minden szegmenshez, amely a kígyó méretét alkotja, rajzoljon egy 10 pixel szélességű és magasságú négyzetet:

   számára (var i = 0; i < kígyóSegments.length; i++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Hozzon létre egy játékhurkot, amely 100 ezredmásodpercenként fut. Ez arra készteti a játékot, hogy a kígyót folyamatosan az új helyzetébe húzza, ami nagyon fontos lesz, amikor a kígyó mozogni kezd:

    funkciógameLoop() {
     mozogSnake();
     drawSnake();

11. Nyissa meg az "index.html" fájlt egy webböngészőben, és lássa a kígyót a legkisebb méretben a kiindulási helyzetében.

Hogyan kényszerítsük mozgásra a kígyót

Adjon hozzá némi logikát a kígyó különböző irányokba mozgatásához, attól függően, hogy a játékos melyik gombot nyomja meg a billentyűzeten.

1. A fájl tetején adja meg a kígyó kezdeti irányát:

   var irányX = 10;
   var irány Y = 0;
   

2. Adjon hozzá egy eseménykezelőt, amely akkor indul el, amikor a játékos megnyom egy billentyűt:

   dokumentum.onkeydown = funkció(esemény) {
   };

3. Az eseménykezelőn belül változtassa meg a kígyó mozgásának irányát a lenyomott billentyű alapján:

   kapcsoló (esemény.kulcskód) {
   ügy37: // Bal nyíl
    irányX = -10;
    irány Y = 0;
   szünet;
   ügy38: // Felfelé nyíl
    irányX = 0;
    irány Y = -10;
   szünet;
   ügy39: // Jobb nyíl
    irányX = 10;
    irány Y = 0;
   szünet;
   ügy40: // Lefele nyíl
    irányX = 0;
    irány Y = 10;
   szünet;
   }

4. A moveSnake() függvényben használja az irányt a kígyó X és Y koordinátáinak frissítéséhez. Például, ha a kígyónak balra kell mozognia, az X irány "-10" lesz. Ez frissíti az X koordinátát, hogy eltávolítson 10 pixelt a játék minden képkockájából:

   funkciómozogKígyó() {
    snakeSegments.unshift({ x: kígyóX, y: kígyóY });
    kígyóX += irányX;
    kígyóY += irányY;
   }

5. A játék jelenleg nem távolítja el a korábbi szegmenseket, miközben a kígyó mozog. Így a kígyó így fog kinézni:
6. Ennek kijavításához törölje le a vásznat, mielőtt az új kígyót minden keretbe rajzolná, a drawSnake() függvény elején:

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

7. Ezenkívül el kell távolítania a snakeSegments tömb utolsó elemét a moveSnake() függvényen belül:

   míg (snakeSegments.length > snakeLength) {
    snakeSegments.pop();
   }

8. Nyissa meg az "index.html" fájlt, és nyomja meg a bal, jobb, fel vagy le billentyűket a kígyó mozgatásához.

Hogyan adjunk ételt a vászonra

Adj hozzá pontokat a társasjátékhoz, amelyek a kígyó ételdarabjait ábrázolják.

1. Deklaráljon egy új változót a fájl tetején élelmiszerdarabok tömbjének tárolására:

   var pontok = [];

2. Hozzon létre egy új függvényt. Belül generáljon véletlenszerű X és Y koordinátákat a pontokhoz. Azt is biztosíthatja, hogy mindig csak 10 pont legyen a táblán:

   funkcióspawnDots() {
   ha(pontok.hossz < 10) {
   var dotX = Math.padló(Math.random() * canvas.width);
   var pontY = Math.padló(Math.random() * vászon.magasság);
    dots.push({ x: dotX, y: dotY });
    }
   }

3. Az étel X és Y koordinátáinak generálása után rajzolja őket a vászonra piros színnel:

   számára (var i = 0; i < pontok.hossz; i++) {
    canvas2d.fillStyle = "piros";
    canvas2d.fillRect (dots[i].x, dots[i].y, 10, 10);
   }

4. Hívja meg az új spawnDots() függvényt a játékhurokban:

   funkciógameLoop() {
    mozogSnake();
    drawSnake();
    spawnDots();
   ha(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Nyissa meg az "index.html" fájlt az étel megtekintéséhez a játéktáblán.

Hogyan tegyük növekedésre a kígyót

Növekedésre késztetheti a kígyót, ha megnöveli a hosszát, amikor egy táplálékponttal ütközik.

1. Hozzon létre egy új függvényt. Ezen belül görgessen végig a ponttömb minden elemén:

   funkciócheckCollision() {
   számára (var i = 0; i < pontok.hossz; i++) {
   
    }
   }

2. Ha a kígyó helyzete megegyezik bármely pont koordinátájával, növelje meg a kígyó hosszát, és törölje a pontot:

   ha (kígyóX < pontok[i].x + 10 && 
    kígyóX + 10 > pontok[i].x && 
    kígyóY < pontok[i].y + 10 && 
    kígyóY + 10 > pontok[i].y) {
    snakeLength++;
    dots.splice (i, 1);
   }

3. Hívja meg az új checkCollision() függvényt a játékhurokban:

   funkciógameLoop() {
    mozogSnake();
    drawSnake();
    spawnDots();
    checkCollision();
   ha(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Nyissa meg az "index.html" fájlt egy webböngészőben. Mozgasd a kígyót a billentyűzet segítségével, hogy összegyűjtsd az ételdarabokat, és neveld a kígyót.

Hogyan fejezzük be a játékot

A játék befejezéséhez ellenőrizze, hogy a kígyó ütközött-e a saját farkával vagy valamelyik falával.

1. Hozzon létre egy új funkciót a „Game Over” figyelmeztetés kinyomtatásához.

   funkciójáték vége() {
    setTimeout(funkció() {
    éber("Játék vége!");
    }, 500); 
    játék véget ért = igaz
   }

2. A checkCollision() függvényen belül ellenőrizze, hogy a kígyó eltalálta-e a vászon valamelyik falát. Ha igen, hívja meg a gameOver() függvényt:

   ha (kígyóX < -10 || 
    kígyóY < -10 || 
    kígyóX > vászon.szélesség+10 ||
    kígyóY > vászon.magasság+10) {
    játék vége();
   }

3. Annak ellenőrzéséhez, hogy a kígyó feje ütközött-e valamelyik farokszegmenssel, húzza át a kígyó minden darabját:

   számára (var i = 1; i < kígyóSegments.length; i++) {
   }

4. A for-hurok belsejében ellenőrizze, hogy a kígyó fejének elhelyezkedése megegyezik-e valamelyik farokszegmenssel. Ha igen, ez azt jelenti, hogy a fej összeütközött egy farokkal, tehát fejezd be a játékot:

   ha (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    játék vége();
   }

5. Nyissa meg az "index.html" fájlt egy webböngészőben. Próbálja meg eltalálni a falat vagy a saját farkát a játék befejezéséhez.

JavaScript-fogalmak tanulása játékokon keresztül

A játékok létrehozása nagyszerű módja annak, hogy a tanulási élményt még élvezetesebbé tegye. Folyamatosan készítsen több játékot JavaScript-ismeretének továbbfejlesztése érdekében.