8.4 KiB

Raw Permalink Blame History

Rakenna avaruuspeli, osa 2: Piirrä sankari ja hirviöt kankaalle

Ennen luentoa -kysely

Canvas

Canvas on HTML-elementti, joka oletuksena ei sisällä mitään sisältöä; se on tyhjä pohja. Sinun täytyy lisätä siihen sisältöä piirtämällä.

✅ Lue lisää Canvas API:sta MDN:ssä.

Näin se yleensä määritellään osana sivun runkoa:

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

Yllä asetamme id, width ja height.

id: aseta tämä, jotta voit viitata siihen, kun tarvitset vuorovaikutusta sen kanssa.
width: tämä on elementin leveys.
height: tämä on elementin korkeus.

Yksinkertaisen geometrian piirtäminen

Canvas käyttää kartesiolaista koordinaatistojärjestelmää asioiden piirtämiseen. Se käyttää x- ja y-akselia ilmaisemaan, missä jokin sijaitsee. Sijainti 0,0 on vasen yläkulma, ja oikea alakulma on se, mitä määritit CANVASIN leveys- ja korkeusasetuksiksi.

Kuva MDN:stä

Piirtääksesi canvas-elementtiin sinun täytyy käydä läpi seuraavat vaiheet:

Hanki viittaus Canvas-elementtiin.
Hanki viittaus Context-elementtiin, joka sijaitsee Canvas-elementissä.
Suorita piirtotoiminto käyttämällä Context-elementtiä.

Yllä olevien vaiheiden koodi näyttää yleensä tältä:

// 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 keskittyy pääasiassa 2D-muotoihin, mutta voit myös piirtää 3D-elementtejä verkkosivulle; tähän voit käyttää WebGL API:ta.

Canvas API:lla voit piirtää kaikenlaisia asioita, kuten:

Geometrisia muotoja, olemme jo näyttäneet, kuinka piirtää suorakulmio, mutta voit piirtää paljon muutakin.
Tekstiä, voit piirtää tekstiä millä tahansa fontilla ja värillä.
Kuvia, voit piirtää kuvan esimerkiksi .jpg- tai .png-tiedostosta.

✅ Kokeile! Tiedät, kuinka piirtää suorakulmio, mutta osaatko piirtää ympyrän sivulle? Katso joitakin mielenkiintoisia Canvas-piirroksia CodePenissä. Tässä on erityisen vaikuttava esimerkki.

Lataa ja piirrä kuvatiedosto

Voit ladata kuvatiedoston luomalla Image-objektin ja asettamalla sen src-ominaisuuden. Sitten kuuntelet load-tapahtumaa tietääksesi, milloin se on valmis käytettäväksi. Koodi näyttää tältä:

Lataa tiedosto

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

Latausmalli

On suositeltavaa kääriä yllä oleva rakenne seuraavanlaiseen muotoon, jotta sitä on helpompi käyttää ja yrität manipuloida sitä vain, kun se on täysin ladattu:

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

Piirtääksesi pelin elementtejä näytölle, koodisi näyttäisi tältä:

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

Nyt on aika aloittaa pelin rakentaminen

Mitä rakentaa

Rakennat verkkosivun, jossa on Canvas-elementti. Sen tulisi näyttää musta ruutu 1024*768. Olemme toimittaneet sinulle kaksi kuvaa:

Sankarialus
5*5 hirviö

Suositellut kehitysvaiheet

Etsi tiedostot, jotka on luotu sinulle your-work-alikansiossa. Sen pitäisi sisältää seuraavat:

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

Avaa tämän kansion kopio Visual Studio Codessa. Sinulla tulisi olla paikallinen kehitysympäristö asennettuna, mieluiten Visual Studio Code, jossa on NPM ja Node asennettuna. Jos sinulla ei ole npm-asetuksia tietokoneellasi, tässä ohjeet sen asentamiseen.

Aloita projektisi siirtymällä your_work-kansioon:

cd your-work
npm start

Yllä oleva käynnistää HTTP-palvelimen osoitteessa http://localhost:5000. Avaa selain ja syötä tämä osoite. Tällä hetkellä sivu on tyhjä, mutta se muuttuu.

Huom: nähdäksesi muutokset näytöllä, päivitä selaimesi.

Lisää koodi

Lisää tarvittava koodi your-work/app.js-tiedostoon ratkaistaksesi alla olevat tehtävät.

Piirrä canvas mustalla taustalla

vinkki: lisää kaksi riviä sopivan TODO-kohdan alle /app.js-tiedostossa, asettaen ctx-elementin mustaksi ja ylä-/vasen koordinaatit 0,0 sekä korkeus ja leveys vastaamaan canvasin kokoa.
Lataa tekstuurit

vinkki: lisää pelaajan ja vihollisen kuvat käyttämällä await loadTexture ja välittämällä kuvan polku. Et näe niitä vielä näytöllä!
Piirrä sankari näytön keskelle alaosaan

vinkki: käytä drawImage-API:a piirtääksesi heroImg näytölle, asettaen canvas.width / 2 - 45 ja canvas.height - canvas.height / 4).

Piirrä 5*5 hirviöt

vinkki: Nyt voit poistaa kommentit koodista, joka piirtää viholliset näytölle. Seuraavaksi siirry createEnemies-funktioon ja rakenna se.

Ensin, määritä joitakin vakioita:

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;

sitten, luo silmukka, joka piirtää hirviöiden taulukon näytölle:

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

Lopputulos

Valmis tulos näyttää tältä:

Ratkaisu

Yritä ratkaista itse ensin, mutta jos jäät jumiin, katso ratkaisu

🚀 Haaste

Olet oppinut piirtämään 2D-keskeisellä Canvas API:lla; tutustu WebGL API:iin ja yritä piirtää 3D-objekti.

Luentojälkeinen kysely

Kertaus ja itseopiskelu

Opi lisää Canvas API:sta lukemalla siitä.

Tehtävä

Leiki Canvas API:n kanssa

Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulee pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmisen tekemää käännöstä. Emme ole vastuussa tämän käännöksen käytöstä johtuvista väärinkäsityksistä tai virhetulkinnoista.

8.4 KiB Raw Permalink Blame History