# Vytvořte vesmírnou hru část 6: Konec a restart

```mermaid
journey
    title Vaše cesta dokončení hry
    section Podmínky ukončení
      Definovat stavy výhry/prohry: 3: Student
      Implementovat kontrolu podmínek: 4: Student
      Spravovat přechody stavů: 4: Student
    section Zážitek hráče
      Navrhnout zpětnovazební systémy: 4: Student
      Vytvořit mechaniku restartu: 5: Student
      Vylepšit uživatelské rozhraní: 5: Student
    section Integrace systému
      Spravovat životní cyklus hry: 5: Student
      Zpracovat úklid paměti: 5: Student
      Vytvořit kompletní zážitek: 5: Student
```
Každá skvělá hra potřebuje jasné koncové podmínky a plynulý mechanismus restartu. Vybudovali jste působivou vesmírnou hru s pohybem, bojem a skórováním – nyní je čas přidat poslední dílky, díky kterým hra bude působit dokončeně.

Vaše hra v současné době běží nekonečně, podobně jako sonda Voyager, kterou NASA vypustila v roce 1977 – stále cestuje vesmírem desetiletí poté. To je sice v pořádku pro vesmírný průzkum, ale hry potřebují definované koncové body, aby vytvářely uspokojivé zážitky.

Dnes implementujeme správné podmínky výhry/prohry a systém restartu. Na konci této lekce budete mít vyladěnou hru, kterou hráči mohou dokončit a znovu hrát, stejně jako klasické arkádové hry, jež definovaly tento žánr.

```mermaid
mindmap
  root((Dokončení hry))
    End Conditions
      Victory States
      Defeat Conditions
      Progress Tracking
      State Validation
    Player Feedback
      Visual Messages
      Color Psychology
      Clear Communication
      Emotional Response
    State Management
      Game Loop Control
      Memory Cleanup
      Object Lifecycle
      Event Handling
    Restart Systems
      Input Handling
      State Reset
      Fresh Initialization
      User Experience
    Polish Elements
      Message Display
      Smooth Transitions
      Error Prevention
      Accessibility
```
## Přednáškový kvíz

