8.4 KiB

Raw Permalink Blame History

Bygg ett rymdspel del 2: Rita hjälten och monster på canvasen

Quiz före föreläsningen

Canvasen

Canvasen är ett HTML-element som som standard inte har något innehåll; det är en tom yta. Du måste lägga till innehåll genom att rita på den.

✅ Läs mer om Canvas API på MDN.

Så här deklareras det vanligtvis, som en del av sidans body:

<canvas id="myCanvas" width="200" height="100"></canvas>

Ovan ställer vi in id, width och height.

id: sätt detta så att du kan få en referens när du behöver interagera med det.
width: detta är elementets bredd.
height: detta är elementets höjd.

Rita enkel geometri

Canvasen använder ett kartesiskt koordinatsystem för att rita saker. Det använder alltså en x-axel och y-axel för att uttrycka var något är placerat. Positionen 0,0 är det övre vänstra hörnet och det nedre högra är det du har angett som bredd och höjd för canvasen.

Bild från MDN

För att rita på canvas-elementet måste du gå igenom följande steg:

Få en referens till canvas-elementet.
Få en referens till Context-elementet som sitter på canvas-elementet.
Utför en ritoperation med hjälp av Context-elementet.

Kod för ovanstående steg ser vanligtvis ut så här:

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

✅ Canvas API fokuserar mest på 2D-former, men du kan också rita 3D-element på en webbsida; för detta kan du använda WebGL API.

Du kan rita alla möjliga saker med Canvas API, som:

Geometriska former, vi har redan visat hur man ritar en rektangel, men det finns mycket mer du kan rita.
Text, du kan rita text med valfritt typsnitt och färg.
Bilder, du kan rita en bild baserad på en bildfil, som en .jpg eller .png till exempel.

✅ Prova! Du vet hur man ritar en rektangel, kan du rita en cirkel på en sida? Ta en titt på några intressanta Canvas-ritningar på CodePen. Här är ett särskilt imponerande exempel.

Ladda och rita en bildfil

Du laddar en bildfil genom att skapa ett Image-objekt och ställa in dess src-egenskap. Sedan lyssnar du på load-händelsen för att veta när den är redo att användas. Koden ser ut så här:

Ladda fil

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // image loaded and ready to be used
}

Mönster för att ladda fil

Det rekommenderas att omsluta ovanstående i en konstruktion som denna, så att det blir enklare att använda och du bara försöker manipulera det när det är helt laddat:

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

För att rita spelobjekt på en skärm skulle din kod se ut så här:

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

Nu är det dags att börja bygga ditt spel

Vad du ska bygga

Du ska bygga en webbsida med ett Canvas-element. Det ska visa en svart skärm 1024*768. Vi har försett dig med två bilder:

Hjälteskepp
5*5 monster

Rekommenderade steg för att börja utvecklingen

Leta upp filerna som har skapats åt dig i undermappen your-work. Den bör innehålla följande:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

Öppna en kopia av denna mapp i Visual Studio Code. Du behöver ha en lokal utvecklingsmiljö inställd, helst med Visual Studio Code med NPM och Node installerat. Om du inte har npm installerat på din dator, så här gör du det.

Starta ditt projekt genom att navigera till mappen your_work:

cd your-work
npm start

Ovanstående startar en HTTP-server på adressen http://localhost:5000. Öppna en webbläsare och skriv in den adressen. Det är en tom sida just nu, men det kommer att ändras.

Obs: för att se ändringar på din skärm, uppdatera din webbläsare.

Lägg till kod

Lägg till den nödvändiga koden i your-work/app.js för att lösa följande:

Rita en canvas med svart bakgrund

tips: lägg till två rader under den lämpliga TODO i /app.js, ställ in ctx-elementet till svart och topp/vänster-koordinaterna till 0,0 och höjden och bredden till att motsvara canvasens mått.
Ladda texturer

tips: lägg till spelaren och fiendens bilder med hjälp av await loadTexture och skicka in bildens sökväg. Du kommer inte att se dem på skärmen än!
Rita hjälten i mitten av skärmen i den nedre halvan

tips: använd drawImage-API:t för att rita heroImg på skärmen, ställ in canvas.width / 2 - 45 och canvas.height - canvas.height / 4);

Rita 5*5 monster

tips: Nu kan du avkommentera koden för att rita fiender på skärmen. Gå sedan till funktionen createEnemies och bygg ut den.

Börja med att ställa in några konstanter:

const MONSTER_TOTAL = 5;
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
const STOP_X = START_X + MONSTER_WIDTH;

sedan, skapa en loop för att rita arrayen av monster på skärmen:

for (let x = START_X; x < STOP_X; x += 98) {
    for (let y = 0; y < 50 * 5; y += 50) {
      ctx.drawImage(enemyImg, x, y);
    }
  }

Resultat

Det färdiga resultatet bör se ut så här:

Lösning

Försök att lösa det själv först, men om du fastnar, ta en titt på en lösning

🚀 Utmaning

Du har lärt dig att rita med det 2D-fokuserade Canvas API:t; ta en titt på WebGL API och försök att rita ett 3D-objekt.

Quiz efter föreläsningen

Granskning & Självstudier

Lär dig mer om Canvas API genom att läsa om det.

Uppgift

Utforska Canvas API

Ansvarsfriskrivning:
Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Även om vi strävar efter noggrannhet, bör du vara medveten om att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.

8.4 KiB Raw Permalink Blame History