8.8 KiB

Raw Permalink Blame History

Construiește un Joc Spațial Partea 2: Desenează Eroul și Monștrii pe Canvas

Chestionar Pre-Lecție

Canvas-ul

Canvas-ul este un element HTML care, în mod implicit, nu are conținut; este o pânză goală. Trebuie să adaugi conținut desenând pe ea.

✅ Citește mai multe despre API-ul Canvas pe MDN.

Iată cum este de obicei declarat, ca parte a corpului paginii:

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

Mai sus setăm id, width și height.

id: setează acest atribut pentru a putea obține o referință atunci când ai nevoie să interacționezi cu el.
width: aceasta este lățimea elementului.
height: aceasta este înălțimea elementului.

Desenarea geometriei simple

Canvas-ul folosește un sistem de coordonate cartezian pentru a desena lucruri. Astfel, utilizează o axă x și o axă y pentru a exprima unde se află ceva. Locația 0,0 este poziția din colțul stânga sus, iar colțul dreapta jos este ceea ce ai setat ca fiind LĂȚIMEA și ÎNĂLȚIMEA canvas-ului.

Imagine de pe MDN

Pentru a desena pe elementul canvas, trebuie să urmezi următorii pași:

Obține o referință la elementul Canvas.
Obține o referință la elementul Context care se află pe elementul Canvas.
Efectuează o operațiune de desenare folosind elementul Context.

Codul pentru pașii de mai sus arată de obicei astfel:

// 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-ul Canvas se concentrează în principal pe forme 2D, dar poți desena și elemente 3D pe un site web; pentru aceasta, ai putea folosi API-ul WebGL.

Poți desena tot felul de lucruri cu API-ul Canvas, cum ar fi:

Forme geometrice: am arătat deja cum să desenezi un dreptunghi, dar poți desena mult mai multe.
Text: poți desena text cu orice font și culoare dorești.
Imagini: poți desena o imagine bazată pe un fișier imagine, cum ar fi un .jpg sau .png.

✅ Încearcă! Știi cum să desenezi un dreptunghi, poți desena un cerc pe o pagină? Aruncă o privire la câteva desene interesante realizate cu Canvas pe CodePen. Iată un exemplu deosebit de impresionant.

Încarcă și desenează un asset de imagine

Poți încărca un asset de imagine creând un obiect Image și setând proprietatea sa src. Apoi, asculți evenimentul load pentru a ști când este gata de utilizare. Codul arată astfel:

Încarcă asset-ul

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

Model pentru încărcarea asset-ului

Se recomandă să înfășori codul de mai sus într-o construcție ca aceasta, astfel încât să fie mai ușor de utilizat și să încerci să îl manipulezi doar când este complet încărcat:

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

Pentru a desena asset-uri de joc pe ecran, codul tău ar arăta astfel:

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

Acum este timpul să începi să construiești jocul tău

Ce să construiești

Vei construi o pagină web cu un element Canvas. Aceasta ar trebui să afișeze un ecran negru 1024*768. Ți-am oferit două imagini:

Nava eroului
5*5 monștri

Pași recomandați pentru a începe dezvoltarea

Localizează fișierele care au fost create pentru tine în subfolderul your-work. Acesta ar trebui să conțină următoarele:

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

Deschide copia acestui folder în Visual Studio Code. Trebuie să ai un mediu de dezvoltare local configurat, de preferință cu Visual Studio Code, NPM și Node instalate. Dacă nu ai npm configurat pe computerul tău, iată cum să faci asta.

Începe proiectul navigând la folderul your_work:

cd your-work
npm start

Comanda de mai sus va porni un server HTTP la adresa http://localhost:5000. Deschide un browser și introdu această adresă. Este o pagină goală acum, dar asta se va schimba.

Notă: pentru a vedea modificările pe ecran, reîmprospătează browserul.

Adaugă cod

Adaugă codul necesar în your-work/app.js pentru a rezolva următoarele:

Desenează un canvas cu fundal negru

sfat: adaugă două linii sub TODO-ul corespunzător în /app.js, setând elementul ctx să fie negru, iar coordonatele de sus/stânga să fie 0,0, iar înălțimea și lățimea să fie egale cu cele ale canvas-ului.
Încarcă texturi

sfat: adaugă imaginile player și enemy folosind await loadTexture și trecând calea imaginii. Nu le vei vedea încă pe ecran!
Desenează eroul în centrul ecranului, în jumătatea de jos

sfat: folosește API-ul drawImage pentru a desena heroImg pe ecran, setând canvas.width / 2 - 45 și canvas.height - canvas.height / 4).

Desenează 5*5 monștri

sfat: Acum poți decomenta codul pentru a desena inamicii pe ecran. Apoi, mergi la funcția createEnemies și construiește-o.

Mai întâi, setează câteva constante:

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;

apoi, creează un loop pentru a desena matricea de monștri pe ecran:

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

Rezultatul final ar trebui să arate astfel:

Soluție

Te rugăm să încerci să rezolvi singur mai întâi, dar dacă te blochezi, aruncă o privire la o soluție.

🚀 Provocare

Ai învățat despre desenarea cu API-ul Canvas axat pe 2D; aruncă o privire la API-ul WebGL și încearcă să desenezi un obiect 3D.

Chestionar Post-Lecție

Chestionar post-lecție

Recapitulare și Studiu Individual

Află mai multe despre API-ul Canvas citind despre el.

Temă

Experimentează cu API-ul Canvas

Declinarea responsabilității:
Acest document a fost tradus folosind serviciul de traducere AI Co-op Translator. Deși depunem eforturi pentru a asigura acuratețea, vă rugăm să aveți în vedere că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa nativă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.

8.8 KiB Raw Permalink Blame History