8.4 KiB

Raw Blame History

Byg et Rumspil Del 2: Tegn Helten og Monstrene på Canvas

Quiz før forelæsning

Canvas

Canvas 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'et på MDN.

Sådan ser det typisk ud, når det erklæres som en del af sidens body:

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

Ovenfor sætter vi id, width og height.

id: angiv 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

Canvas bruger et kartesisk koordinatsystem til at tegne ting. Det betyder, at det bruger en x-akse og en y-akse til at angive, hvor noget er placeret. Positionen 0,0 er øverste venstre hjørne, og nederste højre hjørne er det, du har angivet som CANVAS' BREDDE og HØJDE.

Billede fra MDN

For at tegne på canvas-elementet skal du gennemgå følgende trin:

Få en reference til Canvas-elementet.
Få en reference til Context-elementet, der sidder på Canvas-elementet.
Udfør en tegneoperation ved hjælp af Context-elementet.

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

Du kan tegne mange forskellige ting med Canvas API'et, 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 billedressource

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

Indlæs ressource

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

Mønster for indlæsning af ressource

Det anbefales at pakke ovenstående ind i en konstruktion som denne, så det er nemmere 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 Canvas-element. Det skal vise en sort skærm 1024*768. Vi har givet dig to billeder:

Helteskib
5*5 monster

Anbefalede trin for at starte udviklingen

Find de filer, der er blevet 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ø opsat, helst med Visual Studio Code med NPM og Node installeret. Hvis du ikke har npm opsat på din computer, sådan gør du det.

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 canvas med sort baggrund

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

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

tip: brug drawImage API'et 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 kommenteringen af koden for at tegne fjender på skærmen. Gå derefter til funktionen createEnemies og byg den ud.

Først, opsæt 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, opret 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 bør se sådan ud:

Løsning

Prøv venligst at løse det selv først, men hvis du sidder fast, 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'et, og prøv at tegne et 3D-objekt.

Quiz efter forelæsning

Gennemgang & Selvstudie

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

Opgave

Leg med Canvas API'et

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 påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.

8.4 KiB Raw Blame History