Web-Dev-For-Beginners/translations/sk/6-space-game/2-drawing-to-canvas

Vytvorenie vesmírnej hry, časť 2: Kreslenie hrdinu a monštier na plátno

API pre <canvas> je jednou z najsilnejších funkcií webového vývoja na vytváranie dynamickej, interaktívnej grafiky priamo vo vašom prehliadači. V tejto lekcii premeníme prázdny HTML prvok <canvas> na herný svet plný hrdinov a monštier. Predstavte si plátno ako digitálnu umeleckú dosku, kde sa kód stáva vizuálnym.

Staviame na tom, čo ste sa naučili v predchádzajúcej lekcii, a teraz sa ponoríme do vizuálnych aspektov. Naučíte sa, ako načítať a zobrazovať herné sprite, presne umiestňovať prvky a vytvoriť vizuálny základ pre vašu vesmírnu hru. Týmto spôsobom premostíme statické webové stránky a dynamické, interaktívne zážitky.

Na konci tejto lekcie budete mať kompletnú hernú scénu s vašou hrdinskou loďou správne umiestnenou a formáciami nepriateľov pripravenými na boj. Pochopíte, ako moderné hry vykresľujú grafiku v prehliadačoch, a získate zručnosti na vytvorenie vlastných interaktívnych vizuálnych zážitkov. Poďme preskúmať grafiku na plátne a oživiť vašu vesmírnu hru!

Kvíz pred prednáškou

Prednáškový kvíz

Plátno

Čo presne je tento prvok <canvas>? Je to riešenie HTML5 na vytváranie dynamickej grafiky a animácií v webových prehliadačoch. Na rozdiel od bežných obrázkov alebo videí, ktoré sú statické, plátno vám poskytuje kontrolu na úrovni pixelov nad všetkým, čo sa na obrazovke objaví. To ho robí ideálnym pre hry, vizualizácie dát a interaktívne umenie. Predstavte si ho ako programovateľnú kresliacu plochu, kde sa JavaScript stáva vaším štetcom.

Predvolene vyzerá prvok plátna ako prázdny, priehľadný obdĺžnik na vašej stránke. Ale práve tu sa skrýva jeho potenciál! Jeho skutočná sila sa prejaví, keď použijete JavaScript na kreslenie tvarov, načítanie obrázkov, vytváranie animácií a reakcie na interakcie používateľa. Je to podobné ako pri prvých priekopníkoch počítačovej grafiky v Bell Labs v 60. rokoch, ktorí museli programovať každý pixel, aby vytvorili prvé digitálne animácie.

✅ Prečítajte si viac o API pre plátno na MDN.

Takto sa zvyčajne deklaruje ako súčasť tela stránky:

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

Čo tento kód robí:

• Nastavuje atribút id, aby ste mohli odkazovať na tento konkrétny prvok plátna v JavaScripte
• Definuje šírku v pixeloch na kontrolu horizontálnej veľkosti plátna
• Určuje výšku v pixeloch na stanovenie vertikálnych rozmerov plátna

Kreslenie jednoduchých geometrických tvarov

Teraz, keď viete, čo je prvok plátna, poďme preskúmať, ako na ňom skutočne kresliť! Plátno používa súradnicový systém, ktorý vám môže byť známy z hodín matematiky, ale existuje jeden dôležitý rozdiel špecifický pre počítačovú grafiku.

Plátno používa kartézske súradnice s osou x (horizontálnou) a osou y (vertikálnou) na umiestnenie všetkého, čo kreslíte. Ale tu je kľúčový rozdiel: na rozdiel od súradnicového systému z matematiky začína bod pôvodu (0,0) v ľavom hornom rohu, pričom hodnoty x sa zvyšujú, keď sa pohybujete doprava, a hodnoty y sa zvyšujú, keď sa pohybujete nadol. Tento prístup pochádza z raných počítačových displejov, kde elektrónové lúče skenovali zhora nadol, čo robilo ľavý horný roh prirodzeným východiskovým bodom.

Obrázok z MDN

Na kreslenie na prvok plátna budete postupovať podľa rovnakého trojstupňového procesu, ktorý tvorí základ všetkej grafiky na plátne. Keď to urobíte niekoľkokrát, stane sa to druhou prirodzenosťou:

1. Získajte referenciu na váš prvok plátna z DOM (rovnako ako na akýkoľvek iný HTML prvok)
2. Získajte 2D vykresľovací kontext – ten poskytuje všetky metódy kreslenia
3. Začnite kresliť! Použite vstavané metódy kontextu na vytvorenie vašej grafiky

Takto to vyzerá v kóde:

// Step 1: Get the canvas element
const canvas = document.getElementById("myCanvas");

// Step 2: Get the 2D rendering context
const ctx = canvas.getContext("2d");

// Step 3: Set fill color and draw a rectangle
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200); // x, y, width, height

Rozoberme to krok za krokom:

