Hoe maak je een slangenspel met behulp van HTML, CSS en JavaScript

Een slangenspel is een klassieke programmeeroefening die je kunt gebruiken om je programmeer- en probleemoplossende vaardigheden te verbeteren. Je kunt het spel in een webbrowser maken met behulp van HTML, CSS en JavaScript.

In het spel bestuur je een slang die over een bord beweegt. De slang wordt groter naarmate je voedsel verzamelt. Het spel eindigt als je tegen je eigen staart of een van de muren botst.

Hoe de gebruikersinterface voor het canvas te maken

Gebruik HTML en CSS om het canvas toe te voegen waarop de slang kan bewegen. Er zijn er nog veel meer HTML- en CSS-projecten waarop u kunt oefenen als u basisconcepten moet herzien.

U kunt verwijzen naar dit project GitHub-opslagplaats voor de volledige broncode.

1. Maak een nieuw bestand met de naam "index.html".
2. Open het bestand met een willekeurige teksteditor zoals Visuele code of atoom. Voeg de basis HTML-codestructuur toe:

   html>
   <htmllang="nl-VS">
   <hoofd>
   <titel>Slang speltitel>
   hoofd>
   <lichaam>
   lichaam>
   html>

3. Voeg binnen de body-tag een canvas toe om het spelbord voor de slang weer te geven.

   <h2>Slang spelh2>
   <divID kaart="spel">
   <canvasID kaart="slang">canvas>
   div>

4. Maak in dezelfde map als uw HTML-bestand een nieuw bestand met de naam "styles.css".
5. Voeg binnenin wat CSS toe voor de algehele webpagina. U kunt uw website ook stylen met andere essentiële CSS-tips en -trucs.

   #spel {
   breedte:400px;
   hoogte:400px;
   marge:0auto;
   Achtergrond kleur:#eee;
   }
   h2 {
   tekst uitlijnen:centrum;
   font-familie:Ariel;
   lettertypegrootte:36px;
   } 
   

6. Voeg in uw HTML-bestand een link naar de CSS toe in de head-tag:

   <koppelingrel="stijlblad"type="tekst/css"href="stijlen.css">

7. Om het canvas te bekijken, opent u uw "index.html"-bestand in een webbrowser.

Hoe de slang te tekenen

In het onderstaande voorbeeld stelt de zwarte lijn de slang voor:

Meerdere vierkanten of "segmenten" vormen de slang. Naarmate de slang groeit, neemt ook het aantal vierkanten toe. Aan het begin van het spel is de lengte van de slang één stuk.

1. Link in uw HTML-bestand naar een nieuw JavaScript-bestand onderaan de body-tag:

   <lichaam>
    Uw code hier 
   <scriptsrc="script.js">script>
   lichaam>

2. Maak script.js en begin met het ophalen van het DOM-element van het canvas:

   var doek = document.getElementById("slang");

3. Stel de context in voor het canvas HTML-element. In dit geval wil je dat de game een 2D-canvas weergeeft. Hiermee kunt u meerdere vormen of afbeeldingen op het HTML-element tekenen.

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

4. Stel andere in-game-variabelen in, zoals of het spel is afgelopen en de hoogte en breedte van het canvas:

   var spel beëindigd = vals;
   canvas.breedte = 400;
   canvas.hoogte = 400;

5. Declareer een variabele met de naam "snakeSegments". Dit houdt het aantal "vierkanten" vast dat de slang zal innemen. U kunt ook een variabele maken om de lengte van de slang bij te houden:

   var snakeSegmenten = [];
   var slangLengte = 1;
   

6. Verklaar de aanvankelijke X- en Y-positie van de slang:

   var slangX = 0;
   var slangY = 0;

7. Maak een nieuwe functie aan. Voeg binnenin het startslangstuk toe aan de snakeSegments-array, met zijn start X- en Y-coördinaten:

   functieverplaatsSlang() {
    snakeSegments.unshift({ X: snakeX, j: slangY });
   }

8. Maak een nieuwe functie aan. Stel binnenin de vulstijl in op zwart. Dit is de kleur die het zal gebruiken om de slang te tekenen:

   functietekenslang() {
    canvas2d.fillStyle = "zwart"; 
   }

9. Teken voor elk segment waaruit de grootte van de slang bestaat een vierkant met een breedte en hoogte van 10 pixels:

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