[Přednáškový kvíz](https://ff-quizzes.netlify.app/web/quiz/39)

## Pochopení koncových podmínek hry

Kdy by měla vaše hra skončit? Tato základní otázka formuje herní design již od rané arkádové éry. Pac-Man končí, když vás chytí duchové nebo vyčistíte všechny tečky, zatímco Space Invaders končí, když mimozemšťané dorazí na spodní část obrazovky nebo je všechny zničíte.

Jako tvůrce hry definujete podmínky pro vítězství a porážku. Pro naši vesmírnou hru zde jsou ověřené přístupy, které vytvářejí poutavou hratelnost:

```mermaid
flowchart TD
    A["🎮 Začátek hry"] --> B{"Kontrola podmínek"}
    
    B --> C["Počet nepřátel"]
    B --> D["Životy hrdiny"]
    B --> E["Hranice skóre"]
    B --> F["Progres úrovně"]
    
    C --> C1{"Nepřátelé = 0?"}
    D --> D1{"Životy = 0?"}
    E --> E1{"Skóre ≥ cíl?"}
    F --> F1{"Úkoly splněny?"}
    
    C1 -->|Ano| G["🏆 Vítězství"]
    D1 -->|Ano| H["💀 Prohra"]
    E1 -->|Ano| G
    F1 -->|Ano| G
    
    C1 -->|Ne| B
    D1 -->|Ne| B
    E1 -->|Ne| B
    F1 -->|Ne| B
    
    G --> I["🔄 Možnost restartu"]
    H --> I
    
    style G fill:#e8f5e8
    style H fill:#ffebee
    style I fill:#e3f2fd
```
- **Bylo zničeno `N` nepřátelských lodí**: Je běžné, že pokud hru dělíte do různých úrovní, je potřeba zničit `N` nepřátelských lodí, abyste dokončili úroveň.
- **Vaše loď byla zničena**: Existují hry, kde prohráváte, pokud je vaše loď zničena. Dalším běžným přístupem je koncept životů. Pokaždé, když je vaše loď zničena, odečte jeden život. Po ztrátě všech životů prohráváte hru.
- **Nasbírali jste `N` bodů**: Další běžnou koncovou podmínkou je nasbírání bodů. Jak body získáte je na vás, ale je běžné přiřazovat body za různé aktivity, jako je zničení nepřátelské lodě nebo sbírání předmětů, které se *vhazují*, když jsou zničeny.
- **Dokončení úrovně**: To může zahrnovat několik podmínek, například `X` zničených nepřátel, nasbírání `Y` bodů, nebo třeba že byl nasbíraný konkrétní předmět.

## Implementace funkčnosti restartu hry

Dobré hry podporují opakované hraní díky hladkým restartovacím mechanismům. Když hráči dokončí hru (nebo prohrají), často chtějí hned zkusit znovu – ať už aby překonali své skóre, nebo zlepšili výkon.

```mermaid
stateDiagram-v2
    [*] --> Playing: Začátek hry
    Playing --> Victory: Všichni nepřátelé zničeni
    Playing --> Defeat: Životy = 0
    
    Victory --> MessageDisplay: Zobrazit zprávu o vítězství
    Defeat --> MessageDisplay: Zobrazit zprávu o prohře
    
    MessageDisplay --> WaitingRestart: Výzva k stisku Enteru
    WaitingRestart --> Resetting: Stisknuto Enter
    
    Resetting --> CleanupMemory: Vymazat intervaly
    CleanupMemory --> ClearEvents: Odstranit posluchače
    ClearEvents --> InitializeGame: Čistý start
    InitializeGame --> Playing: Začíná nová hra
    
    note right of MessageDisplay
        Barevná zpětná vazba:
        Zelená = Vítězství
        Červená = Prohra
    end note
    
    note right of Resetting
        Kompletní reset stavu
        zabraňuje únikům paměti
    end note
```
Tetris je toho dokonalým příkladem: když vám kostky dosáhnou na vrchol, můžete okamžitě začít novou hru bez složitého procházení menu. My vytvoříme podobný restartovací systém, který čistě resetuje herní stav a rychle vrací hráče zpět do akce.

✅ **Zamyslete se**: Zkuste si vzpomenout na hry, které jste hráli. Za jakých podmínek končí a jak jste vyzváni k restartu? Co dělá restart plynulý nebo naopak frustrující?

## Co postavíte

Implementujete poslední funkce, které vaše projekt promění v kompletní herní zážitek. Tyto prvky odlišují vyladěné hry od základních prototypů.

**Dnes přidáváme:**

1. **Podmínku vítězství**: Zničte všechny nepřátele a oslavujte správně (zasloužíte si to!)
2. **Podmínku porážky**: Ztratíte všechny životy a připravte se na obrazovku porážky
3. **Mechanismus restartu**: Stiskněte Enter a hned skočte zpátky – protože jedna hra nikdy nestačí
4. **Správu stavu**: Čistý start vždy – žádní zbylí nepřátelé nebo podivné chyby z poslední hry

## Začínáme

Připravte si své vývojové prostředí. Měli byste mít všechny soubory vesmírné hry z předchozích lekcí přichystané.

**Váš projekt by měl vypadat asi takto:**

```bash
-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
  -| life.png
-| index.html
-| app.js
-| package.json
```

**Spusťte svůj vývojový server:**

```bash
cd your-work
npm start
```

**Tento příkaz:**
- Spustí lokální server na `http://localhost:5000`
- Správně servíruje vaše soubory
- Automaticky obnovuje stránku při změnách

Otevřete `http://localhost:5000` ve vašem prohlížeči a ověřte, že hra běží. Měli byste být schopni se pohybovat, střílet a interagovat s nepřáteli. Pokud je vše v pořádku, můžeme pokračovat s implementací.

> 💡 **Tip pro vývojáře**: Aby se vyhnuli varováním ve Visual Studio Code, deklarujte `gameLoopId` nahoře ve vašem souboru jako `let gameLoopId;` místo deklarování uvnitř funkce `window.onload`. To odpovídá moderním zásadám deklarace proměnných v JavaScriptu.

```mermaid
flowchart TD
    A["1. Sledování stavu"] --> B["2. Zpracovatelé událostí"]
    B --> C["3. Konstanty zpráv"]
    C --> D["4. Ovládání restartu"]
    D --> E["5. Zobrazení zpráv"]
    E --> F["6. Reset systému"]
    
    G["isHeroDead()\njaEnemiesDead()"] --> A
    H["Kolizní události\nUkončení hry"] --> B
    I["GAME_END_WIN\nGAME_END_LOSS"] --> C
    J["Enter klávesa\nSpouštěč restartu"] --> D
    K["Vítězství/Porážka\nText s barvami"] --> E
    L["Úklid stavu\nNová inicializace"] --> F
    
    F --> M["🎮 Kompletní hra"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec
    style M fill:#e1f5fe
```
## Kroky implementace

### Krok 1: Vytvoření funkcí pro sledování koncových podmínek

Potřebujeme funkce, které budou sledovat, kdy by hra měla skončit. Jako senzory na Mezinárodní vesmírné stanici, které neustále monitorují kritické systémy, tyto funkce budou průběžně kontrolovat stav hry.

```javascript
function isHeroDead() {
  return hero.life <= 0;
}

function isEnemiesDead() {
  const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
  return enemies.length === 0;
}
```

**Co se děje na pozadí:**
- **Kontroluje**, jestli našemu hrdinovi došly životy (au!)
- **Počítá**, kolik nepřátel je ještě naživu a aktivních
- **Vrací** `true`, když je bojové pole očištěné od nepřátel
- **Používá** jednoduchou logiku pravda/nepravda pro přehlednost
- **Filtruje** všechny herní objekty, aby našel přeživší

### Krok 2: Aktualizace obsluh událostí pro koncové podmínky

Nyní připojíme tyto kontroly podmínek k systému událostí hry. Pokaždé, když dojde ke kolizi, hra vyhodnotí, zda to spouští koncovou podmínku. To vytváří okamžitou zpětnou vazbu pro kritické herní události.

```mermaid
sequenceDiagram
    participant Collision
    participant GameLogic
    participant Conditions
    participant EventSystem
    participant Display
    
    Collision->>GameLogic: Laser zasáhne nepřítele
    GameLogic->>GameLogic: Zničit objekty
    GameLogic->>Conditions: Zkontroluj isEnemiesDead()
    
    alt Všichni nepřátelé poraženi
        Conditions->>EventSystem: Vyvolej GAME_END_WIN
        EventSystem->>Display: Zobraz zprávu o vítězství
    else Nepřátelé zbývají
        Conditions->>GameLogic: Pokračuj ve hře
    end
    
    Collision->>GameLogic: Nepřítel zasáhne hrdinu
    GameLogic->>GameLogic: Sniž počet životů
    GameLogic->>Conditions: Zkontroluj isHeroDead()
    
    alt Životy = 0
        Conditions->>EventSystem: Vyvolej GAME_END_LOSS
        EventSystem->>Display: Zobraz zprávu o porážce
    else Životy zbývají
        GameLogic->>Conditions: Zkontroluj isEnemiesDead()
        alt Všichni nepřátelé poraženi
            Conditions->>EventSystem: Vyvolej GAME_END_WIN
        end
    end
```
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
    first.dead = true;
    second.dead = true;
    hero.incrementPoints();

    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
    enemy.dead = true;
    hero.decrementLife();
    if (isHeroDead())  {
      eventEmitter.emit(Messages.GAME_END_LOSS);
      return; // ztráta před vítězstvím
    }
    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.GAME_END_WIN, () => {
    endGame(true);
});
  
