Hur man gör ett ormspel med HTML, CSS och JavaScript

Ett ormspel är en klassisk programmeringsövning som du kan använda för att förbättra dina färdigheter i programmering och problemlösning. Du kan skapa spelet i en webbläsare med HTML, CSS och JavaScript.

I spelet styr du en orm som rör sig runt ett bräde. Ormen växer i storlek när du samlar mat. Spelet kommer att sluta om du kolliderar med din egen svans eller någon av väggarna.

Hur man skapar gränssnittet för Canvas

Använd HTML och CSS för att lägga till duken för ormen att flytta runt på. Det finns många andra HTML och CSS-projekt du kan öva på, om du behöver revidera några grundläggande begrepp.

Du kan hänvisa till detta projekt GitHub-förråd för hela källkoden.

1. Skapa en ny fil som heter "index.html".
instagram viewer
2. Öppna filen med valfri textredigerare som t.ex Visual Code eller Atom. Lägg till den grundläggande HTML-kodstrukturen:

   html>
   <htmllang="sv-US">
   <huvud>
   <titel>Snake Gametitel>
   huvud>
   <kropp>
   kropp>
   html>

3. Inuti body-taggen lägger du till en duk som representerar spelplanen för ormen.

   <h2>Snake Gameh2>
   <divid="spel">
   <dukid="orm">duk>
   div>

4. Skapa en ny fil som heter "styles.css" i samma mapp som din HTML-fil.
5. Inuti, lägg till lite CSS för den övergripande webbsidan. Du kan också styla din webbplats med hjälp av andra viktiga CSS-tips och tricks.

   #spel {
   bredd:400px;
   höjd:400px;
   marginal:0bil;
   bakgrundsfärg:#eee;
   }
   h2 {
   textjustera:Centrum;
   typsnittsfamilj:Arial;
   textstorlek:36px;
   } 
   

6. Inuti din HTML-fil lägger du till en länk till CSS i head-taggen:

   <länkrel="stilmall"typ="text/css"href="styles.css">

7. För att se arbetsytan, öppna filen "index.html" i en webbläsare.

Hur man ritar ormen

I exemplet nedan representerar den svarta linjen ormen:

Flera rutor eller "segment" utgör ormen. När ormen växer ökar också antalet rutor. I början av spelet är ormens längd en bit.

1. Inuti din HTML-fil länkar du till en ny JavaScript-fil längst ned i body-taggen:

   <kropp>
    Din kod här 
   <manussrc="script.js">manus>
   kropp>

2. Skapa script.js och börja med att hämta DOM-elementet på arbetsytan:

   var duk = dokumentera.getElementById("orm");

3. Ställ in sammanhanget för canvas HTML-elementet. I det här fallet vill du att spelet ska rendera en 2D-duk. Detta gör att du kan rita flera former eller bilder på HTML-elementet.

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

4. Ställ in andra variabler i spelet, som om spelet har avslutats, och höjden och bredden på duken:

   var spelet avslutat = falsk;
   canvas.width = 400;
   canvas.height = 400;

5. Deklarera en variabel som heter "snakeSegments". Detta kommer att hålla antalet "rutor" som ormen kommer att ta upp. Du kan också skapa en variabel för att hålla reda på ormens längd:

   var snakeSegments = [];
   var ormlängd = 1;
   

6. Deklarera den initiala X- och Y-positionen för ormen:

   var snakeX = 0;
   var ormY = 0;

7. Skapa en ny funktion. Inuti, lägg till startormbiten till snakeSegments-arrayen, med dess start X- och Y-koordinater:

   fungeraflytta Snake() {
    snakeSegments.unshift({ x: snakeX, y: snakeY });
   }

8. Skapa en ny funktion. Inuti ställer du in fyllningsstilen till svart. Det här är färgen den kommer att använda för att rita ormen:

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

9. För varje segment som utgör ormens storlek, rita en kvadrat med en bredd och höjd av 10 pixlar:

   för (var jag = 0; i < snakeSegments.length; i++) {
    canvas2d.fillRect (snakeSegments[i].x, snakeSegments[i].y, 10, 10);
    }

