Hvordan lage et slangespill ved hjelp av HTML, CSS og JavaScript

Et slangespill er en klassisk programmeringsøvelse du kan bruke til å forbedre dine programmerings- og problemløsningsferdigheter. Du kan lage spillet i en nettleser ved å bruke HTML, CSS og JavaScript.

I spillet styrer du en slange som beveger seg rundt et brett. Slangen vokser i størrelse når du samler mat. Spillet avsluttes hvis du kolliderer med din egen hale eller noen av veggene.

Hvordan lage brukergrensesnittet for lerretet

Bruk HTML og CSS for å legge til lerretet slik at slangen kan bevege seg rundt. Det er mange andre HTML- og CSS-prosjekter du kan øve på, hvis du trenger å revidere noen grunnleggende konsepter.

Du kan referere til dette prosjektet GitHub-depot for hele kildekoden.

1. Lag en ny fil kalt "index.html".
2. Åpne filen med et hvilket som helst tekstredigeringsprogram som f.eks Visuell kode eller atom. Legg til den grunnleggende HTML-kodestrukturen:

   html>
   <htmllang="no-US">
   <hode>
   <tittel>Slangespilltittel>
   hode>
   <kropp>
   kropp>
   html>

3. Legg til et lerret på innsiden av kroppsmerket for å representere spillebrettet for slangen.

   <h2>Slangespillh2>
   <divid="spill">
   <lerretid="slange">lerret>
   div>

4. Lag en ny fil kalt "styles.css" i samme mappe som HTML-filen din.
5. Inni, legg til litt CSS for den generelle nettsiden. Du kan også style nettstedet ditt med andre viktige CSS-tips og triks.

   #spill {
   bredde:400px;
   høyde:400px;
   margin:0auto;
   bakgrunnsfarge:#eee;
   }
   h2 {
   tekstjustering:senter;
   font-familie: Arial;
   skriftstørrelse:36px;
   } 
   

6. I HTML-filen din legger du til en lenke til CSS i head-taggen:

   <linkrel="stilark"type="tekst/css"href="styles.css">

7. For å se lerretet, åpne "index.html"-filen i en nettleser.

Hvordan tegne slangen

I eksemplet nedenfor representerer den svarte linjen slangen:

Flere firkanter eller "segmenter" utgjør slangen. Etter hvert som slangen vokser, øker også antall ruter. I begynnelsen av spillet er slangens lengde ett stykke.

1. Inne i HTML-filen din, lenke til en ny JavaScript-fil nederst i body-taggen:

   <kropp>
    Din kode her 
   <manussrc="script.js">manus>
   kropp>

2. Opprett script.js og start med å hente DOM-elementet på lerretet:

   var lerret = dokument.getElementById("slange");

3. Angi konteksten for HTML-elementet på lerretet. I dette tilfellet vil du at spillet skal gjengi et 2d-lerret. Dette lar deg tegne flere former eller bilder på HTML-elementet.

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

4. Angi andre variabler i spillet, for eksempel om spillet er avsluttet, og høyden og bredden på lerretet:

   var spillet avsluttet = falsk;
   canvas.width = 400;
   canvas.height = 400;

5. Deklarer en variabel kalt "snakeSegments". Dette vil holde antall "firkanter" som slangen vil ta opp. Du kan også lage en variabel for å holde styr på slangens lengde:

   var snakeSegments = [];
   var slangelengde = 1;
   

6. Erklær den første X- og Y-posisjonen til slangen:

   var snakeX = 0;
   var slangeY = 0;

7. Opprett en ny funksjon. Inni, legg til startslangestykket til slangeSegments-arrayen, med dens startende X- og Y-koordinater:

   funksjonflytte Snake() {
    snakeSegments.unshift({ x: snakeX, y: slangeY });
   }

8. Opprett en ny funksjon. Inni, sett fyllstilen til svart. Dette er fargen den vil bruke for å tegne slangen:

   funksjondrawSnake() {
    canvas2d.fillStyle = "svart"; 
   }

9. For hvert segment som utgjør slangens størrelse, tegn en firkant med en bredde og høyde på 10 piksler:

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

