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

Byg et rumspil del 2: Tegn helten og monstre på lærredet

Quiz før forelæsning

Lærredet

Lærredet er et HTML-element, der som standard ikke har noget indhold; det er en tom flade. Du skal tilføje indhold ved at tegne på det.

✅ Læs mere om Canvas API på MDN.

Her er, hvordan det typisk deklareres som en del af sidens body:

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

Ovenfor sætter vi id, width og height.

id: sæt dette, så du kan få en reference, når du skal interagere med det.
width: dette er elementets bredde.
height: dette er elementets højde.

Tegning af simpel geometri

Lærredet bruger et kartesisk koordinatsystem til at tegne ting. Det betyder, at det bruger en x-akse og y-akse til at udtrykke, hvor noget er placeret. Placeringen 0,0 er øverste venstre hjørne, og nederste højre hjørne er det, du har angivet som lærredets BREDDE og HØJDE.

Billede fra MDN

For at tegne på lærredselementet skal du følge disse trin:

Få en reference til lærredselementet.
Få en reference til kontekstelementet, der sidder på lærredselementet.
Udfør en tegneoperation ved hjælp af kontekstelementet.

Kode for ovenstående trin ser typisk sådan ud:

// 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 fokuserer primært på 2D-former, men du kan også tegne 3D-elementer på en hjemmeside; til dette kan du bruge WebGL API.

Du kan tegne mange forskellige ting med Canvas API, såsom:

Geometriske former, vi har allerede vist, hvordan man tegner et rektangel, men der er meget mere, du kan tegne.
Tekst, du kan tegne tekst med enhver skrifttype og farve, du ønsker.
Billeder, du kan tegne et billede baseret på en billedfil som f.eks. en .jpg eller .png.

✅ Prøv det! Du ved, hvordan man tegner et rektangel, kan du tegne en cirkel på en side? Tag et kig på nogle interessante Canvas-tegninger på CodePen. Her er et særligt imponerende eksempel.

Indlæs og tegn en billedfil

Du indlæser en billedfil ved at oprette et Image-objekt og sætte dets src-egenskab. Derefter lytter du til load-begivenheden for at vide, hvornår det er klar til brug. Koden ser sådan ud:

Indlæs fil

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

Indlæsningsmønster

Det anbefales at pakke ovenstående ind i en konstruktion som denne, så det er lettere at bruge, og du kun forsøger at manipulere det, når det er fuldt indlæst:

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')
}

For at tegne spilressourcer på en skærm vil din kode se sådan ud:

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 er det tid til at begynde at bygge dit spil

Hvad skal bygges

Du skal bygge en webside med et lærredselement. Det skal vise en sort skærm 1024*768. Vi har givet dig to billeder:

Helteskib
5*5 monster

Anbefalede trin til at starte udviklingen

Find de filer, der er oprettet til dig i undermappen your-work. Den bør indeholde følgende:

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

Åbn en kopi af denne mappe i Visual Studio Code. Du skal have et lokalt udviklingsmiljø sat op, helst med Visual Studio Code med NPM og Node installeret. Hvis du ikke har npm sat op på din computer, sådan gør du.

Start dit projekt ved at navigere til mappen your_work:

cd your-work
npm start

Ovenstående starter en HTTP-server på adressen http://localhost:5000. Åbn en browser og indtast den adresse. Det er en tom side lige nu, men det vil ændre sig.

Bemærk: for at se ændringer på din skærm, opdater din browser.

Tilføj kode

Tilføj den nødvendige kode til your-work/app.js for at løse nedenstående:

Tegn et lærred med sort baggrund

tip: tilføj to linjer under den relevante TODO i /app.js, der sætter ctx-elementet til sort og top/venstre koordinater til 0,0 og højden og bredden til at matche lærredet.
Indlæs teksturer

tip: tilføj spiller- og fjendebilleder ved hjælp af await loadTexture og angiv stien til billedet. Du vil ikke se dem på skærmen endnu!
Tegn helten i midten af skærmen i den nederste halvdel

tip: brug drawImage API til at tegne heroImg på skærmen, og sæt canvas.width / 2 - 45 og canvas.height - canvas.height / 4).

Tegn 5*5 monstre

tip: Nu kan du fjerne kommentaren fra koden for at tegne fjender på skærmen. Gå derefter til funktionen createEnemies og byg den ud.

Først skal du opsætte nogle 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;

derefter oprette en løkke for at tegne arrayet af monstre 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ærdige resultat skal se sådan ud:

Løsning

Prøv først at løse det selv, men hvis du går i stå, kan du se en løsning.

🚀 Udfordring

Du har lært om at tegne med det 2D-fokuserede Canvas API; tag et kig på WebGL API, og prøv at tegne et 3D-objekt.

Quiz efter forelæsning

Gennemgang & Selvstudie

Lær mere om Canvas API ved at læse om det.

Opgave

Leg med Canvas API

Ansvarsfraskrivelse:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.