8.6 KiB

Raw Permalink Blame History

Bouw een Ruimtespel Deel 2: Teken Held en Monsters op Canvas

Pre-Les Quiz

Het Canvas

Het canvas is een HTML-element dat standaard geen inhoud heeft; het is een leeg vlak. Je moet er zelf op tekenen om er iets aan toe te voegen.

✅ Lees meer over de Canvas API op MDN.

Hier is hoe het meestal wordt gedeclareerd, als onderdeel van de body van de pagina:

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

Hierboven stellen we de id, width en height in.

id: stel dit in zodat je er een referentie naar kunt verkrijgen wanneer je ermee wilt werken.
width: dit is de breedte van het element.
height: dit is de hoogte van het element.

Eenvoudige geometrie tekenen

Het canvas gebruikt een cartesiaans coördinatensysteem om dingen te tekenen. Het gebruikt dus een x-as en y-as om uit te drukken waar iets zich bevindt. De locatie 0,0 is de positie linksboven en rechtsonder is wat je hebt ingesteld als de BREEDTE en HOOGTE van het canvas.

Afbeelding van MDN

Om op het canvas-element te tekenen, moet je de volgende stappen doorlopen:

Verkrijg een referentie naar het Canvas-element.
Verkrijg een referentie naar het Context-element dat op het canvas-element zit.
Voer een tekenoperatie uit met behulp van het context-element.

De code voor bovenstaande stappen ziet er meestal zo uit:

// 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

✅ De Canvas API richt zich voornamelijk op 2D-vormen, maar je kunt ook 3D-elementen tekenen op een website; hiervoor kun je de WebGL API gebruiken.

Je kunt allerlei dingen tekenen met de Canvas API, zoals:

Geometrische vormen, we hebben al laten zien hoe je een rechthoek tekent, maar er is nog veel meer dat je kunt tekenen.
Tekst, je kunt tekst tekenen met elk gewenst lettertype en kleur.
Afbeeldingen, je kunt een afbeelding tekenen op basis van een afbeeldingsbestand zoals een .jpg of .png.

✅ Probeer het! Je weet hoe je een rechthoek tekent, kun je een cirkel op een pagina tekenen? Bekijk enkele interessante Canvas-tekeningen op CodePen. Hier is een bijzonder indrukwekkend voorbeeld.

Een afbeeldingsbestand laden en tekenen

Je laadt een afbeeldingsbestand door een Image-object te maken en de src-eigenschap in te stellen. Vervolgens luister je naar het load-event om te weten wanneer het klaar is om te worden gebruikt. De code ziet er zo uit:

Bestand laden

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

Laadpatroon voor bestanden

Het wordt aanbevolen om het bovenstaande in een construct zoals deze te verpakken, zodat het gemakkelijker te gebruiken is en je alleen probeert het te manipuleren wanneer het volledig is geladen:

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

Om spelassets op een scherm te tekenen, zou je code er zo uitzien:

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 is het tijd om je spel te gaan bouwen

Wat te bouwen

Je gaat een webpagina bouwen met een Canvas-element. Het moet een zwart scherm van 1024*768 weergeven. We hebben je twee afbeeldingen gegeven:

Heldenschip
5*5 monster

Aanbevolen stappen om te beginnen met ontwikkelen

Vind de bestanden die voor je zijn aangemaakt in de submap your-work. Het zou het volgende moeten bevatten:

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

Open een kopie van deze map in Visual Studio Code. Je moet een lokale ontwikkelomgeving hebben ingesteld, bij voorkeur met Visual Studio Code met NPM en Node geïnstalleerd. Als je npm niet hebt ingesteld op je computer, hier is hoe je dat doet.

Start je project door naar de map your_work te navigeren:

cd your-work
npm start

Hiermee wordt een HTTP-server gestart op het adres http://localhost:5000. Open een browser en voer dat adres in. Het is nu een lege pagina, maar dat zal veranderen.

Opmerking: om wijzigingen op je scherm te zien, vernieuw je je browser.

Code toevoegen

Voeg de benodigde code toe aan your-work/app.js om het onderstaande op te lossen:

Teken een canvas met zwarte achtergrond

tip: voeg twee regels toe onder de juiste TODO in /app.js, waarbij je het ctx-element instelt op zwart en de boven/links-coördinaten op 0,0 en de hoogte en breedte gelijk aan die van het canvas.
Laad texturen

tip: voeg de speler- en vijandafbeeldingen toe met behulp van await loadTexture en geef het afbeeldingspad door. Je zult ze nog niet op het scherm zien!
Teken de held in het midden van het scherm in de onderste helft

tip: gebruik de drawImage API om heroImg op het scherm te tekenen, waarbij je canvas.width / 2 - 45 en canvas.height - canvas.height / 4) instelt.

Teken 5*5 monsters

tip: Nu kun je de code om vijanden op het scherm te tekenen deblokkeren. Ga vervolgens naar de functie createEnemies en bouw deze uit.

Stel eerst enkele constanten in:

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;

Maak vervolgens een lus om de array van monsters op het scherm te tekenen:

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

Resultaat

Het eindresultaat zou er zo uit moeten zien:

Oplossing

Probeer het eerst zelf op te lossen, maar als je vastloopt, bekijk dan een oplossing.

🚀 Uitdaging

Je hebt geleerd over tekenen met de 2D-gerichte Canvas API; bekijk de WebGL API en probeer een 3D-object te tekenen.

Post-Les Quiz

Post-les quiz

Review & Zelfstudie

Leer meer over de Canvas API door erover te lezen.

Opdracht

Speel met de Canvas API

Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, willen we u erop wijzen dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.

8.6 KiB Raw Permalink Blame History