eventEmitter.on(Messages.GAME_END_LOSS, () => {
  endGame(false);
});
```

**Co se zde děje:**
- **Laser zasáhne nepřítele**: Oba zmizí, získáte body a zkontrolujeme, jestli jste vyhráli
- **Nepřítel zasáhne vás**: Ztratíte život a zkontrolujeme, jestli ještě dýcháte
- **Chytré řazení**: Kontrolujeme porážku nejdřív (nikdo nechce vyhrát a prohrát zároveň!)
- **Okamžité reakce**: Jakmile se stane něco důležitého, hra o tom ví

### Krok 3: Přidejte nové konstanty zpráv

Budete potřebovat přidat nové typy zpráv do své konstanty `Messages`. Tyto konstanty pomáhají udržovat konzistenci a předcházet překlepům ve vašem eventovém systému.

```javascript
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```

**V uvedeném jsme:**
- **Přidali** konstanty pro herní koncové události, aby byla zachována konzistence
- **Použili** popisná jména, která jasně vyjadřují účel události
- **Dodrželi** stávající pojmenovací konvence typů zpráv

### Krok 4: Implementujte ovládání restartu

Nyní přidáte klávesové ovládání, které umožní hráčům restartovat hru. Klávesa Enter je přirozená volba, protože obvykle slouží k potvrzování akcí a spouštění nových her.

**Přidejte detekci klávesy Enter do svého existujícího posluchače událostí keydown:**

```javascript
else if(evt.key === "Enter") {
   eventEmitter.emit(Messages.KEY_EVENT_ENTER);
}
```

**Přidejte novou konstantu zprávy:**

```javascript
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

