Kaip sukurti gyvatės žaidimą naudojant HTML, CSS ir JavaScript

Gyvatės žaidimas yra klasikinis programavimo pratimas, kurį galite naudoti norėdami pagerinti savo programavimo ir problemų sprendimo įgūdžius. Galite sukurti žaidimą žiniatinklio naršyklėje naudodami HTML, CSS ir JavaScript.

Žaidime jūs valdote gyvatę, kuri juda aplink lentą. Gyvatė auga, kai renkate maistą. Žaidimas baigsis, jei susidursite su savo uodega ar bet kuria siena.

Kaip sukurti drobės vartotojo sąsają

Naudokite HTML ir CSS, kad pridėtumėte drobę, kad gyvatė galėtų judėti toliau. Yra daug kitų HTML ir CSS projektai Galite praktikuotis, jei jums reikia peržiūrėti pagrindines sąvokas.

Galite kreiptis į šį projektą GitHub saugykla visam šaltinio kodui.

1. Sukurkite naują failą pavadinimu „index.html“.
instagram viewer
2. Atidarykite failą naudodami bet kurį teksto rengyklę, pvz Vaizdinis kodas arba atomas. Pridėkite pagrindinę HTML kodo struktūrą:

   html>
   <htmllang="en-US">
   <galva>
   <titulą>Gyvatės žaidimastitulą>
   galva>
   <kūnas>
   kūnas>
   html>

3. Ant kūno žymos pridėkite drobę, vaizduojančią gyvatei skirtą žaidimo lentą.

   <h2>Gyvatės žaidimash2>
   <divid="žaidimas">
   <drobėid="gyvatė">drobė>
   div>

4. Tame pačiame aplanke kaip ir HTML failas sukurkite naują failą pavadinimu „styles.css“.
5. Viduje pridėkite šiek tiek CSS visam tinklalapiui. Taip pat galite stilizuoti savo svetainę naudodami kitus esminiai CSS patarimai ir gudrybės.

   #žaidimas {
   plotis:400px;
   aukščio:400px;
   marža:0automatinis;
   fono spalva:#eee;
   }
   h2 {
   teksto lygiavimas:centras;
   šrifto šeima: Arial;
   šrifto dydis:36px;
   } 
   

6. HTML faile pridėkite nuorodą į CSS žymoje head:

   <nuorodarel="stiliaus lapas"tipo="text/css"href="styles.css">

7. Norėdami peržiūrėti drobę, žiniatinklio naršyklėje atidarykite failą „index.html“.

Kaip nupiešti gyvatę

Toliau pateiktame pavyzdyje juoda linija žymi gyvatę:

Gyvatę sudaro keli kvadratai arba „segmentai“. Gyvatei augant, didėja ir kvadratų skaičius. Žaidimo pradžioje gyvatės ilgis yra vienas gabalas.

1. HTML faile pagrindinio žymos apačioje pateikite nuorodą į naują „JavaScript“ failą:

   <kūnas>
    Jūsų kodas čia 
   <scenarijussrc="script.js">scenarijus>
   kūnas>

2. Sukurkite script.js ir pradėkite gaudami drobės DOM elementą:

   var drobė = dokumentas.getElementById("gyvatė");

3. Nustatykite drobės HTML elemento kontekstą. Tokiu atveju norite, kad žaidimas atvaizduotų 2D drobę. Tai leis ant HTML elemento nupiešti kelias formas ar vaizdus.

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

4. Nustatykite kitus žaidimo kintamuosius, pvz., ar žaidimas baigėsi, ir drobės aukštį bei plotį:

   var žaidimas baigėsi = klaidinga;
   drobė.plotis = 400;
   drobė.aukštis = 400;

5. Paskelbkite kintamąjį, vadinamą „snakeSegments“. Jame bus „kvadratų“, kuriuos užims gyvatė, skaičius. Taip pat galite sukurti kintamąjį, kad galėtumėte stebėti gyvatės ilgį:

   var snakeSegments = [];
   var gyvatės ilgis = 1;
   

6. Paskelbkite pradinę gyvatės X ir Y padėtį:

   var gyvatėX = 0;
   var gyvatėY = 0;

