8.2 KiB

Raw Permalink Blame History

Zgradite vesoljsko igro, 2. del: Narišite junaka in pošasti na platno

Predhodni kviz

Platno

Platno je HTML element, ki privzeto nima vsebine; je prazna površina. Na njem morate risati, da ga zapolnite.

✅ Preberite več o API-ju za platno na MDN.

Tukaj je primer, kako je običajno deklarirano kot del telesa strani:

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

Zgoraj nastavljamo id, width in height.

id: nastavite to, da lahko pridobite referenco, ko želite z njim interagirati.
width: to je širina elementa.
height: to je višina elementa.

Risanje preproste geometrije

Platno uporablja kartezični koordinatni sistem za risanje. Zato uporablja x-os in y-os za izražanje lokacije nečesa. Lokacija 0,0 je zgornji levi položaj, spodnji desni pa je tisto, kar ste nastavili kot ŠIRINO in VIŠINO platna.

Slika iz MDN

Za risanje na element platna morate slediti naslednjim korakom:

Pridobite referenco na element platna.
Pridobite referenco na element Context, ki se nahaja na elementu platna.
Izvedite operacijo risanja z uporabo elementa Context.

Koda za zgornje korake običajno izgleda takole:

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

✅ API za platno se večinoma osredotoča na 2D oblike, vendar lahko na spletno stran narišete tudi 3D elemente; za to lahko uporabite WebGL API.

S pomočjo API-ja za platno lahko narišete različne stvari, kot so:

Geometrijske oblike, že smo pokazali, kako narisati pravokotnik, vendar je še veliko več, kar lahko narišete.
Besedilo, lahko narišete besedilo s katero koli pisavo in barvo, ki jo želite.
Slike, lahko narišete sliko na podlagi slikovnega vira, kot je .jpg ali .png.

✅ Poskusite! Zdaj, ko veste, kako narisati pravokotnik, ali lahko narišete krog na stran? Oglejte si nekaj zanimivih risb na platnu na CodePen. Tukaj je posebej impresiven primer.

Naložite in narišite slikovni vir

Slikovni vir naložite tako, da ustvarite objekt Image in nastavite njegovo lastnost src. Nato poslušate dogodek load, da veste, kdaj je pripravljen za uporabo. Koda izgleda takole:

Nalaganje vira

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

Vzorec nalaganja vira

Priporočljivo je, da zgornje zavijete v konstrukcijo, kot je prikazano spodaj, da je lažje za uporabo in da poskušate z njim manipulirati šele, ko je popolnoma naložen:

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

Za risanje igralnih virov na zaslon bi vaša koda izgledala takole:

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

Zdaj je čas, da začnete graditi svojo igro

Kaj zgraditi

Zgradili boste spletno stran z elementom platna. Prikazati mora črn zaslon 1024*768. Na voljo imate dve sliki:

Junakov ladja
5*5 pošasti

Priporočeni koraki za začetek razvoja

Poiščite datoteke, ki so bile ustvarjene za vas v podmapi your-work. Vsebujejo naj naslednje:

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

Odprite kopijo te mape v Visual Studio Code. Potrebujete lokalno razvojno okolje, po možnosti z Visual Studio Code, NPM in Node nameščenimi. Če na vašem računalniku ni nastavljen npm, tukaj je, kako to storiti.

Začnite svoj projekt tako, da se premaknete v mapo your_work:

cd your-work
npm start

Zgornje bo zagnalo HTTP strežnik na naslovu http://localhost:5000. Odprite brskalnik in vnesite ta naslov. Trenutno je prazna stran, vendar se bo to spremenilo.

Opomba: za ogled sprememb na zaslonu osvežite brskalnik.

Dodajte kodo

Dodajte potrebno kodo v your-work/app.js, da rešite spodnje:

Narišite platno s črnim ozadjem

namig: dodajte dve vrstici pod ustrezen TODO v /app.js, nastavite element ctx, da bo črn, zgornje/leve koordinate na 0,0 ter višino in širino, da bosta enaki platnu.
Naložite teksture

namig: dodajte slike igralca in sovražnika z uporabo await loadTexture in podajte pot do slike. Na zaslonu jih še ne boste videli!
Narišite junaka na sredino zaslona v spodnji polovici

namig: uporabite API drawImage, da narišete heroImg na zaslon, nastavite canvas.width / 2 - 45 in canvas.height - canvas.height / 4);

Narišite 5*5 pošasti

namig: zdaj lahko odstranite komentarje iz kode za risanje sovražnikov na zaslon. Nato pojdite v funkcijo createEnemies in jo dokončajte.

Najprej nastavite nekaj konstant:

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;

nato ustvarite zanko za risanje matrike pošasti na zaslon:

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

Rezultat

Končni rezultat naj izgleda takole:

Rešitev

Najprej poskusite rešiti sami, vendar če se zataknete, si oglejte rešitev.

🚀 Izziv

Naučili ste se risanja z API-jem za platno, ki je osredotočen na 2D; poglejte si WebGL API in poskusite narisati 3D objekt.

Zaključni kviz

Pregled in samostojno učenje

Več o API-ju za platno se naučite z branjem o njem.

Naloga

Preizkusite API za platno

Omejitev odgovornosti:
Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem maternem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki bi nastale zaradi uporabe tega prevoda.

8.2 KiB Raw Permalink Blame History