**Co potřebujete vědět:**
- **Rozšiřuje** stávající systém zpracování klávesových událostí
- **Používá** klávesu Enter jako spouštěč restartu pro intuitivní ovládání
- **Vyvolává** vlastní událost, kterou mohou poslouchat další části hry
- **Dodržuje** stejný vzor jako vaše ostatní ovládání klávesnicí

### Krok 5: Vytvořte systém zobrazení zpráv

Vaše hra musí hráčům jasně sdělovat výsledky. Vytvoříme systém zpráv, který zobrazuje stavy vítězství a porážky pomocí barevného kódování textu, podobně jako terminálové rozhraní raných počítačových systémů, kde zelená značí úspěch a červená chybu.

**Vytvořte funkci `displayMessage()`:**

```javascript
function displayMessage(message, color = "red") {
  ctx.font = "30px Arial";
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}
```

**Krok za krokem, co se děje:**
- **Nastavuje** velikost a rodinu písma pro jasný a čitelný text
- **Aplikuje** parametr barvy s výchozí hodnotou „červená“ pro varování
- **Vycentruje** text horizontálně i vertikálně na plátno
- **Používá** moderní JavaScript výchozí parametry pro flexibilní zadávání barvy
- **Využívá** 2D kontext canvasu pro přímé vykreslení textu

**Vytvořte funkci `endGame()`:**

```javascript
function endGame(win) {
  clearInterval(gameLoopId);

  // Nastavte prodlevu, aby se zajistilo dokončení všech čekajících vykreslení
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (win) {
      displayMessage(
        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
        "green"
      );
    } else {
      displayMessage(
        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
      );
    }
  }, 200)  
}
```

**Co tato funkce dělá:**
- **Zamrzne** vše na místě – žádné další pohyby lodí nebo laserů
- **Dá** malou pauzu (200 ms), aby se poslední snímek stačil dokončit
- **Vyčistí** obrazovku a natře ji černě pro dramatický efekt
- **Zobrazí** odlišné zprávy pro vítěze a poražené
- **Barevně zvýrazní** zprávy – zelená pro úspěch, červená pro... no, ne příliš úspěch
- **Řekne** hráčům přesně, jak znovu začít

### 🔄 **Pedagogická kontrola**
**Správa herního stavu**: Před implementací resetu se ujistěte, že rozumíte:
- ✅ Jak koncové podmínky vytvářejí jasné herní cíle
- ✅ Proč je vizuální zpětná vazba zásadní pro porozumění hráče
- ✅ Význam správného úklidu pro prevenci úniků paměti
- ✅ Jak událostmi řízená architektura umožňuje čisté přechody stavů

**Rychlý autoselftest**: Co se stane, pokud během resetu neodstraníte posluchače událostí?
*Odpověď: Úniky paměti a duplicitní obslužné rutiny vedoucí k nepředvídatelnému chování*

**Principy herního designu**: Implementujete teď:
- **Jasné cíle**: Hráči přesně vědí, co znamená úspěch a neúspěch
- **Okamžitou zpětnou vazbu**: Změny stavu hry jsou komunikovány ihned
- **Kontrolu uživatele**: Hráči mohou restartovat, kdy chtějí
- **Spolehlivost systému**: Správný úklid předchází chybám a závadám

### Krok 6: Implementace resetu hry

Resetovací systém musí kompletně vyčistit aktuální herní stav a inicializovat novou herní session. To zajistí hráčům čistý start bez pozůstatků dat z předchozí hry.

**Vytvořte funkci `resetGame()`:**