7. Sukurkite naują funkciją. Viduje pridėkite pradinę gyvatės dalį prie snakeSegments masyvo su pradinėmis X ir Y koordinatėmis:

   funkcijajudėti Gyvatė() {
    snakeSegments.unshift({ x: gyvatėX, y: gyvatėY });
   }

8. Sukurkite naują funkciją. Viduje nustatykite užpildymo stilių į juodą. Šią spalvą ji naudos piešdama gyvatę:

   funkcijapiešti Gyvatė() {
    canvas2d.fillStyle = "juodas"; 
   }

9. Kiekvienam segmentui, kuris sudaro gyvatės dydį, nubrėžkite kvadratą, kurio plotis ir aukštis yra 10 pikselių:

   dėl (var aš = 0; i < gyvatėSegmentai.ilgis; i++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Sukurkite žaidimo kilpą, kuri veiks kas 100 milisekundžių. Dėl to žaidimas nuolat trauks gyvatę į naują padėtį, o tai bus labai svarbu, kai gyvatė pradės judėti:

    funkcijagameLoop() {
     judėtiGyvatė();
     pieštiSnake();

11. Atidarykite failą „index.html“ žiniatinklio naršyklėje, kad pamatytumėte mažiausio dydžio gyvatę pradinėje padėtyje.

Kaip priversti gyvatę judėti

Pridėkite šiek tiek logikos, kad gyvatė judėtų skirtingomis kryptimis, priklausomai nuo to, kokį klaviatūros mygtuką žaidėjas paspaudžia.

1. Failo viršuje nurodykite pradinę gyvatės kryptį:

   var kryptisX = 10;
   var kryptis Y = 0;
   

2. Pridėkite įvykių tvarkyklę, kuri įsijungia žaidėjui paspaudus klavišą:

   dokumentas.onkeydown = funkcija(renginys) {
   };

3. Įvykių tvarkyklėje pakeiskite gyvatės judėjimo kryptį, atsižvelgdami į paspaustą klavišą:

   jungiklis (event.keyCode) {
   atveju37: // Rodyklė kairėn
    kryptisX = -10;
    kryptis Y = 0;
   pertrauka;
   atveju38: // Rodyklė aukštyn
    kryptisX = 0;
    kryptis Y = -10;
   pertrauka;
   atveju39: // Rodyklė dešinėn
    kryptisX = 10;
    kryptis Y = 0;
   pertrauka;
   atveju40: // Rodyklė žemyn
    kryptisX = 0;
    kryptis Y = 10;
   pertrauka;
   }

4. Funkcijoje moveSnake() naudokite kryptį, kad atnaujintumėte gyvatės X ir Y koordinates. Pavyzdžiui, jei gyvatei reikia judėti į kairę, X kryptis bus „-10“. Bus atnaujinta X koordinatė, kad būtų pašalinta 10 pikselių kiekvienam žaidimo kadrui:

   funkcijajudėti Gyvatė() {
    snakeSegments.unshift({ x: gyvatėX, y: gyvatėY });
    gyvatėX += kryptisX;
    gyvatėY += kryptisY;
   }

5. Šiuo metu žaidimas nepašalina ankstesnių segmentų, kol gyvatė juda. Dėl to gyvatė atrodys taip:
6. Norėdami tai išspręsti, prieš piešdami naują gyvatę kiekviename kadre, nuvalykite drobę, funkcijos drawSnake() pradžioje:

   canvas2d.clearRect(0, 0, drobė.plotis, drobė.aukštis);

7. Taip pat turėsite pašalinti paskutinį snakeSegments masyvo elementą, esantį funkcijos moveSnake() viduje:

   kol (snakeSegments.length > snakeLength) {
    gyvatėSegments.pop();
   }

8. Atidarykite failą „index.html“ ir paspauskite kairįjį, dešinįjį, aukštyn arba žemyn klavišus, kad perkeltumėte gyvatę.

Kaip pridėti maisto ant drobės

Pridėkite taškų prie stalo žaidimo, kad pavaizduotų gyvatei skirtus maisto gabalus.

1. Failo viršuje paskelbkite naują kintamąjį, kad išsaugotumėte maisto gabalėlių masyvą:

   var taškai = [];

2. Sukurkite naują funkciją. Viduje sugeneruokite atsitiktines taškų X ir Y koordinates. Taip pat galite užtikrinti, kad lentoje bet kuriuo metu būtų tik 10 taškų:

   funkcijaspawnDots() {
   jeigu(taškai.ilgis < 10) {
   var dotX = Matematika.floor(Matematika.random() * canvas.width);
   var taškasY = Matematika.floor(Matematika.random() * drobė.aukštis);
    dots.push({ x: dotX, y: dotY });
    }
   }

3. Sugeneravę maisto X ir Y koordinates, nupieškite jas ant drobės raudona spalva:

   dėl (var aš = 0; i < taškai.ilgis; i++) {
    canvas2d.fillStyle = "raudona";
    canvas2d.fillRect (dots[i].x, dots[i].y, 10, 10);
   }

4. Iškvieskite naują funkciją spawnDots() žaidimo ciklo viduje:

   funkcijagameLoop() {
    judėtiGyvatė();
    pieštiSnake();
    spawnDots();
   jeigu(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Atidarykite failą „index.html“, kad peržiūrėtumėte maistą žaidimų lentoje.

Kaip priversti gyvatę augti

Galite priversti gyvatę augti padidindami jos ilgį, kai ji susiduria su maisto tašku.

1. Sukurkite naują funkciją. Jo viduje peržiūrėkite kiekvieną taškų masyvo elementą:

   funkcijapatikrinkite susidūrimą() {
   dėl (var aš = 0; i < taškai.ilgis; i++) {
   
    }
   }

2. Jei gyvatės padėtis atitinka bet kurių taškų koordinates, padidinkite gyvatės ilgį ir ištrinkite tašką:

   jeigu (gyvatėX < taškai[i].x + 10 && 
    gyvatėX + 10 > taškai[i].x && 
    gyvatėY < taškai[i].y + 10 && 
    gyvatėY + 10 > taškai [i].y) {
    gyvatėsIlgis++;
    dots.splice (i, 1);
   }

3. Iškvieskite naują funkciją checkCollision() žaidimo cikle:

   funkcijagameLoop() {
    judėtiGyvatė();
    pieštiSnake();
    spawnDots();
    checkCollision();
   jeigu(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Žiniatinklio naršyklėje atidarykite failą „index.html“. Perkelkite gyvatę klaviatūra, kad surinktumėte maisto gabaliukus ir augintumėte gyvatę.

Kaip baigti žaidimą

Norėdami baigti žaidimą, patikrinkite, ar gyvatė neatsitrenkė į savo uodegą arba su kuria nors siena.

1. Sukurkite naują funkciją, kad išspausdintumėte įspėjimą „Žaidimas baigtas“.

   funkcijažaidimas baigtas() {
    setTimeout(funkcija() {
    budrus("Žaidimas baigtas!");
    }, 500); 
    žaidimas baigėsi = tiesa
   }

2. Funkcijoje checkCollision() patikrinkite, ar gyvatė nepataikė į kurią nors drobės sienelę. Jei taip, iškvieskite gameOver() funkciją:

   jeigu (gyvatėX < -10 || 
    gyvatėY < -10 || 
    gyvatėX > drobė.plotis+10 ||
    gyvatėY > drobė.aukštis+10) {
    žaidimas baigtas();
   }

3. Norėdami patikrinti, ar gyvatės galva nesusitrenkė į kurį nors iš uodegos segmentų, perbraukite kiekvieną gyvatės gabalėlį:

   dėl (var aš = 1; i < gyvatėSegmentai.ilgis; i++) {
   }

4. Kilpoje patikrinkite, ar gyvatės galvos vieta atitinka bet kurį uodegos segmentą. Jei taip, tai reiškia, kad galva susidūrė su uodega, todėl baigkite žaidimą:

   jeigu (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    žaidimas baigtas();
   }

5. Žiniatinklio naršyklėje atidarykite failą „index.html“. Pabandykite atsitrenkti į sieną arba savo uodegą, kad baigtumėte žaidimą.

„JavaScript“ sąvokų mokymasis per žaidimus

Žaidimų kūrimas gali būti puikus būdas mokymosi patirtį padaryti malonesnę. Kurkite daugiau žaidimų, kad toliau tobulintumėte savo JavaScript žinias.