10. Lag en spillløkke som kjører hvert 100. millisekund. Dette vil føre til at spillet hele tiden trekker slangen i sin nye posisjon, noe som vil være veldig viktig når slangen begynner å bevege seg:

    funksjongameLoop() {
     moveSnake();
     drawSnake();

11. Åpne "index.html"-filen i en nettleser for å se slangen i sin minste størrelse i startposisjonen.

Hvordan få slangen til å bevege seg

Legg til litt logikk for å flytte slangen i forskjellige retninger, avhengig av hvilken knapp spilleren trykker på på tastaturet.

1. Øverst i filen erklærer du den første retningen til slangen:

   var retning X = 10;
   var retning Y = 0;
   

2. Legg til en hendelsesbehandler som utløses når spilleren trykker på en tast:

   dokument.onkeydown = funksjon(begivenhet) {
   };

3. Inne i hendelsesbehandleren endrer du retningen som slangen beveger seg, basert på den trykket tasten:

   bytte om (event.keyCode) {
   sak37: // Venstre pil
    retning X = -10;
    retning Y = 0;
   gå i stykker;
   sak38: // Pil opp
    retning X = 0;
    retning Y = -10;
   gå i stykker;
   sak39: // Høyre pil
    retning X = 10;
    retning Y = 0;
   gå i stykker;
   sak40: // Pil ned
    retning X = 0;
    retning Y = 10;
   gå i stykker;
   }

4. I funksjonen moveSnake() bruker du retningen for å oppdatere X- og Y-koordinatene til slangen. For eksempel, hvis slangen trenger å bevege seg til venstre, vil X-retningen være "-10". Dette vil oppdatere X-koordinaten for å fjerne 10 piksler for hver frame av spillet:

   funksjonflytte Snake() {
    snakeSegments.unshift({ x: snakeX, y: slangeY });
    snakeX += retningX;
    slangeY += retningY;
   }

5. Spillet fjerner for øyeblikket ikke tidligere segmenter mens slangen beveger seg. Dette vil få slangen til å se slik ut:
6. For å fikse dette, tøm lerretet før du tegner den nye slangen i hver ramme, i begynnelsen av drawSnake()-funksjonen:

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

7. Du må også fjerne det siste elementet i snakeSegments-arrayen, inne i moveSnake()-funksjonen:

   samtidig som (snakeSegments.length > snakeLength) {
    snakeSegments.pop();
   }

8. Åpne "index.html"-filen og trykk venstre, høyre, opp eller ned-tastene for å flytte slangen.

Hvordan legge til mat på lerretet

Legg til prikker i brettspillet for å representere matbiter til slangen.

1. Erklær en ny variabel øverst i filen for å lagre en rekke matbiter:

   var prikker = [];

2. Opprett en ny funksjon. På innsiden genererer du tilfeldige X- og Y-koordinater for prikkene. Du kan også sørge for at bare 10 prikker er på tavlen til enhver tid:

   funksjonspawnDots() {
   hvis(dots.length < 10) {
   var dotX = Matte.gulv(Matte.random() * canvas.width);
   var dotY = Matte.gulv(Matte.random() * canvas.height);
    dots.push({ x: dotX, y: dotY });
    }
   }

3. Etter å ha generert X- og Y-koordinatene for maten, tegner du dem på lerretet med en rød farge:

   til (var jeg = 0; i < dots.length; i++) {
    canvas2d.fillStyle = "rød";
    canvas2d.fillRect (dots[i].x, dots[i].y, 10, 10);
   }

4. Kall den nye spawnDots()-funksjonen inne i spillløkken:

   funksjongameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
   hvis(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Åpne "index.html"-filen for å se maten på spillebrettet.

Hvordan få slangen til å vokse

Du kan få slangen til å vokse ved å øke lengden når den kolliderer med en matprikk.

1. Opprett en ny funksjon. Inne i den, sløyfe gjennom hvert element i dots-arrayen:

   funksjonsjekk Kollisjon() {
   til (var jeg = 0; i < dots.length; i++) {
   
    }
   }

2. Hvis slangens posisjon samsvarer med koordinatene til noen prikker, øker du slangens lengde og sletter prikken:

   hvis (snakeX < prikker[i].x + 10 && 
    snakeX + 10 > prikker[i].x && 
    snakeY < prikker[i].y + 10 && 
    snakeY + 10 > prikker[i].y) {
    snakeLength++;
    dots.splice (i, 1);
   }

3. Kall den nye checkCollision()-funksjonen i spillløkken:

   funksjongameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
    checkCollision();
   hvis(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Åpne "index.html"-filen i en nettleser. Flytt slangen ved å bruke tastaturet for å samle matbitene og dyrke slangen.

Hvordan avslutte spillet

For å avslutte spillet, sjekk om slangen kolliderte med sin egen hale, eller noen av veggene.

1. Opprett en ny funksjon for å skrive ut et "Game Over"-varsel.

   funksjonspillet er over() {
    setTimeout(funksjon() {
    varsling("Spillet er over!");
    }, 500); 
    spillet avsluttet = ekte
   }

2. Inne i checkCollision()-funksjonen, sjekk om slangen traff noen av lerretets vegger. I så fall kaller du gameOver()-funksjonen:

   hvis (snakeX < -10 || 
    slangeY < -10 || 
    snakeX > canvas.width+10 ||
    snakeY > canvas.height+10) {
    spillet er over();
   }

3. For å sjekke om hodet til slangen kolliderte med noen av halesegmentene, løkke gjennom hvert stykke av slangen:

   til (var jeg = 1; i < snakeSegments.length; i++) {
   }

4. Inne i for-løkken, sjekk om plasseringen av slangens hode samsvarer med noen av halesegmentene. I så fall betyr dette at hodet kolliderte med en hale, så avslutt spillet:

   hvis (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    spillet er over();
   }

5. Åpne "index.html"-filen i en nettleser. Prøv å treffe en vegg eller din egen hale for å avslutte spillet.

Lære JavaScript-konsepter gjennom spill

Å lage spill kan være en fin måte å gjøre læringsopplevelsen din morsommere på. Fortsett å lage flere spill for å fortsette å forbedre JavaScript-kunnskapene dine.