```javascript
function resetGame() {
  if (gameLoopId) {
    clearInterval(gameLoopId);
    eventEmitter.clear();
    initGame();
    gameLoopId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawPoints();
      drawLife();
      updateGameObjects();
      drawGameObjects(ctx);
    }, 100);
  }
}
```

**Pojďme si vysvětlit jednotlivé části:**
- **Kontroluje**, zda právě běží herní smyčka před resetem
- **Zastavuje** existující herní smyčku, aby ukončil veškeré běžící aktivity
- **Odstraňuje** všechny posluchače událostí, aby zabránil únikům paměti
- **Znovu inicializuje** herní stav s novými objekty a proměnnými
- **Spouští** novou herní smyčku se všemi potřebnými funkcemi
- **Dodržuje** stejný interval 100 ms pro konzistentní výkon

**Přidejte obslužnou funkci pro klávesu Enter do funkce `initGame()`:**

```javascript
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});
```

**Přidejte metodu `clear()` do třídy EventEmitter:**

```javascript
clear() {
  this.listeners = {};
}
```

**Klíčové body k zapamatování:**
- **Propojuje** stisk klávesy Enter s funkcí resetu hry
- **Registruje** posluchače události během inicializace hry
- **Nabízí** čistý způsob, jak odstranit všechny posluchače při resetu
- **Zabraňuje** únikům paměti tím, že maže event handlery mezi hrami
- **Resetuje** objekt posluchačů na prázdný stav pro novou inicializaci

## Gratulujeme! 🎉

👽 💥 🚀 Úspěšně jste vybudovali kompletní hru od začátku. Stejně jako programátoři, kteří vytvořili první videohry v 70. letech, jste proměnili řádky kódu v interaktivní zážitek se správnou herní mechanikou a zpětnou vazbou uživateli. 🚀 💥 👽

**Dokončili jste:**
- **Implementaci** kompletních podmínek výhry a prohry s uživatelskou zpětnou vazbou
- **Vytvoření** bezproblémového systému restartu pro nepřetržitou hratelnost
- **Návrh** jasné vizuální komunikace herních stavů
- **Správu** složitých přechodů stavů a úklidu
- **Složení** všech komponent do soudržné, hratelné hry

### 🔄 **Pedagogická kontrola**
**Kompletní systém vývoje hry**: Oslavujte své zvládnutí celého cyklu vývoje hry:
- ✅ Jak koncové podmínky vytváří uspokojivé zážitky hráče?
- ✅ Proč je správná správa stavu kritická pro stabilitu hry?
- ✅ Jak vizuální zpětná vazba zlepšuje porozumění hráče?
- ✅ Jakou roli hraje restartovací systém v udržení hráčů?

**Ovládání systému**: Vaše kompletní hra demonstruje:
- **Full-stack herní vývoj**: Od grafiky přes vstup až po správu stavu
- **Profesionální architekturu**: Událostmi řízené systémy se správným úklidem
- **Návrh UX**: Jasná zpětná vazba a intuitivní ovládání
- **Optimalizaci výkonu**: Efektivní vykreslování a správa paměti
- **Dokončení a vzhled**: Všechny detaily, které hře dodávají pocit hotovosti

**Dovednosti připravené na průmysl**: Implementovali jste:
- **Architekturu herní smyčky**: Systémy v reálném čase s konzistentním výkonem
- **Programování řízené událostmi**: Oddělené systémy, které se efektivně škálují
- **Správu stavu**: Složitou manipulaci s daty a životní cyklus
- **Návrh uživatelského rozhraní**: Jasnou komunikaci a rychlou odezvu
- **Testování a ladění**: Iterativní vývoj a řešení problémů

### ⚡ **Co můžete udělat během následujících 5 minut**
- [ ] Zahrajte si svou kompletní hru a otestujte všechny podmínky vítězství a prohry
- [ ] Experimentujte s různými parametry koncových podmínek
- [ ] Zkuste přidat výpisy do konzole pro sledování změn herního stavu
- [ ] Sdílejte svou hru s přáteli a sbírejte zpětnou vazbu

### 🎯 **Co můžete dokončit během této hodiny**
- [ ] Dokončit post-lekční kvíz a zamyslet se nad svým vývojem hry
- [ ] Přidat zvukové efekty pro stavy vítězství a porážky
- [ ] Implementovat další koncové podmínky jako časová omezení nebo bonusové cíle
- [ ] Vytvořit různé úrovně obtížnosti s různým počtem nepřátel
- [ ] Vylepšit vizuální prezentaci lepšími fonty a barvami

