Skip to content

README.md

Latest commit

 

History

History
653 lines (526 loc) · 28.5 KB

README.md

File metadata and controls

653 lines (526 loc) · 28.5 KB

Vytvorenie vesmírnej hry Časť 1: Úvod

journey
    title Vaša cesta vývoja hier
    section Základy
      Naučiť sa architektúru hier: 3: Student
      Pochopiť dedičnosť: 4: Student
      Preskúmať kompozíciu: 4: Student
    section Komunikácia
      Vybudovať pub/sub systém: 4: Student
      Navrhnúť tok udalostí: 5: Student
      Spojiť komponenty: 5: Student
    section Aplikácia
      Vytvoriť herné objekty: 5: Student
      Implementovať vzory: 5: Student
      Naplánovať štruktúru hry: 5: Student
Loading

Animácia vesmírnej hry zobrazujúca hru

Rovnako ako riadiace stredisko NASA koordinuje počas štartu vesmírnej rakety viaceré systémy, aj my vytvoríme vesmírnu hru, ktorá demonštruje, ako môžu rôzne časti programu spolu plynulo spolupracovať. Pri tvorbe niečoho, čo si môžete naozaj zahrať, sa naučíte základné programovacie koncepty, ktoré sa uplatnia v každom softvérovom projekte.

Preskúmame dva základné prístupy k organizácii kódu: dedičnosť a kompozíciu. Nejde len o akademické pojmy – sú to tie isté vzory, ktoré poháňajú všetko od videohier po bankové systémy. Zrealizujeme aj komunikačný systém nazývaný pub/sub, ktorý funguje ako komunikačné siete používané vo vesmírnych lodiach a umožňuje rôznym komponentom zdieľať informácie bez vytvárania závislostí.

Na konci tejto série budete rozumieť, ako vytvárať aplikácie, ktoré môžu škálovať a vyvíjať sa – či už vyvíjate hry, webové aplikácie alebo akýkoľvek iný softvérový systém.

mindmap
  root((Architektúra hry))
    Object Organization
      Dedičnosť
      Kompozícia
      Hierarchie tried
      Miešanie správania
    Communication Patterns
      Pub/Sub systém
      Emitory udalostí
      Prenos správ
      Voľné väzby
    Game Objects
      Vlastnosti (x, y)
      Správanie (pohyb, kolízia)
      Správa životného cyklu
      Správa stavu
    Design Patterns
      Továrenské funkcie
      Vzor pozorovateľa
      Komponentový systém
      Architektúra riadená udalosťami
    Scalability
      Modulárny dizajn
      Udržiavateľný kód
      Testovacie stratégie
      Optimalizácia výkonu
Loading

Prednáškový kvíz

Prednáškový kvíz

Dedičnosť a kompozícia vo vývoji hier

Ako sa projekty zložitosťou rozrastajú, organizácia kódu sa stáva kľúčovou. To, čo začína ako jednoduchý skript, môže byť bez správnej štruktúry ťažko udržiavateľné – podobne ako misie Apollo vyžadovali starostlivú koordináciu tisícok komponentov.

Preskúmame dva základné prístupy k organizácii kódu: dedičnosť a kompozíciu. Každý má svoje výhody a pochopenie oboch vám pomôže vybrať správny prístup pre rôzne situácie. Tieto koncepty ukážeme na našej vesmírnej hre, kde hrdinovia, nepriatelia, power-upy a ďalšie objekty musia efektívne spolupracovať.

✅ Jedna z najslávnejších kníh o programovaní sa týka návrhových vzorov.

V každej hre máte herných objektov – interaktívne prvky, ktoré plnia váš herný svet. Hrdinovia, nepriatelia, power-upy a vizuálne efekty sú všetky herné objekty. Každý existuje na konkrétnych súradniciach obrazovky pomocou hodnôt x a y, podobne ako pri zakresľovaní bodov v súradnicovej sústave.

