Kā izveidot Snake spēli, izmantojot HTML, CSS un JavaScript

Čūskas spēle ir klasisks programmēšanas vingrinājums, ko varat izmantot, lai uzlabotu savas programmēšanas un problēmu risināšanas prasmes. Jūs varat izveidot spēli tīmekļa pārlūkprogrammā, izmantojot HTML, CSS un JavaScript.

Spēlē jūs kontrolējat čūsku, kas pārvietojas ap dēli. Čūska aug, kad jūs savācat pārtiku. Spēle beigsies, ja jūs sadursieties ar savu asti vai kādu no sienām.

Kā izveidot kanvas lietotāja saskarni

Izmantojiet HTML un CSS, lai pievienotu audeklu, lai čūska varētu pārvietoties tālāk. Ir daudz citu HTML un CSS projekti jūs varat praktizēt, ja jums ir jāpārskata kādi pamatjēdzieni.

Jūs varat atsaukties uz šo projektu GitHub repozitorijs par pilnu pirmkodu.

1. Izveidojiet jaunu failu ar nosaukumu "index.html".
instagram viewer
2. Atveriet failu, izmantojot jebkuru teksta redaktoru, piemēram, Vizuālais kods vai atoms. Pievienojiet pamata HTML koda struktūru:

   html>
   <htmllang="en-US">
   <galvu>
   <virsraksts>Čūskas spēlevirsraksts>
   galvu>
   <ķermeni>
   ķermeni>
   html>

3. Ķermeņa atzīmes iekšpusē pievienojiet audeklu, lai attēlotu čūskas spēles dēli.

   <h2>Čūskas spēleh2>
   <divid="spēle">
   <audeklsid="čūska">audekls>
   div>

4. Tajā pašā mapē, kurā atrodas HTML fails, izveidojiet jaunu failu ar nosaukumu "styles.css".
5. Iekšpusē pievienojiet CSS visai tīmekļa lapai. Varat arī veidot savas vietnes stilu, izmantojot citus būtiski CSS padomi un triki.

   #spēle {
   platums:400 pikseļi;
   augstums:400 pikseļi;
   starpība:0auto;
   fona krāsa:#eee;
   }
   h2 {
   teksta līdzināšana:centrs;
   fontu ģimene: Arial;
   fonta izmērs:36 pikseļi;
   } 
   

6. HTML failā head tagā pievienojiet saiti uz CSS:

   <saiterel="stila lapa"veids="text/css"href="styles.css">

7. Lai skatītu audeklu, atveriet failu "index.html" tīmekļa pārlūkprogrammā.

Kā uzzīmēt čūsku

Tālāk esošajā piemērā melnā līnija apzīmē čūsku:

Vairāki kvadrāti vai "segmenti" veido čūsku. Čūskai augot, palielinās arī kvadrātu skaits. Spēles sākumā čūskas garums ir viens gabals.

1. HTML failā pamatteksta taga apakšā izveidojiet saiti uz jaunu JavaScript failu:

   <ķermeni>
    Tavs kods šeit 
   <skriptssrc="script.js">skripts>
   ķermeni>

2. Izveidojiet script.js un sāciet, iegūstot audekla DOM elementu:

   var audekls = dokumentu.getElementById("čūska");

3. Iestatiet kontekstu audekla HTML elementam. Šajā gadījumā vēlaties, lai spēle renderētu 2D audeklu. Tas ļaus HTML elementā uzzīmēt vairākas formas vai attēlus.

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

4. Iestatiet citus spēles mainīgos, piemēram, vai spēle ir beigusies, kā arī audekla augstumu un platumu:

   var spēle beigusies = viltus;
   canvas.width = 400;
   audekls.augstums = 400;

5. Deklarē mainīgo ar nosaukumu "snakeSegments". Tas saturēs "kvadrātu" skaitu, ko čūska aizņems. Varat arī izveidot mainīgo, lai izsekotu čūskas garumam:

   var snakeSegments = [];
   var čūskas garums = 1;
   

6. Deklarē čūskas sākotnējo X un Y stāvokli:

   var čūskaX = 0;
   var čūskaY = 0;