10. Maak een spellus die elke 100 milliseconden wordt uitgevoerd. Hierdoor zal het spel de slang constant in zijn nieuwe positie trekken, wat erg belangrijk zal zijn wanneer de slang begint te bewegen:

    functiespelLoop() {
     verplaatsSnake();
     trekslang();

11. Open het bestand "index.html" in een webbrowser om de slang op zijn kleinste formaat in de startpositie te zien.

Hoe de slang te laten bewegen

Voeg wat logica toe om de slang in verschillende richtingen te bewegen, afhankelijk van welke knop de speler op het toetsenbord indrukt.

1. Verklaar bovenaan het bestand de oorspronkelijke richting van de slang:

   var richtingX = 10;
   var richtingY = 0;
   

2. Voeg een gebeurtenishandler toe die wordt geactiveerd wanneer de speler op een toets drukt:

   document.onkeydown = functie(evenement) {
   };

3. Verander binnen de gebeurtenishandler de richting waarin de slang beweegt, op basis van de ingedrukte toets:

   schakelaar (event.keyCode) {
   geval37: // Linker pijl
    richtingX = -10;
    richtingY = 0;
   pauze;
   geval38: // Pijltje omhoog
    richtingX = 0;
    richtingY = -10;
   pauze;
   geval39: // Rechter pijl
    richtingX = 10;
    richtingY = 0;
   pauze;
   geval40: // Pijl-omlaag
    richtingX = 0;
    richtingY = 10;
   pauze;
   }

4. Gebruik in de functie moveSnake() de richting om de X- en Y-coördinaten van de snake bij te werken. Als de slang bijvoorbeeld naar links moet bewegen, is de X-richting "-10". Hiermee wordt de X-coördinaat bijgewerkt om 10 pixels voor elk frame van de game te verwijderen:

   functieverplaatsSlang() {
    snakeSegments.unshift({ X: snakeX, j: slangY });
    slangX += richtingX;
    slangY += richtingY;
   }

5. De game verwijdert momenteel geen eerdere segmenten terwijl de slang beweegt. Hierdoor ziet de slang er zo uit:
6. Om dit op te lossen, maakt u het canvas leeg voordat u de nieuwe slang in elk frame tekent, aan het begin van de functie drawSnake():

   canvas2d.clearRect(0, 0, canvasbreedte, canvashoogte);

7. Je zult ook het laatste element van de snakeSegments-array moeten verwijderen, binnen de moveSnake() functie:

   terwijl (slangSegments.lengte > slangLengte) {
    snakeSegments.pop();
   }

8. Open het bestand "index.html" en druk op de toetsen links, rechts, omhoog of omlaag om de slang te verplaatsen.

Hoe voedsel op het canvas toe te voegen

Voeg stippen toe aan het bordspel om voedselstukken voor de slang weer te geven.

1. Declareer een nieuwe variabele bovenaan het bestand om een ​​reeks voedselstukken op te slaan:

   var punten = [];

2. Maak een nieuwe functie aan. Genereer binnenin willekeurige X- en Y-coördinaten voor de punten. Je kunt er ook voor zorgen dat er altijd maar 10 stippen op het bord staan:

   functiespawnDots() {
   als(puntlengte < 10) {
   var puntX = Wiskunde.vloer(Wiskunde.random() * canvas.breedte);
   var punt Y = Wiskunde.vloer(Wiskunde.random() * canvas.hoogte);
    puntjes.push({ X: puntX, j: dotY });
    }
   }

3. Na het genereren van de X- en Y-coördinaten voor het voedsel, tekent u ze op het canvas met een rode kleur:

   voor (var ik = 0; i < puntjes.lengte; ik++) {
    canvas2d.fillStyle = "rood";
    canvas2d.fillRect (punten[i].x, punten[i].y, 10, 10);
   }

4. Roep de nieuwe functie spawnDots() aan binnen de spellus:

   functiespelLoop() {
    verplaatsSnake();
    trekslang();
    spawnDots();
   als(!spelBeëindigd) {
    setTimeout (gameLoop, 100);
    }
   }

5. Open het bestand "index.html" om het voedsel op het spelbord te bekijken.

Hoe de slang te laten groeien

Je kunt de slang laten groeien door zijn lengte te verhogen wanneer hij in botsing komt met een voedselpunt.

1. Maak een nieuwe functie aan. Loop erin door elk element in de puntenarray:

   functiecheckBotsing() {
   voor (var ik = 0; i < puntjes.lengte; ik++) {
   
    }
   }

2. Als de positie van de slang overeenkomt met de coördinaten van een punt, verhoog dan de lengte van de slang en verwijder de stip:

   als (slangX < punten[i].x + 10 && 
    slangX + 10 > puntjes[i].x && 
    snakeY < puntjes[i].y + 10 && 
    slangY + 10 > puntjes[i].y) {
    slangLengte++;
    dots.splice (ik, 1);
   }

3. Roep de nieuwe functie checkCollision() aan in de spellus:

   functiespelLoop() {
    verplaatsSnake();
    trekslang();
    spawnDots();
    checkBotsing();
   als(!spelBeëindigd) {
    setTimeout (gameLoop, 100);
    }
   }

4. Open het bestand "index.html" in een webbrowser. Verplaats de slang met behulp van het toetsenbord om de stukjes voedsel te verzamelen en de slang te laten groeien.

Hoe het spel te beëindigen

Om het spel te beëindigen, controleer je of de slang in botsing is gekomen met zijn eigen staart of met een van de muren.

1. Maak een nieuwe functie om een ​​"Game Over"-waarschuwing af te drukken.

   functiespel is over() {
    setTimeout(functie() {
    alarm ("Spel is over!");
    }, 500); 
    spel beëindigd = WAAR
   }

2. Controleer in de functie checkCollision() of de slang een van de muren van het canvas heeft geraakt. Zo ja, roep dan de functie gameOver() aan:

   als (slangX < -10 || 
    slangY < -10 || 
    snakeX > canvas.breedte+10 ||
    slangY > canvas.hoogte+10) {
    spel is over();
   }

3. Om te controleren of de kop van de slang in botsing is gekomen met een van de staartsegmenten, loop je door elk stuk van de slang:

   voor (var ik = 1; i < snakeSegments.lengte; ik++) {
   }

4. Controleer in de for-lus of de locatie van de kop van de slang overeenkomt met een van de staartsegmenten. Als dat zo is, betekent dit dat de kop in botsing is gekomen met een staart, dus beëindig het spel:

   als (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    spel is over();
   }

5. Open het bestand "index.html" in een webbrowser. Probeer een muur of je eigen staart te raken om het spel te beëindigen.

JavaScript-concepten leren door middel van games

Het maken van games kan een geweldige manier zijn om uw leerervaring leuker te maken. Blijf meer games maken om je JavaScript-kennis te blijven verbeteren.