Napriek svojim vizuálnym rozdielom zdieľajú tieto objekty často základné správanie:

  • Existujú niekde – Každý objekt má súradnice x a y, aby hra vedela, kde ho vykresliť
  • Mnohé sa môžu pohybovať – Hrdinovia bežia, nepriatelia naháňajú, guľky lietajú cez obrazovku
  • Majú životnosť – Niektoré zostávajú navždy, iné (napr. explózie) sa ukážu krátko a zmiznú
  • Reagujú na udalosti – Keď sa veci zrazia, power-upy sa zbierajú, aktualizujú sa ukazovatele zdravia

✅ Premýšľajte o hre ako Pac-Man. Dokážete identifikovať štyri vyššie uvedené typy objektov v tejto hre?

classDiagram
    class GameObject {
        +x: number
        +y: number
        +type: string
        +exists_somewhere()
    }
    
    class MovableObject {
        +moveTo(x, y)
        +can_move_around()
    }
    
    class TemporaryObject {
        +lifespan: number
        +has_lifespan()
    }
    
    class InteractiveObject {
        +onCollision()
        +reacts_to_stuff()
    }
    
    GameObject <|-- MovableObject
    GameObject <|-- TemporaryObject
    GameObject <|-- InteractiveObject
    
    MovableObject <|-- Hero
    MovableObject <|-- Enemy
    MovableObject <|-- Bullet
    
    TemporaryObject <|-- PowerUp
    TemporaryObject <|-- Explosion
    
    InteractiveObject <|-- Collectible
    InteractiveObject <|-- Obstacle
Loading

Vyjadrenie správania cez kód

Teraz keď rozumiete spoločným správaním, ktoré herné objekty zdieľajú, preskúmajme, ako tieto správania implementovať v JavaScripte. Správanie objektu môžete vyjadriť pomocou metód pripojených buď ku triedam alebo k jednotlivým objektom, a existuje niekoľko prístupov, z ktorých si môžete vybrať.

Prístup založený na triedach

Triedy a dedičnosť poskytujú štruktúrovaný prístup k organizácii herných objektov. Podobne ako taxonomický klasifikačný systém vyvinutý Carlom Linnéom, začínate s základnou triedou obsahujúcou spoločné vlastnosti, potom vytvoríte špecializované triedy, ktoré tieto základy dedi a pridávajú špecifické schopnosti.

✅ Dedičnosť je dôležitý koncept, ktorý treba pochopiť. Viac sa dozviete v článku MDN o dedičnosti.

Tu je, ako môžete implementovať herné objekty pomocou tried a dedičnosti:

// Krok 1: Vytvorte základnú triedu GameObject
class GameObject {
  constructor(x, y, type) {
    this.x = x;
    this.y = y;
    this.type = type;
  }
}

Rozoberme si to krok za krokom:

  • Vytvárame základnú šablónu, ktorú môže každý herný objekt používať
  • Konstruktor ukladá, kde sa objekt nachádza (x, y) a aký typ má
  • Toto sa stáva základom, na ktorom budú vaše herné objekty stavať
// Krok 2: Pridajte schopnosť pohybu cez dedenie
class Movable extends GameObject {
  constructor(x, y, type) {
    super(x, y, type); // Zavolajte konštruktor rodiča
  }

  // Pridajte schopnosť presunúť sa na novú pozíciu
  moveTo(x, y) {
    this.x = x;
    this.y = y;
  }
}

V predchádzajúcom kóde sme:

  • Rozšírili triedu GameObject, aby sme pridali funkcionalitu pohybu
  • Zavolali konštruktor rodiča pomocou super(), aby sme inicializovali zdedené vlastnosti
  • Pridali metódu moveTo(), ktorá aktualizuje polohu objektu
// Krok 3: Vytvorte konkrétne typy herných objektov
class Hero extends Movable {
  constructor(x, y) {
    super(x, y, 'Hero'); // Typ nastavte automaticky
  }
}