• Získame náš prvok plátna pomocou jeho ID a uložíme ho do premennej
• Získame 2D vykresľovací kontext – to je naša sada nástrojov plná metód kreslenia
• Povieme plátnu, že chceme veci vyplniť červenou farbou pomocou vlastnosti fillStyle
• Nakreslíme obdĺžnik začínajúci v ľavom hornom rohu (0,0), ktorý je široký a vysoký 200 pixelov

✅ API pre plátno sa väčšinou zameriava na 2D tvary, ale môžete tiež kresliť 3D prvky na webovú stránku; na to môžete použiť WebGL API.

Na plátne môžete kresliť rôzne veci, ako napríklad:

• Geometrické tvary, už sme ukázali, ako nakresliť obdĺžnik, ale je toho oveľa viac, čo môžete nakresliť.
• Text, môžete nakresliť text s akýmkoľvek fontom a farbou, akú si želáte.
• Obrázky, môžete nakresliť obrázok na základe obrazového súboru, ako je napríklad .jpg alebo .png.

✅ Skúste to! Viete, ako nakresliť obdĺžnik, dokážete nakresliť kruh na stránku? Pozrite sa na niektoré zaujímavé kresby na plátne na CodePen. Tu je obzvlášť pôsobivý príklad.

Načítanie a kreslenie obrazového súboru

Kreslenie základných tvarov je užitočné na začiatok, ale väčšina hier potrebuje skutočné obrázky! Sprite, pozadia a textúry sú to, čo dáva hrám ich vizuálnu príťažlivosť. Načítanie a zobrazovanie obrázkov na plátne funguje inak ako kreslenie geometrických tvarov, ale je to jednoduché, keď pochopíte proces.

Potrebujeme vytvoriť objekt Image, načítať náš obrazový súbor (to sa deje asynchrónne, čo znamená "na pozadí") a potom ho nakresliť na plátno, keď je pripravený. Tento prístup zaisťuje, že sa vaše obrázky zobrazia správne bez blokovania aplikácie počas ich načítania.

Základné načítanie obrázkov

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

Čo sa deje v tomto kóde:

• Vytvoríme úplne nový objekt Image na uloženie nášho sprite alebo textúry
• Povieme mu, ktorý obrazový súbor má načítať nastavením cesty k zdroju
• Počúvame udalosť načítania, aby sme presne vedeli, kedy je obrázok pripravený na použitie

Lepší spôsob načítania obrázkov

Tu je robustnejší spôsob, ako spracovať načítanie obrázkov, ktorý bežne používajú profesionálni vývojári. Zabalíme načítanie obrázkov do funkcie založenej na Promise – tento prístup, popularizovaný, keď sa JavaScriptové Promises stali štandardom v ES6, robí váš kód organizovanejším a elegantne rieši chyby:

function loadAsset(path) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(new Error(`Failed to load image: ${path}`));
    };
  });
}

// Modern usage with async/await
async function initializeGame() {
  try {
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');
    // Images are now ready to use
  } catch (error) {
    console.error('Failed to load game assets:', error);
  }
}

Čo sme tu urobili:

• Zabalili všetku logiku načítania obrázkov do Promise, aby sme ju mohli lepšie spracovať
• Pridali spracovanie chýb, ktoré nám skutočne povie, keď sa niečo pokazí
• Použili modernú syntax async/await, pretože je oveľa čitateľnejšia
• Zahrnuli bloky try/catch na elegantné spracovanie akýchkoľvek problémov pri načítaní

Keď sú vaše obrázky načítané, ich kreslenie na plátno je vlastne celkom jednoduché:

async function renderGameScreen() {
  try {
    // Load game assets
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');

    // Get canvas and context
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Draw images to specific positions
    ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
    ctx.drawImage(monsterImg, 0, 0);
  } catch (error) {
    console.error('Failed to render game screen:', error);
  }
}

Rozoberme to krok za krokom:

• Načítame obrázky hrdinu a monštra na pozadí pomocou await
• Získame náš prvok plátna a získame potrebný 2D vykresľovací kontext
• Umiestnime obrázok hrdinu priamo do stredu pomocou rýchlej matematickej operácie na súradnice
• Umiestnime obrázok monštra do ľavého horného rohu na začiatok formácie nepriateľov
• Zachytíme akékoľvek chyby, ktoré by mohli nastať počas načítania alebo vykresľovania

Teraz je čas začať budovať vašu hru

Teraz všetko spojíme, aby sme vytvorili vizuálny základ vašej vesmírnej hry. Máte pevné pochopenie základov plátna a techník načítania obrázkov, takže táto praktická sekcia vás prevedie vytvorením kompletnej hernej obrazovky so správne umiestnenými sprite.

Čo vytvoriť

Vytvoríte webovú stránku s prvkom plátna. Mala by zobrazovať čiernu obrazovku 1024*768. Poskytli sme vám dva obrázky:

• Hrdinská loď

  

• 5×5 monštrá

  

Odporúčané kroky na začiatok vývoja

Nájdite štartovacie súbory, ktoré sme pre vás vytvorili v podpriečinku your-work. Štruktúra vášho projektu by mala obsahovať:

your-work/
├── assets/
│   ├── enemyShip.png
│   └── player.png
├── index.html
├── app.js
└── package.json

Čo máte k dispozícii:

• Herné sprite sa nachádzajú v priečinku assets/, aby všetko zostalo organizované
• Váš hlavný HTML súbor nastavuje prvok plátna a všetko pripravuje
• JavaScriptový súbor, kde napíšete všetku svoju hernú magickú grafiku
• Súbor package.json, ktorý nastavuje vývojový server, aby ste mohli testovať lokálne

Otvorte tento priečinok vo Visual Studio Code, aby ste mohli začať s vývojom. Budete potrebovať lokálne vývojové prostredie s nainštalovaným Visual Studio Code, NPM a Node.js. Ak nemáte npm nastavený na vašom počítači, tu je návod, ako ho nainštalovať.

Spustite svoj vývojový server navigáciou do priečinka your-work:

cd your-work
npm start

Tento príkaz robí niekoľko skvelých vecí:

• Spustí lokálny server na http://localhost:5000, aby ste mohli testovať svoju hru
• Sprístupní všetky vaše súbory správne, aby ich váš prehliadač mohol načítať
• Sleduje vaše súbory pre zmeny, aby ste mohli plynule vyvíjať
• Poskytne vám profesionálne vývojové prostredie na testovanie všetkého

💡 Poznámka: Váš prehliadač bude spočiatku zobrazovať prázdnu stránku – to je očakávané! Ako pridávate kód, obnovte svoj prehliadač, aby ste videli svoje zmeny. Tento iteratívny prístup k vývoju je podobný tomu, ako NASA postavila počítač pre navigáciu Apollo – testovaním každej súčasti pred jej integráciou do väčšieho systému.

Pridajte kód

Pridajte požadovaný kód do your-work/app.js, aby ste dokončili nasledujúce úlohy:

1. Nakreslite plátno s čiernym pozadím

   💡 Ako na to: Nájdite TODO v /app.js a pridajte len dva riadky. Nastavte ctx.fillStyle na čiernu, potom použite ctx.fillRect() začínajúci na (0,0) s rozmermi vášho plátna. Jednoduché!

2. Načítajte herné textúry

   💡 Ako na to: Použite await loadAsset() na načítanie obrázkov hráča a nepriateľa. Uložte ich do premenných, aby ste ich mohli neskôr použiť. Pamätajte – neobjavia sa, kým ich skutočne nenakreslíte!

3. Nakreslite hrdinskú loď na stred-dolnú pozíciu

   💡 Ako na to: Použite ctx.drawImage() na umiestnenie vášho hrdinu. Pre x-súradnicu skúste canvas.width / 2 - 45, aby ste ho vycentrovali, a pre y-súradnicu použite canvas.height - canvas.height / 4, aby ste ho umiestnili do spodnej časti.

4. Nakreslite formáciu 5×5 nepriateľských lodí

   💡 Ako na to: Nájdite funkciu createEnemies a nastavte vnorenú slučku. Budete musieť urobiť nejaké výpočty pre rozmiestnenie a umiestnenie, ale nebojte sa – ukážem vám presne, ako na to!

Najprv nastavte konštanty pre správne rozloženie formácie nepriateľov:

const ENEMY_TOTAL = 5;
const ENEMY_SPACING = 98;
const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
const START_X = (canvas.width - FORMATION_WIDTH) / 2;
const STOP_X = START_X + FORMATION_WIDTH;

Rozoberme, čo tieto konštanty robia:

• Nastavíme 5 nepriateľov na riadok a stĺpec (pekná mriežka 5×5)
• Definujeme, koľko miesta dať medzi nepriateľov, aby nevyzerali stiesnene
• Vypočítame, aká široká bude celá formácia
• Určíme, kde začať a skončiť, aby formácia vyzerala vycentrovaná

Potom vytvorte vnorené slučky na nakreslenie formácie nepriateľov:

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

Čo táto vnorená slučka robí:

• Vonkajšia slučka posúva zľava doprava cez našu formáciu
• Vnútorná slučka prechádza zhora nadol, aby vytvorila upravené riadky
• Nakreslíme každý sprite nepriateľa na presné x,y súradnice, ktoré sme vypočítali
• Všetko zostáva rovnomerne rozmiestnené, aby to vyzeralo profesionálne a organizovane

Výsledok

Hotový výsledok by mal vyzerať takto:

Riešenie

Najskôr sa pokúste vyriešiť úlohu sami, ale ak sa zaseknete, pozrite si riešenie.

---

Výzva GitHub Copilot Agent 🚀

Použite režim Agent na splnenie nasledujúcej výzvy:

Popis: Vylepšite plátno vašej vesmírnej hry pridaním vizuálnych efektov a interaktívnych prvkov pomocou techník API pre plátno, ktoré ste sa naučili.

Úloha: Vytvorte nový súbor s názvom enhanced-canvas.html s plátnom, ktoré zobrazuje animované hv

---

Zrieknutie sa zodpovednosti:
Tento dokument bol preložený pomocou služby AI prekladu Co-op Translator. Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.