### 📅 **Vaše týdenní mistrovství ve vývoji her**
- [ ] Dokončit rozšířenou vesmírnou hru s více úrovněmi a progresí
- [ ] Přidat pokročilé funkce jako power-upy, různé typy nepřátel a speciální zbraně
- [ ] Vytvořit systém vysokých skóre s přetrvávajícím uložením
- [ ] Navrhnout uživatelská rozhraní pro menu, nastavení a herní možnosti
- [ ] Optimalizovat výkon pro různá zařízení a prohlížeče
- [ ] Nasadit hru online a sdílet ji s komunitou
### 🌟 **Vaše měsíční kariéra v herním vývoji**
- [ ] Vytvořte několik kompletních her zkoumajících různé žánry a mechaniky
- [ ] Naučte se pokročilé rámce pro vývoj her jako Phaser nebo Three.js
- [ ] Přispívejte do open source projektů zaměřených na vývoj her
- [ ] Studujte principy herního designu a psychologii hráčů
- [ ] Vytvořte portfolio, které ukáže vaše dovednosti ve vývoji her
- [ ] Spojte se s komunitou herních vývojářů a pokračujte v učení

## 🎯 Váš kompletní časový plán zvládnutí herního vývoje

```mermaid
timeline
    title Kompletní postup učení vývoje her
    
    section Základy (Lekce 1-2)
        Herní architektura: Struktura projektu
                         : Správa zdrojů
                         : Základy plátna
                         : Systémy událostí
        
    section Interakční systémy (Lekce 3-4)
        Ovládání hráče: Zpracování vstupu
                      : Mechaniky pohybu
                      : Detekce kolizí
                      : Simulace fyziky
        
    section Herní mechaniky (Lekce 5)
        Systémy zpětné vazby: Mechanismy skórování
                            : Správa životů
                            : Vizuální komunikace
                            : Motivace hráče
        
    section Dokončení hry (Lekce 6)
        Dokončování & Plynulost: Podmínky ukončení
                             : Správa stavů
                             : Restartovací systémy
                             : Uživatelská zkušenost
        
    section Pokročilé funkce (1 týden)
        Dovednosti rozšíření: Integrace zvuku
                           : Vizuální efekty
                           : Postup úrovně
                           : Optimalizace výkonu
        
    section Profesionální rozvoj (1 měsíc)
        Připravenost pro průmysl: Ovládání frameworků
                               : Týmová spolupráce
                               : Vývoj portfolia
                               : Zapojení do komunity
        
    section Kariérní růst (3 měsíce)
        Specializace: Pokročilé herní enginy
                    : Nasazení na platformy
                    : Strategie monetizace
                    : Průmyslové sítě
```
### 🛠️ Shrnutí vašeho kompletního nástroje pro vývoj her

Po dokončení celé série vesmírných her jste nyní zvládli:
- **Architekturu her**: Systémy řízené událostmi, herní smyčky a správa stavů
- **Grafické programování**: Canvas API, vykreslování spriteů a vizuální efekty
- **Vstupní systémy**: Zpracování klávesnice, detekce kolizí a responzivní ovládání
- **Herní design**: Zpětná vazba hráče, systémy postupů a zapojení hráčů
- **Optimalizaci výkonu**: Efektivní vykreslování, správa paměti a kontrola snímkové frekvence
- **Uživatelskou zkušenost**: Jasná komunikace, intuitivní ovládání a detaily pro vyladění
- **Profesionální vzory**: Čistý kód, techniky ladění a organizace projektů

**Praktické využití**: Vaše dovednosti ve vývoji her se přímo aplikují na:
- **Interaktivní webové aplikace**: Dynamická rozhraní a systémy v reálném čase
- **Vizualizace dat**: Animované grafy a interaktivní grafika
- **Vzdělávací technologie**: Gamifikace a poutavé vzdělávací zážitky
- **Mobilní vývoj**: Dotykové interakce a optimalizace výkonu
- **Simulační software**: Fyzikální enginy a modelování v reálném čase
- **Kreativní průmysly**: Interaktivní umění, zábava a digitální zážitky

