Cum să faci un joc cu șarpe folosind HTML, CSS și JavaScript

Un joc cu șarpe este un exercițiu clasic de programare pe care îl puteți folosi pentru a vă îmbunătăți abilitățile de programare și de rezolvare a problemelor. Puteți crea jocul într-un browser web folosind HTML, CSS și JavaScript.

În joc, controlezi un șarpe care se mișcă în jurul unei table. Șarpele crește în dimensiune pe măsură ce colectați mâncare. Jocul se va încheia dacă vă ciocniți cu propria coadă sau cu oricare dintre pereți.

Cum se creează interfața de utilizare pentru canvas

Utilizați HTML și CSS pentru a adăuga pânza pentru ca șarpele să se deplaseze mai departe. Sunt multe altele Proiecte HTML și CSS puteți exersa, dacă aveți nevoie să revizuiți orice concepte de bază.

Puteți consulta acest proiect Depozitul GitHub pentru codul sursă complet.

1. Creați un fișier nou numit „index.html”.
2. Deschideți fișierul folosind orice editor de text, cum ar fi Cod vizual sau Atom. Adăugați structura codului HTML de bază:

   html>
   <htmllang="en-US">
   <cap>
   <titlu>Jocul șarpelortitlu>
   cap>
   <corp>
   corp>
   html>

3. În interiorul etichetei corporale, adăugați o pânză pentru a reprezenta tabla de joc pentru șarpe.

   <h2>Jocul șarpelorh2>
   <divid="joc">
   <pânzăid="şarpe">pânză>
   div>

4. În același folder cu fișierul HTML, creați un fișier nou numit „styles.css”.
5. În interior, adăugați niște CSS pentru întreaga pagină web. Puteți, de asemenea, să vă stilați site-ul folosind altele sfaturi și trucuri esențiale pentru CSS.

   #joc {
   lăţime:400px;
   înălţime:400px;
   marginea:0auto;
   culoare de fundal:#eee;
   }
   h2 {
   aliniere text:centru;
   familie de fonturi: Arial;
   marimea fontului:36px;
   } 
   

6. În interiorul fișierului HTML, adăugați un link către CSS în eticheta head:

   <legăturărel="foaia de stil"tip=„text/css”href=„styles.css”>

7. Pentru a vizualiza pânza, deschideți fișierul „index.html” într-un browser web.

Cum să desenezi șarpele

În exemplul de mai jos, linia neagră reprezintă șarpele:

Mai multe pătrate sau „segmente” alcătuiesc șarpele. Pe măsură ce șarpele crește, crește și numărul de pătrate. La începutul jocului, lungimea șarpelui este dintr-o singură bucată.

1. În interiorul fișierului HTML, trimiteți la un fișier JavaScript nou în partea de jos a etichetei body:

   <corp>
    Codul dvs. aici 
   <scenariusrc=„script.js”>scenariu>
   corp>

2. Creați script.js și începeți prin a obține elementul DOM al pânzei:

   var pânză = document.getElementById("şarpe");

3. Setați contextul pentru elementul HTML canvas. În acest caz, doriți ca jocul să redea o pânză 2D. Acest lucru vă va permite să desenați mai multe forme sau imagini pe elementul HTML.

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

4. Setați alte variabile în joc, cum ar fi dacă jocul s-a încheiat și înălțimea și lățimea pânzei:

   var gameEnded = fals;
   canvas.width = 400;
   canvas.height = 400;

5. Declarați o variabilă numită „snakeSegments”. Aceasta va menține numărul de „pătrate” pe care șarpele le va ocupa. De asemenea, puteți crea o variabilă pentru a urmări lungimea șarpelui:

   var snakeSegments = [];
   var snakeLength = 1;
   

6. Declarați poziția inițială X și Y a șarpelui:

   var sarpeX = 0;
   var șarpeY = 0;

7. Creați o nouă funcție. În interior, adăugați piesa de șarpe inițială la matricea snakeSegments, cu coordonatele sale X și Y de pornire:

   funcţiemutaSnake() {
    snakeSegments.unshift({ X: snakeX, y: șarpeY });
   }

8. Creați o nouă funcție. În interior, setați stilul de umplere la negru. Aceasta este culoarea pe care o va folosi pentru a desena șarpele:

   funcţiedrawSarpe() {
    canvas2d.fillStyle = "negru"; 
   }

9. Pentru fiecare segment care formează dimensiunea șarpelui, desenați un pătrat cu o lățime și o înălțime de 10 pixeli:

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