10. Skapa en spelloop som körs var 100:e millisekund. Detta kommer att få spelet att ständigt dra ormen i sin nya position, vilket kommer att vara mycket viktigt när ormen börjar röra sig:

    fungeragameLoop() {
     moveSnake();
     drawSnake();

11. Öppna filen "index.html" i en webbläsare för att se ormen i sin minsta storlek i sin startposition.

Hur man får ormen att röra sig

Lägg till lite logik för att flytta ormen i olika riktningar, beroende på vilken knapp spelaren trycker på på tangentbordet.

1. Längst upp i filen, förklara ormens initiala riktning:

   var riktning X = 10;
   var riktning Y = 0;
   

2. Lägg till en händelsehanterare som utlöses när spelaren trycker på en tangent:

   dokumentera.onkeydown = fungera(händelse) {
   };

3. Inuti händelsehanteraren, ändra riktningen som ormen rör sig, baserat på den nedtryckta knappen:

   växla (event.keyCode) {
   fall37: // Vänster pil
    riktning X = -10;
    riktning Y = 0;
   ha sönder;
   fall38: // Uppåtpil
    riktning X = 0;
    riktning Y = -10;
   ha sönder;
   fall39: // Höger pil
    riktning X = 10;
    riktning Y = 0;
   ha sönder;
   fall40: // Nedåtpil
    riktning X = 0;
    riktning Y = 10;
   ha sönder;
   }

4. I moveSnake()-funktionen, använd riktningen för att uppdatera X- och Y-koordinaterna för ormen. Till exempel, om ormen behöver röra sig åt vänster blir X-riktningen "-10". Detta kommer att uppdatera X-koordinaten för att ta bort 10 pixlar för varje bildruta i spelet:

   fungeraflytta Snake() {
    snakeSegments.unshift({ x: snakeX, y: snakeY });
    snakeX += riktningX;
    ormY += riktning Y;
   }

5. Spelet tar för närvarande inte bort tidigare segment medan ormen rör sig. Detta kommer att få ormen att se ut så här:
6. För att fixa detta, rensa duken innan du ritar den nya ormen i varje ram, i början av drawSnake()-funktionen:

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

7. Du måste också ta bort det sista elementet i snakeSegments-arrayen, inuti moveSnake()-funktionen:

   medan (snakeSegments.length > snakeLength) {
    snakeSegments.pop();
   }

8. Öppna filen "index.html" och tryck på vänster-, höger-, upp- eller nedtangenterna för att flytta ormen.

Hur man lägger till mat på duken

Lägg till prickar i brädspelet för att representera matbitar för ormen.

1. Deklarera en ny variabel överst i filen för att lagra en mängd matbitar:

   var prickar = [];

2. Skapa en ny funktion. Inuti, generera slumpmässiga X- och Y-koordinater för prickarna. Du kan också se till att endast 10 punkter finns på tavlan när som helst:

   fungeraspawnDots() {
   om(dots.length < 10) {
   var dotX = Matematik.golv(Matematik.random() * canvas.width);
   var dotY = Matematik.golv(Matematik.random() * canvas.height);
    dots.push({ x: dotX, y: dotY });
    }
   }

3. Efter att ha genererat X- och Y-koordinaterna för maten, rita dem på duken med en röd färg:

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

4. Anropa den nya spawnDots()-funktionen i spelslingan:

   fungeragameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
   om(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

5. Öppna filen "index.html" för att se maten på spelplanen.

Hur man får ormen att växa

Du kan få ormen att växa genom att öka dess längd när den kolliderar med en matprick.

1. Skapa en ny funktion. Inuti den går du igenom varje element i prickarrayen:

   fungeracheckCollision() {
   för (var jag = 0; i < dots.length; i++) {
   
    }
   }

2. Om ormens position matchar koordinaterna för några prickar, öka ormens längd och ta bort punkten:

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

3. Anropa den nya checkCollision()-funktionen i spelslingan:

   fungeragameLoop() {
    moveSnake();
    drawSnake();
    spawnDots();
    checkCollision();
   om(!gameEnded) {
    setTimeout (gameLoop, 100);
    }
   }

4. Öppna filen "index.html" i en webbläsare. Flytta ormen med hjälp av tangentbordet för att samla matbitarna och odla ormen.

Hur man avslutar spelet

För att avsluta spelet, kontrollera om ormen kolliderade med sin egen svans eller någon av väggarna.

1. Skapa en ny funktion för att skriva ut en "Game Over"-varning.

   fungeragameOver() {
    setTimeout(fungera() {
    varna("Spelet slut!");
    }, 500); 
    spelet avslutat = Sann
   }

2. Inuti checkCollision()-funktionen, kontrollera om ormen träffade någon av dukens väggar. Om så är fallet, anropa gameOver()-funktionen:

   om (snakeX < -10 || 
    ormY < -10 || 
    snakeX > canvas.width+10 ||
    snakeY > canvas.height+10) {
    gameOver();
   }

3. För att kontrollera om huvudet på ormen kolliderade med något av svanssegmenten, gå igenom varje bit av ormen:

   för (var jag = 1; i < snakeSegments.length; i++) {
   }

4. Inuti for-loopen, kontrollera om platsen för ormens huvud matchar något av svanssegmenten. Om så är fallet betyder detta att huvudet kolliderade med en svans, så avsluta spelet:

   om (snakeX snakeSegments[i].x && snakeY snakeSegments[i].y) {
    gameOver();
   }

5. Öppna filen "index.html" i en webbläsare. Försök att träffa en vägg eller din egen svans för att avsluta spelet.

Lär dig JavaScript-koncept genom spel

Att skapa spel kan vara ett bra sätt att göra din inlärningsupplevelse roligare. Fortsätt skapa fler spel för att fortsätta förbättra dina JavaScript-kunskaper.