class Tree extends GameObject {
  constructor(x, y) {
    super(x, y, 'Tree'); // Stromy nepotrebujú pohyb
  }
}

// Krok 4: Použite svoje herné objekty
const hero = new Hero(0, 0);
hero.moveTo(5, 5); // Hrdina sa môže pohybovať!

const tree = new Tree(10, 15);
// tree.moveTo() by spôsobilo chybu - stromy sa nemôžu pohybovať

Pochopenie týchto konceptov:

  • Vytvára špecializované typy objektov, ktoré zdedia vhodné správanie
  • Ukazuje, ako dedičnosť umožňuje selektívne zahrnutie vlastností
  • Demonštruje, že hrdinovia sa môžu pohybovať, zatiaľ čo stromy zostávajú státím
  • Ilustruje, ako hierarchia tried zabraňuje nevhodným akciám

✅ Strávte pár minút tým, že si predstavíte Pac-Man hrdinu (napríklad Inky, Pinky alebo Blinky) a ako by bol zapísaný v JavaScripte.

Prístup založený na kompozícii

Kompozícia nasleduje filozofiu modulárneho dizajnu, podobne ako inžinieri navrhujú vesmírne lode s vymeniteľnými komponentmi. Namiesto dedenia z rodičovskej triedy kombinujete konkrétne správanie, aby ste vytvorili objekty s presne takou funkcionalitou, akú potrebujú. Tento prístup ponúka flexibilitu bez prísnych hierarchických obmedzení.

// Krok 1: Vytvorte základné objekty správania
const gameObject = {
  x: 0,
  y: 0,
  type: ''
};

const movable = {
  moveTo(x, y) {
    this.x = x;
    this.y = y;
  }
};

Čo tento kód robí:

  • Definuje základný gameObject s polohou a typovými vlastnosťami
  • Vytvára samostatný objekt správania movable s funkciou pohybu
  • Oddeluje obavy tým, že drží dáta o polohe a logiku pohybu nezávisle
// Krok 2: Zloženie objektov kombinovaním správania
const movableObject = { ...gameObject, ...movable };

// Krok 3: Vytvorte továrenské funkcie pre rôzne typy objektov
function createHero(x, y) {
  return {
    ...movableObject,
    x,
    y,
    type: 'Hero'
  };
}

function createStatic(x, y, type) {
  return {
    ...gameObject,
    x,
    y,
    type
  };
}

V predchádzajúcom kóde sme:

  • Skombinovali základné vlastnosti objektu so správaním pohybu pomocou syntaxe spread
  • Vytvorili továrenské funkcie, ktoré vracajú prispôsobené objekty
  • Umožnili flexibilnú tvorbu objektov bez prísnych triednych hierarchií
  • Povolili objektom mať presne tie správania, ktoré potrebujú
// Krok 4: Vytvorte a použite svoje zložené objekty
const hero = createHero(10, 10);
hero.moveTo(5, 5); // Funguje perfektne!

const tree = createStatic(0, 0, 'Tree');
// tree.moveTo() nie je definované - žiadne pohybové správanie nebolo zložené

Dôležité body na zapamätanie:

  • Kombinuje objekty miešaním správaní namiesto ich dedenia
  • Poskytuje viac flexibility než prísne dedičné hierarchie
  • Umožňuje objektom mať presne tie funkcie, ktoré potrebujú
  • Používa modernú JavaScript spread syntax pre čisté kombinovanie objektov

**Which Pattern Should You Choose?**

**Which Pattern Should You Choose?**