10. Creați o buclă de joc care va rula la fiecare 100 de milisecunde. Acest lucru va face ca jocul să atragă în mod constant șarpele în noua sa poziție, ceea ce va fi foarte important atunci când șarpele începe să se miște:

    funcţiegameLoop() {
     mutaSarpe();
     drawSnake();

11. Deschideți fișierul „index.html” într-un browser web pentru a vedea șarpele la cea mai mică dimensiune în poziția sa de pornire.

Cum să faci să se miște șarpele

Adaugă puțină logică pentru a muta șarpele în direcții diferite, în funcție de ce buton apasă jucătorul de pe tastatură.

1. În partea de sus a fișierului, declarați direcția inițială a șarpelui:

   var direcțiaX = 10;
   var direcțiaY = 0;
   

2. Adăugați un handler de evenimente care se declanșează atunci când jucătorul apasă o tastă:

   document.onkeydown = funcţie(eveniment) {
   };

3. În interiorul handler-ului de evenimente, schimbați direcția în care se mișcă șarpele, în funcție de tasta apăsată:

   intrerupator (event.keyCode) {
   caz37: // Sageata stanga
    direcțiaX = -10;
    direcțiaY = 0;
   pauză;
   caz38: // Săgeata în sus
    direcțiaX = 0;
    direcțiaY = -10;
   pauză;
   caz39: // Sageata dreapta
    direcțiaX = 10;
    direcțiaY = 0;
   pauză;
   caz40: // Sageata in jos
    direcțiaX = 0;
    direcțiaY = 10;
   pauză;
   }

4. În funcția moveSnake(), utilizați direcția pentru a actualiza coordonatele X și Y ale șarpelui. De exemplu, dacă șarpele trebuie să se miște la stânga, direcția X va fi „-10”. Aceasta va actualiza coordonatele X pentru a elimina 10 pixeli pentru fiecare cadru al jocului:

   funcţiemutaSnake() {
    snakeSegments.unshift({ X: snakeX, y: șarpeY });
    sarpeX += directiaX;
    sarpeY += directieY;
   }

5. În prezent, jocul nu elimină segmentele anterioare în timp ce șarpele se mișcă. Acest lucru va face șarpele să arate așa:
6. Pentru a remedia acest lucru, ștergeți pânza înainte de a desena noul șarpe în fiecare cadru, la începutul funcției drawSnake():

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

7. De asemenea, va trebui să eliminați ultimul element al matricei snakeSegments, în interiorul funcției moveSnake():

   in timp ce (snakeSegments.length > snakeLength) {
    snakeSegments.pop();
   }

8. Deschideți fișierul „index.html” și apăsați tastele stânga, dreapta, sus sau jos pentru a muta șarpele.

Cum să adăugați alimente pe pânză

Adăugați puncte în jocul de masă pentru a reprezenta bucăți de mâncare pentru șarpe.

1. Declarați o nouă variabilă în partea de sus a fișierului pentru a stoca o serie de bucăți de mâncare:

   var puncte = [];

2. Creați o nouă funcție. În interior, generați coordonatele aleatoare X și Y pentru puncte. De asemenea, vă puteți asigura că numai 10 puncte sunt pe tablă în orice moment:

   funcţiespawnDots() {
   dacă(puncte.lungime < 10) {
   var dotX = Matematică.podea(Matematică.random() * canvas.width);
   var dotY = Matematică.podea(Matematică.random() * canvas.height);
    dots.push({ X: dotX, y: dotY });
    }
   }

3. După ce ați generat coordonatele X și Y pentru alimente, desenați-le pe pânză folosind o culoare roșie:

   pentru (var i = 0; i < puncte.lungime; i++) {
    canvas2d.fillStyle = "roșu";
    canvas2d.fillRect (puncte[i].x, puncte[i].y, 10, 10);
   }

4. Apelați noua funcție spawnDots() în bucla de joc:

   funcţiegameLoop() {
    mutaSarpe();
    drawSnake();
    spawnDots();
   dacă(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Deschideți fișierul „index.html” pentru a vedea mâncarea pe tabla de joc.

Cum să faci șarpele să crească

Puteți face șarpele să crească prin creșterea lungimii sale atunci când se ciocnește de un punct de hrană.

1. Creați o nouă funcție. În interiorul acestuia, parcurgeți fiecare element din matricea de puncte:

   funcţiecheckCollision() {
   pentru (var i = 0; i < puncte.lungime; i++) {
   
    }
   }

2. Dacă poziția șarpelui se potrivește cu coordonatele oricăror puncte, măriți lungimea șarpelui și ștergeți punctul:

   dacă (șarpeX < puncte[i].x + 10 && 
    snakeX + 10 > puncte[i].x && 
    snakeY < puncte[i].y + 10 && 
    sarpeY + 10 > puncte[i].y) {
    snakeLength++;
    puncte.splice (i, 1);
   }

3. Apelați noua funcție checkCollision() în bucla de joc:

   funcţiegameLoop() {
    mutaSarpe();
    drawSnake();
    spawnDots();
    checkCollision();
   dacă(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Deschideți fișierul „index.html” într-un browser web. Mutați șarpele folosind tastatura pentru a colecta bucățile de mâncare și pentru a crește șarpele.

Cum să închei jocul

Pentru a încheia jocul, verificați dacă șarpele s-a ciocnit de propria coadă sau de vreunul dintre pereți.

1. Creați o nouă funcție pentru a imprima o alertă „Game Over”.

   funcţiejoc încheiat() {
    setTimeout(funcţie() {
    alerta("Joc încheiat!");
    }, 500); 
    gameEnded = Adevărat
   }

2. În cadrul funcției checkCollision(), verificați dacă șarpele a lovit vreunul dintre pereții pânzei. Dacă da, apelați funcția gameOver():

   dacă (șarpeX < -10 || 
    sarpeY < -10 || 
    snakeX > canvas.width+10 ||
    snakeY > canvas.height+10) {
    joc încheiat();
   }

3. Pentru a verifica dacă capul șarpelui s-a ciocnit de vreunul dintre segmentele de coadă, treceți prin fiecare bucată a șarpelui:

   pentru (var i = 1; i < snakeSegments.lungime; i++) {
   }

4. În interiorul buclei, verificați dacă locația capului șarpelui se potrivește cu oricare dintre segmentele cozii. Dacă da, înseamnă că capul s-a ciocnit cu o coadă, așa că încheiați jocul:

   dacă (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    joc încheiat();
   }

5. Deschideți fișierul „index.html” într-un browser web. Încercați să loviți un perete sau propria coadă pentru a încheia jocul.

Învățarea conceptelor JavaScript prin jocuri

Crearea de jocuri poate fi o modalitate excelentă de a vă face experiența de învățare mai plăcută. Continuați să faceți mai multe jocuri pentru a vă îmbunătăți cunoștințele JavaScript.