History

leestott 425e0f6fbe 🌐 Update translations via Co-op Translator		3 weeks ago
..
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

Bygg ett rymdspel del 2: Rita hjälte och monster på Canvas

Quiz före föreläsning

Canvas

Canvas ä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å det.

✅ 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

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

Bild från MDN

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

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

Koden 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 baserat på en bildresurs som en .jpg eller .png till exempel.

✅ Testa! 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 bildresurs

Du laddar en bildresurs 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 resurs

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 resurs

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 den när den är helt laddad:

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 spelresurser 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 kommer att starta en HTTP-server på adressen http://localhost:5000. Öppna en webbläsare och ange den adressen. Det är en tom sida just nu, men det kommer att ändras.

Obs: för att se ändringar på skärmen, 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 lämplig TODO i /app.js, där du ställer in ctx-elementet till svart och topp/vänster-koordinaterna till 0,0 samt höjden och bredden till att motsvara canvasens.
Ladda texturer

tips: lägg till spelare och fiendebilder med hjälp av await loadTexture och ange 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:et för att rita heroImg på skärmen, med inställningarna 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;

Skapa sedan 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 lösa det själv först, men om du fastnar kan du titta på en lösning.

🚀 Utmaning

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

Quiz efter föreläsning

Granskning och 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.