```mermaid
quadrantChart
    title Code Organization Patterns
    x-axis Simple --> Complex
    y-axis Rigid --> Flexible
    quadrant-1 Advanced Composition
    quadrant-2 Hybrid Approaches
    quadrant-3 Basic Inheritance
    quadrant-4 Modern Composition
    
    Class Inheritance: [0.3, 0.2]
    Interface Implementation: [0.6, 0.4]
    Mixin Patterns: [0.7, 0.7]
    Pure Composition: [0.8, 0.9]
    Factory Functions: [0.5, 0.8]
    Prototype Chain: [0.4, 0.3]

💡 Tip na záver: Oba vzory majú miesto v modernom vývoji v JavaScripte. Triedy dobre fungujú pre jasne definované hierarchie, zatiaľ čo kompozícia je výhodná, keď potrebujete maximálnu flexibilitu.

Kedy použiť ktorý prístup:

  • Vyberte dedičnosť, keď máte jasné vzťahy "je to" (napr. Hrdina je pohyblivý objekt)
  • Volte kompozíciu, keď máte vzťahy "má to" (napr. Hrdina má pohybové schopnosti)
  • Zvážte preferencie tímu a požiadavky projektu
  • Pamätajte, že môžete miešať oba prístupy v jednej aplikácii

🔄 Pedagogická kontrola

Porozumenie organizácie objektov: Pred prechodom k komunikačným vzorom si overte, či dokážete:

  • ✅ Vysvetliť rozdiel medzi dedičnosťou a kompozíciou
  • ✅ Identifikovať, kedy použiť triedy vs továrenské funkcie
  • ✅ Rozumieť, ako funguje kľúčové slovo super() v dedičnosti
  • ✅ Poznať výhody každého prístupu pre vývoj hier

Rýchly sebakvíz: Ako by ste vytvorili Lietajúceho nepriateľa, ktorý sa dokáže aj pohybovať aj lietať?

  • Prístup dedičnosti: class FlyingEnemy extends Movable
  • Prístup kompozície: { ...movable, ...flyable, ...gameObject }

Spojenie s realitou: Tieto vzory sa objavujú všade:

  • React komponenty: Props (kompozícia) vs dedičnosť tried
  • Herne enginy: Entity-component systémy používajú kompozíciu
  • Mobilné aplikácie: UI frameworky často používajú hierarchie dedičnosti

Komunikačné vzory: Systém Pub/Sub

Ako aplikácie rastú na zložitosť, riadenie komunikácie medzi komponentami je výzvou. Vzor publish-subscribe (pub/sub) rieši tento problém pomocou princípov podobných rozhlasovému vysielaniu – jeden vysielač môže osloviť viacerých príjemcov bez toho, aby vedel, kto všetko počúva.

Predstavte si, čo sa stane, keď hrdina utrpí poškodenie: aktualizuje sa ukazovateľ zdravia, prehrá sa zvukový efekt, zobrazí sa vizuálna odozva. Namiesto priameho prepojenia objektu hrdinu s týmito systémami umožňuje pub/sub hrdinovi vyslať správu "utrpené poškodenie". Každý systém, ktorý na to musí reagovať, sa môže na tento typ správy prihlásiť a reagovať podľa toho.

✅ Pub/Sub znamená „publish-subscribe“ (vydávanie–odber)

flowchart TD
    A[Hrdina utrpí poškodenie] --> B[Publikovať: HERO_DAMAGED]
    B --> C[Systém udalostí]
    
    C --> D[Odberateľ Ukazovateľa zdravia]
    C --> E[Odberateľ zvukového systému]
    C --> F[Odberateľ vizuálnych efektov]
    C --> G[Odberateľ systému úspechov]
    
    D --> H[Aktualizovať zobrazenie zdravia]
    E --> I[Prehrať zvuk poškodenia]
    F --> J[Ukázať červený záblesk]
    G --> K[Skontrolovať úspechy prežitia]
    
    style A fill:#ffebee
    style B fill:#e1f5fe
    style C fill:#e8f5e8
    style H fill:#fff3e0
    style I fill:#fff3e0
    style J fill:#fff3e0
    style K fill:#fff3e0
Loading

Porozumenie architektúre Pub/Sub

Vzor pub/sub udržuje rôzne časti vašej aplikácie voľne spojené, čo znamená, že môžu spolupracovať bez priamej závislosti. Toto oddelenie robí váš kód udržiavateľnejším, testovateľnejším a flexibilnejším voči zmenám.

Kľúčové prvky v pub/sub:

  • Správy – Jednoduché textové štítky ako 'PLAYER_SCORED', ktoré popisujú, čo sa stalo (plus prípadné ďalšie informácie)
  • Vydávatelia – Objekty, ktoré hlásia „Niečo sa stalo!“ všetkým, ktorí počúvajú
  • Odborníci – Objekty, ktoré hovoria „Zaujíma ma táto udalosť“ a reagujú, keď k nej dôjde
  • Systém udalostí – Prostredník, ktorý zabezpečuje, že správy dorazia k správnym poslucháčom

Vytvorenie systému udalostí

Vytvorme jednoduchý, ale výkonný systém udalostí, ktorý tieto koncepty demonštruje:

// Krok 1: Vytvorte triedu EventEmitter
class EventEmitter {
  constructor() {
    this.listeners = {}; // Uložte všetkých poslucháčov udalostí
  }
  
  // Zaregistrujte poslucháča pre konkrétny typ správy
  on(message, listener) {
    if (!this.listeners[message]) {
      this.listeners[message] = [];
    }
    this.listeners[message].push(listener);
  }
  
  // Odoslať správu všetkým zaregistrovaným poslucháčom
  emit(message, payload = null) {
    if (this.listeners[message]) {
      this.listeners[message].forEach(listener => {
        listener(message, payload);
      });
    }
  }
}

Analyzujeme, čo sa tu deje:

  • Vytvára centrálny systém správy udalostí pomocou jednoduchej triedy
  • Ukladá poslucháčov v objekte organizovanom podľa typu správy
  • Registruje nových poslucháčov pomocou metódy on()
  • Vysiela správy všetkým záujemcom pomocou emit()
  • Podporuje voliteľné dátové náklady na odovzdanie relevantných informácií

Spojenie do jedného celku: Praktický príklad

Poďme si to ukázať v praxi! Vytvoríme jednoduchý systém pohybu, ktorý ukáže, ako čistý a flexibilný môže byť pub/sub:

// Krok 1: Definujte svoje typy správ
const Messages = {
  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT',
  HERO_MOVE_RIGHT: 'HERO_MOVE_RIGHT',
  ENEMY_SPOTTED: 'ENEMY_SPOTTED'
};

// Krok 2: Vytvorte svoj systém udalostí a herné objekty
const eventEmitter = new EventEmitter();
const hero = createHero(0, 0);

Tento kód robí:

  • Definuje objekt konštánt, aby sa zabránilo preklepom v názvoch správ
  • Vytvára inštanciu event emitera na spracovanie komunikácie
  • Inicializuje objekt hrdinu na počiatočnej pozícii
// Krok 3: Nastavte poslucháčov udalostí (odberateľov)
eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
  hero.moveTo(hero.x - 5, hero.y);
  console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
});

eventEmitter.on(Messages.HERO_MOVE_RIGHT, () => {
  hero.moveTo(hero.x + 5, hero.y);
  console.log(`Hero moved to position: ${hero.x}, ${hero.y}`);
});

V predchádzajúcom kóde sme:

  • Registrovali poslucháčov udalostí, ktorí reagujú na správy o pohybe
  • Aktualizovali polohu hrdinu podľa smeru pohybu
  • Pridali logovanie do konzoly pre sledovanie zmien pozície hrdinu
  • Oddelili logiku pohybu od spracovania vstupu
// Krok 4: Prepojte vstup z klávesnice s udalosťami (vydavateľmi)
window.addEventListener('keydown', (event) => {
  switch(event.key) {
    case 'ArrowLeft':
      eventEmitter.emit(Messages.HERO_MOVE_LEFT);
      break;
    case 'ArrowRight':
      eventEmitter.emit(Messages.HERO_MOVE_RIGHT);
      break;
  }
});

Pochopenie týchto konceptov:

  • Spája vstup z klávesnice s hernými udalosťami bez pevnej väzby
  • Umožňuje systému vstupu komunikovať nepriamo s hernými objektmi
  • Povoľuje viacerým systémom reagovať na tie isté klávesové vstupy
  • Uľahčuje zmenu klávesových väzieb alebo pridanie nových metód vstupu
sequenceDiagram
    participant User
    participant Keyboard
    participant EventEmitter
    participant Hero
    participant SoundSystem
    participant Camera
    
    User->>Keyboard: Stlačí ŠípkaĽavo
    Keyboard->>EventEmitter: emit('HERO_MOVE_LEFT')
    EventEmitter->>Hero: Posuň doľava o 5 pixelov
    EventEmitter->>SoundSystem: Prehrať zvuk krokov
    EventEmitter->>Camera: Sledovať hrdinu
    
    Hero->>Hero: Aktualizovať pozíciu
    SoundSystem->>SoundSystem: Prehrať zvuk
    Camera->>Camera: Upraviť zobrazenie
Loading

💡 Tip na záver: Krása tohto vzoru je jeho flexibilita! Jednoducho môžete pridať zvukové efekty, otrasy obrazovky alebo časticové efekty pridaním ďalších poslucháčov udalostí – nie je potrebné meniť existujúci kód klávesnice alebo pohybu.

Dôvody, prečo si tento prístup obľúbite:

  • Pridávanie nových funkcií je veľmi jednoduché – stačí počúvať udalosti, ktoré vás zaujímajú
  • Viaceré časti môžu reagovať na tú istú udalosť bez konfliktov
  • Testovanie je oveľa jednoduchšie, pretože každá časť funguje samostatne
  • Keď niečo prestane fungovať, presne viete, kde hľadať problém

Prečo Pub/Sub efektívne škáluje

Vzor pub/sub si udržiava jednoduchosť aj pri rastúcej zložitosti aplikácií. Či už spravujete desiatky nepriateľov, dynamické aktualizácie používateľského rozhrania alebo zvukové systémy, vzor zvláda zvýšenie rozsahu bez architektonických zmien. Nové funkcie sa integrujú do existujúceho systému udalostí bez narušenia zavedených funkcií.

⚠️ Bežná chyba: Nevytvárajte príliš veľa špecifických typov správ príliš skoro. Začnite so širokými kategóriami a spresňujte ich podľa potreby vašej hry.

Odporúčané postupy:

  • Zoskupujte súvisiace správy do logických kategórií
  • Používajte popisné názvy, ktoré jasne indikujú, čo sa stalo
  • Udržujte správy jednoduché a zamerané
  • Dokumentujte svoje typy správ pre tímovú spoluprácu

🔄 Pedagogická kontrola

Porozumenie architektúre riadenej udalosťami: Overte si, či rozumiete celému systému:

  • ✅ Ako vzor pub/sub zabraňuje pevnej väzbe medzi komponentmi?
  • ✅ Prečo je jednoduchšie pridávať nové funkcie s architektúrou riadenou udalosťami?
  • ✅ Akú úlohu hrá EventEmitter v toku komunikácie?
  • ✅ Ako konštanty správ zabraňujú chybám a zlepšujú údržbu?

Dizajnérska výzva: Ako by ste riešili tieto herné scenáre pomocou pub/sub?

  1. Nepriateľ zomrie: Aktualizácia skóre, prehranie zvuku, objavenie power-upu, odstránenie z obrazovky
  2. Úroveň dokončená: Zastavenie hudby, zobrazenie UI, uloženie postupu, načítanie ďalšej úrovne
  3. Power-up získaný: Vylepšenie schopností, aktualizácia UI, prehranie efektu, spustenie časovača

Profesijné spojenie: Tento vzor sa používa v:

  • Frontend frameworkoch: event systémy React/Vue
  • Backend službách: komunikácia mikroslužieb
  • Herne enginy: event systém Unity
  • Mobilnom vývoji: notifikačné systémy iOS/Android

Výzva GitHub Copilot Agenta 🚀

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

Popis: Vytvorte jednoduchý systém herných objektov využívajúci dedičnosť a vzor pub/sub. Implementujete základnú hru, kde sa rôzne objekty môžu navzájom komunikovať prostredníctvom udalostí bez priameho poznania jeden druhého.

Zadanie: Vytvorte herný systém v JavaScripte s týmito požiadavkami: 1) Vytvorte základnú triedu GameObject s koordinátmi x, y a vlastnosťou typu. 2) Vytvorte triedu Hero, ktorá rozširuje GameObject a dokáže sa pohybovať. 3) Vytvorte triedu Enemy, ktorá rozširuje GameObject a dokáže naháňať hrdinu. 4) Implementujte triedu EventEmitter pre vzor pub/sub. 5) Nastavte poslucháčov udalostí tak, aby, keď sa hrdina pohne, nepriatelia v blízkosti dostávali udalosť 'HERO_MOVED' a aktualizovali svoju pozíciu tak, že sa pohybovali smerom k hrdinovi. Pridajte na konzolu logy, ktoré ukážu komunikáciu medzi objektmi.

Viac o režime agenta sa dozviete tu.

🚀 Výzva

Zvážte, ako môže vzor pub-sub zlepšiť architektúru hry. Určite, ktoré komponenty by mali vysielať udalosti a ako by mal systém reagovať. Navrhnite herný koncept a zmapujte komunikačné vzory medzi jeho komponentmi.

Kvíz po prednáške

Kvíz po prednáške

Revízia a samoštúdium

Naučte sa viac o Pub/Sub čítaním o tom.

⚡ Čo môžete urobiť v nasledujúcich 5 minútach

  • Otvorte akúkoľvek HTML5 hru online a skontrolujte jej kód pomocou DevTools
  • Vytvorte jednoduchý element HTML5 Canvas a nakreslite základný tvar
  • Vyskúšajte použiť setInterval na vytvorenie jednoduchého animačného cyklu
  • Preskúmajte dokumentáciu Canvas API a vyskúšajte metódu kreslenia

🎯 Čo môžete dosiahnuť počas tejto hodiny

  • Dokončite kvíz po lekcii a pochopte koncepty vývoja hier
  • Nastavte štruktúru svojho herného projektu s HTML, CSS a JavaScript súbormi
  • Vytvorte základnú hernú slučku, ktorá neustále aktualizuje a vykresľuje
  • Nakreslite svoje prvé herné sprity na plátno
  • Implementujte základné načítanie aktív pre obrázky a zvuky

📅 Váš týždenný vývoj hry

  • Dokončite celú vesmírnu hru so všetkými plánovanými funkciami
  • Pridajte vyleštenú grafiku, zvukové efekty a plynulé animácie
  • Implementujte herné stavy (úvodná obrazovka, hranie, koniec hry)
  • Vytvorte systém skórovania a sledovanie pokroku hráča
  • Zabezpečte, aby bola hra responzívna a prístupná na rôznych zariadeniach
  • Zdieľajte svoju hru online a zbierajte odozvu od hráčov

🌟 Váš mesačný vývoj hry

  • Vytvorte viacero hier skúmajúcich rôzne žánre a mechaniky
  • Naučte sa herný vývojový framework, napríklad Phaser alebo Three.js
  • Prispievajte do open source projektov na vývoj hier
  • Ovládnite pokročilé vzory programovania hier a optimalizáciu
  • Vytvorte portfólio prezentujúce vaše schopnosti vo vývoji hier
  • Mentorujte iných zaujímajúcich sa o vývoj hier a interaktívne médiá

🎯 Váš časový plán majstrovstva vo vývoji hier

timeline
    title Progres učenia hernej architektúry
    
    section Vzory objektov (20 minút)
        Organizácia kódu: Dedičnosť tried
                         : Vzory kompozície
                         : Továrenské funkcie
                         : Miešanie správania
        
    section Komunikačné systémy (25 minút)
        Architektúra udalostí: Implementácia Pub/Sub
                             : Návrh správ
                             : Vysielače udalostí
                             : Voľné väzby
        
    section Návrh herných objektov (30 minút)
        Systémy entít: Správa vlastností
                      : Kompozícia správania
                      : Spracovanie stavov
                      : Správa životného cyklu
        
    section Vzory architektúry (35 minút)
        Návrh systémov: Komponentové systémy
                     : Vzor pozorovateľa
                     : Vzor príkazu
                     : Stavové stroje
        
    section Pokročilé koncepty (45 minút)
        Škálovateľná architektúra: Optimalizácia výkonu
                                 : Správa pamäte
                                 : Modulárny dizajn
                                 : Testovacie stratégie
        
    section Koncepty herného enginu (1 týždeň)
        Profesionálny rozvoj: Scénové grafy
                             : Správa assetov
                             : Renderovacie pipeline
                             : Integrácia fyziky
        
    section Ovládnutie frameworku (2 týždne)
        Moderný herný vývoj: React herné vzory
                           : Optimalizácia canvasu
                           : Základy WebGL
                           : PWA hry
        
    section Priemyselné praktiky (1 mesiac)
        Profesionálne zručnosti: Tímová spolupráca
                               : Revízie kódu
                               : Vzory herného dizajnu
                               : Profilovanie výkonu
Loading

🛠️ Zhrnutie vášho herného architektonického nástroja

Po dokončení tejto lekcie máte teraz:

  • Majstrovstvo v návrhových vzoroch: Pochopenie kompromisov medzi dedičnosťou a kompozíciou
  • Architektúra riadená udalosťami: Implementácia pub/sub pre škálovateľnú komunikáciu
  • Objektovo orientovaný dizajn: Hierarchie tried a kompozícia správania
  • Moderný JavaScript: Factory funkcie, spread syntax a vzory ES6+
  • Škálovateľná architektúra: Voľné spájanie a modulárne princípy dizajnu
  • Základy vývoja hier: Entity systémy a komponentové vzory
  • Profesionálne vzory: Priemyselné štandardné prístupy k organizácii kódu

Reálne použitia: Tieto vzory sa priamo vzťahujú na:

  • Frontend frameworky: React/Vue komponentová architektúra a správa stavu
  • Backendové služby: Komunikácia mikroservisov a systémy riadené udalosťami
  • Mobilný vývoj: Architektúra aplikácií iOS/Android a notifikačné systémy
  • Herné enginy: Unity, Unreal a webový vývoj hier
  • Enterprise softvér: Event sourcing a návrh distribuovaných systémov
  • API dizajn: RESTful služby a komunikácia v reálnom čase

Získané profesionálne zručnosti: Teraz môžete:

  • Navrhovať škálovateľné softvérové architektúry pomocou overených vzorov
  • Implementovať systémy riadené udalosťami, ktoré zvládajú komplexné interakcie
  • Vybrať vhodné stratégie organizácie kódu pre rôzne scenáre
  • Ladiť a efektívne udržiavať voľne spojené systémy
  • Komunikovať technické rozhodnutia pomocou priemyselných termínov

Ďalšia úroveň: Ste pripravení implementovať tieto vzory v reálnej hre, preskúmať pokročilé témy vývoja hier alebo aplikovať tieto architektonické koncepty na webové aplikácie!

🌟 Ocenenie dosiahnuté: Ovládli ste základné vzory softvérovej architektúry, ktoré poháňajú všetko od jednoduchých hier po komplexné podnikové systémy!

Zadanie

Návrh hry

Zrieknutie sa zodpovednosti:
Tento dokument bol preložený pomocou AI prekladateľskej služby Co-op Translator. Hoci sa snažíme o presnosť, vezmite, prosím, 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. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.