**Získané profesní dovednosti**: Nyní můžete:
- **Navrhovat** složité interaktivní systémy od základu
- **Ladit** aplikace v reálném čase systémovým přístupem
- **Optimalizovat** výkon pro plynulý uživatelský zážitek
- **Navrhovat** poutavá uživatelská rozhraní a vzory interakcí
- **Spolupracovat** efektivně na technických projektech s řádnou organizací kódu

**Zvládnuté koncepty vývoje her**:
- **Systémy v reálném čase**: Herní smyčky, správa snímkové frekvence a výkon
- **Architektura řízená událostmi**: Oddělené systémy a předávání zpráv
- **Správa stavů**: Složitá manipulace s daty a správa životního cyklu
- **Programování uživatelského rozhraní**: Canvas grafika a responzivní design
- **Teorie herního designu**: Psychologie hráče a zapojovací mechaniky

**Další úroveň**: Jste připraveni prozkoumat pokročilé herní rámce, 3D grafiku, multiplayer systémy nebo přejít do profesionálních herních pozic!

🌟 **Ocenění odemčeno**: Dokončili jste kompletní cestu vývojem hry a vytvořili profesionálně kvalitní interaktivní zážitek od základu!

**Vítejte v komunitě herních vývojářů!** 🎮✨

## Výzva GitHub Copilot Agenta 🚀

Použijte režim Agenta k dokončení následující výzvy:

**Popis:** Vylepšete vesmírnou hru implementací systému postupování úrovní s rostoucí obtížností a bonusovými prvky.

**Výzva:** Vytvořte multiúrovňový vesmírný herní systém, kde každá úroveň má více nepřátelských lodí s vyšší rychlostí a zdravím. Přidejte multiplikátor skóre, který se zvyšuje s každou úrovní, a implementujte power-upy (například rychlá střelba nebo štít), které se náhodně objeví po zničení nepřátel. Zahrňte bonus za dokončení úrovně a na obrazovce zobrazte aktuální úroveň spolu se stávajícím skóre a počtem životů.

Další informace o [režimu agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) zde.

## 🚀 Nepovinná výzva k vylepšení

**Přidejte do hry zvuk**: Vylepšete svůj herní zážitek implementací zvukových efektů! Zvažte přidání zvuku pro:

- **Laserové střely** při střelbě hráče
- **Zničení nepřítele** když jsou lodě zasaženy
- **Poškození hrdiny** když hráč utrpí zásahy
- **Vítěznou hudbu** při vítězství ve hře
- **Zvuk prohry** při ztrátě hry

**Příklad implementace zvuku:**

```javascript
// Vytvořit zvukové objekty
const laserSound = new Audio('assets/laser.wav');
const explosionSound = new Audio('assets/explosion.wav');

// Přehrát zvuky během herních událostí
function playLaserSound() {
  laserSound.currentTime = 0; // Resetovat na začátek
  laserSound.play();
}
```

**Co byste měli vědět:**
- **Vytváří** objekty Audio pro různé zvukové efekty
- **Resetuje** `currentTime` pro umožnění rychlé střelby zvuků
- **Řeší** politiky automatického přehrávání prohlížeče spuštěním zvuků na základě uživatelských interakcí
- **Spravuje** hlasitost a načasování zvuku pro lepší herní zážitek

> 💡 **Zdroje k učení**: Prozkoumejte tuto [audio sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) a naučte se víc o implementaci zvuku v JavaScriptových hrách.

## Kvíz po lekci

[Kvíz po lekci](https://ff-quizzes.netlify.app/web/quiz/40)

## Recenze a samostudium

Vaším úkolem je vytvořit novou ukázkovou hru, takže prozkoumejte některé zajímavé hry a zjistěte, jaký typ hry byste mohli vybudovat.

## Zadání

[Vytvořte ukázkovou hru](assignment.md)

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Prohlášení o vyloučení odpovědnosti**:  
Tento dokument byl přeložen pomocí AI překladatelské služby [Co-op Translator](https://github.com/Azure/co-op-translator). Ač usilujeme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho mateřském jazyce by měl být považován za závazný zdroj. Pro kritické informace se doporučuje profesionální lidský překlad. Nejsme odpovědni za jakékoliv nedorozumění nebo mylné interpretace vyplývající z použití tohoto překladu.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->