7. Izveidojiet jaunu funkciju. Iekšpusē pievienojiet sākuma čūskas gabalu masīvam snakeSegments ar tā sākuma X un Y koordinātām:

   funkcijukustēties Čūska() {
    snakeSegments.unshift({ x: čūskaX, y: čūskaY });
   }

8. Izveidojiet jaunu funkciju. Iekšpusē iestatiet aizpildījuma stilu uz melnu. Šī ir krāsa, ko tā izmantos, lai uzzīmētu čūsku:

   funkcijuizdarīt Čūska() {
    canvas2d.fillStyle = "melns"; 
   }

9. Katram segmentam, kas veido čūskas izmēru, uzzīmējiet kvadrātu, kura platums un augstums ir 10 pikseļi:

   priekš (var i = 0; i < čūskaSegments.garums; i++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Izveidojiet spēles cilpu, kas darbosies ik pēc 100 milisekundēm. Tas liks spēlei pastāvīgi ievilkt čūsku tās jaunajā pozīcijā, kas būs ļoti svarīgi, kad čūska sāks kustēties:

    funkcijugameLoop() {
     pārvietot Čūska();
     izdarītSnake();

11. Atveriet failu "index.html" tīmekļa pārlūkprogrammā, lai redzētu čūsku tās mazākajā izmērā tās sākuma pozīcijā.

Kā likt čūskai kustēties

Pievienojiet loģiku, lai pārvietotu čūsku dažādos virzienos atkarībā no tā, kādu pogu atskaņotājs nospiež uz tastatūras.

1. Faila augšdaļā norādiet čūskas sākotnējo virzienu:

   var virziensX = 10;
   var virziens Y = 0;
   

2. Pievienojiet notikumu apdarinātāju, kas tiek aktivizēts, kad atskaņotājs nospiež taustiņu:

   dokumentu.onkeydown = funkciju(notikumu) {
   };

3. Notikumu apstrādātājā mainiet čūskas kustības virzienu, pamatojoties uz nospiesto taustiņu:

   slēdzis (event.keyCode) {
   lietu37: // Kreisā bultiņa
    virziensX = -10;
    virziens Y = 0;
   pārtraukums;
   lietu38: // Augšupvērstā bultiņa
    virziensX = 0;
    virziens Y = -10;
   pārtraukums;
   lietu39: // Labā bultiņa
    virziensX = 10;
    virziens Y = 0;
   pārtraukums;
   lietu40: // Bultiņa uz leju
    virziensX = 0;
    virziens Y = 10;
   pārtraukums;
   }

4. Funkcijā moveSnake() izmantojiet virzienu, lai atjauninātu čūskas X un Y koordinātas. Piemēram, ja čūskai jāpārvietojas pa kreisi, X virziens būs "-10". Tas atjauninās X koordinātu, lai noņemtu 10 pikseļus katram spēles kadram:

   funkcijukustēties Čūska() {
    snakeSegments.unshift({ x: čūskaX, y: čūskaY });
    čūskaX += virziensX;
    čūskaY += virziensY;
   }

5. Pašlaik spēle nenoņem iepriekšējos segmentus, kamēr čūska pārvietojas. Tādējādi čūska izskatīsies šādi:
6. Lai to labotu, pirms jaunās čūskas zīmēšanas katrā kadrā notīriet audeklu funkcijas drawSnake() sākumā:

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

7. Jums būs arī jānoņem pēdējais masīva snakeSegments elements funkcijā moveSnake():

   kamēr (snakeSegments.length > snakeLength) {
    snakeSegments.pop();
   }

8. Atveriet failu "index.html" un nospiediet kreiso, labo, augšup vai lejup vērstos taustiņus, lai pārvietotu čūsku.

Kā pievienot ēdienu uz audekla

Pievienojiet galda spēlei punktus, lai attēlotu čūskas ēdiena gabalus.

1. Faila augšdaļā deklarējiet jaunu mainīgo, lai saglabātu pārtikas gabalu masīvu:

   var punkti = [];

2. Izveidojiet jaunu funkciju. Iekšpusē ģenerējiet punktiem izlases X un Y koordinātas. Varat arī nodrošināt, lai uz tāfeles vienmēr būtu tikai 10 punkti:

   funkcijuspawnDots() {
   ja(punkti.garums < 10) {
   var dotX = Matemātika.floor(Matemātika.random() * canvas.width);
   var dotY = Matemātika.floor(Matemātika.random() * canvas.height);
    dots.push({ x: dotX, y: dotY });
    }
   }

3. Pēc ēdiena X un Y koordinātu ģenerēšanas uzzīmējiet tās uz audekla, izmantojot sarkanu krāsu:

   priekš (var i = 0; i < punkti.garums; i++) {
    canvas2d.fillStyle = "sarkans";
    canvas2d.fillRect (dots[i].x, dots[i].y, 10, 10);
   }

4. Izsauciet jauno spawnDots() funkciju spēles cilpas iekšpusē:

   funkcijugameLoop() {
    pārvietot Čūska();
    izdarītSnake();
    spawnDots();
   ja(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Atveriet failu "index.html", lai skatītu ēdienu uz spēles dēļa.

Kā likt čūskai augt

Jūs varat likt čūskai augt, palielinot tās garumu, kad tā saduras ar barības punktu.

1. Izveidojiet jaunu funkciju. Tā iekšpusē pārejiet cauri katram punktu masīva elementam:

   funkcijupārbaudiet Sadursme() {
   priekš (var i = 0; i < punkti.garums; i++) {
   
    }
   }

2. Ja čūskas pozīcija sakrīt ar jebkuru punktu koordinātām, palieliniet čūskas garumu un izdzēsiet punktu:

   ja (čūskaX < punkti[i].x + 10 && 
    čūskaX + 10 > punkti[i].x && 
    čūskaY < punkti[i].y + 10 && 
    čūskaY + 10 > punkti[i].y) {
    čūskas garums++;
    dots.splice (i, 1);
   }

3. Izsauciet jauno funkciju checkCollision() spēles cilpā:

   funkcijugameLoop() {
    pārvietot Čūska();
    izdarītSnake();
    spawnDots();
    checkCollision();
   ja(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Tīmekļa pārlūkprogrammā atveriet failu "index.html". Pārvietojiet čūsku, izmantojot tastatūru, lai savāktu pārtikas gabalus un audzētu čūsku.

Kā beigt spēli

Lai beigtu spēli, pārbaudiet, vai čūska nesaskārās ar savu asti vai kādu no sienām.

1. Izveidojiet jaunu funkciju, lai izdrukātu brīdinājumu "Spēle beigusies".

   funkcijuspēle beigusies() {
    setTimeout(funkciju() {
    brīdināt ("Spēle beigusies!");
    }, 500); 
    spēle beigusies = taisnība
   }

2. Funkcijā checkCollision() pārbaudiet, vai čūska nav skārusi kādu no audekla sienām. Ja tā, izsauciet funkciju gameOver():

   ja (čūskaX < -10 || 
    čūskaY < -10 || 
    snakeX > canvas.width+10 ||
    čūskaY > canvas.height+10) {
    spēle beigusies();
   }

3. Lai pārbaudītu, vai čūskas galva nesaskārās ar kādu no astes segmentiem, izvelciet katru čūskas gabalu:

   priekš (var i = 1; i < čūskaSegments.garums; i++) {
   }

4. Cilpas iekšpusē pārbaudiet, vai čūskas galvas atrašanās vieta atbilst kādam no astes segmentiem. Ja tā, tas nozīmē, ka galva sadūrās ar asti, tāpēc beidziet spēli:

   ja (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    spēle beigusies();
   }

5. Tīmekļa pārlūkprogrammā atveriet failu "index.html". Mēģiniet trāpīt pret sienu vai savu asti, lai beigtu spēli.

JavaScript jēdzienu apgūšana, izmantojot spēles

Spēļu izveide var būt lielisks veids, kā padarīt mācību pieredzi patīkamāku. Turpiniet veidot vairāk spēļu, lai turpinātu uzlabot savas JavaScript zināšanas.