# Vytvoření vesmírné hry část 4: Přidání laseru a detekce kolizí

```mermaid
journey
    title Vaše cesta detekcí kolizí
    section Základy fyziky
      Porozumět obdélníkům: 3: Student
      Naučit se matematiku průniků: 4: Student
      Pochopit souřadnicové systémy: 4: Student
    section Herní mechaniky
      Implementovat střelbu laserem: 4: Student
      Přidat životní cyklus objektu: 5: Student
      Vytvořit pravidla kolizí: 5: Student
    section Integrace systému
      Vytvořit detekci kolizí: 5: Student
      Optimalizovat výkon: 5: Student
      Testovat interakční systémy: 5: Student
```
## Přednáškový kvíz

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

Zamyslete se nad momentem ve Star Wars, kdy protonové torpéda Luka zasáhla výfukovou štěrbinu Hvězdy smrti. Právě tato přesná detekce kolize změnila osud galaxie! V hrách funguje detekce kolizí stejně – určuje, kdy objekty interagují a co se stane dál.

V této lekci přidáte do své vesmírné hry laserové zbraně a implementujete detekci kolizí. Stejně jako plánovači misí NASA počítají trajektorie kosmických lodí, abyste se vyhnuli trosek, naučíte se detekovat, kdy se herní objekty protínají. Tento proces rozdělíme na zvládnutelné kroky, které na sebe navazují.

Na konci budete mít funkční bojový systém, kde lasery ničící nepřátele a kolize spouštějí herní události. Stejné principy detekce kolizí se používají od fyzikálních simulací po interaktivní webová rozhraní.

```mermaid
mindmap
  root((Detekce kolizí))
    Physics Concepts
      Rectangle Boundaries
      Intersection Testing
      Coordinate Systems
      Separation Logic
    Game Objects
      Laser Projectiles
      Enemy Ships
      Hero Character
      Collision Zones
    Lifecycle Management
      Object Creation
      Movement Updates
      Destruction Marking
      Memory Cleanup
    Event Systems
      Keyboard Input
      Collision Events
      Game State Changes
      Audio/Visual Effects
    Performance
      Efficient Algorithms
      Frame Rate Optimization
      Memory Management
      Spatial Partitioning
```
✅ Proveďte malý průzkum o vůbec první napsané počítačové hře. Jaká byla její funkčnost?

## Detekce kolizí

Detekce kolizí funguje jako proximity senzory na lunárním modulu Apollo – neustále kontroluje vzdálenosti a spouští upozornění, když se objekty přiblíží příliš blízko. V hrách tento systém určuje, kdy objekty interagují a co by se mělo stát dál.

Použitý přístup považuje každý herní objekt za obdélník, podobně jako systémy řízení letového provozu používají zjednodušené geometrické tvary k sledování letadel. Tato obdélníková metoda může vypadat základně, je však výpočetně efektivní a dobře funguje ve většině herních situací.

### Reprezentace obdélníku

Každý herní objekt potřebuje souřadnicové hranice, podobně jako rover Mars Pathfinder mapoval svou polohu na povrchu Marsu. Zde jsou definice těchto hranic:

```mermaid
flowchart TD
    A["🎯 Herní objekt"] --> B["📍 Pozice (x, y)"]
    A --> C["📏 Rozměry (šířka, výška)"]
    
    B --> D["Horní: y"]
    B --> E["Levý: x"]
    
    C --> F["Spodní: y + výška"]
    C --> G["Pravý: x + šířka"]
    
    D --> H["🔲 Obrys obdélníku"]
    E --> H
    F --> H
    G --> H
    
    H --> I["Připraveno pro detekci kolize"]
    
    style A fill:#e3f2fd
    style H fill:#e8f5e8
    style I fill:#fff3e0
```
```javascript
rectFromGameObject() {
  return {
    top: this.y,
    left: this.x,
    bottom: this.y + this.height,
    right: this.x + this.width
  }
}
```

**Podrobněji:**
- **Horní okraj**: To je jen místo, kde váš objekt začíná vertikálně (jeho pozice y)
- **Levý okraj**: Kde začíná horizontálně (jeho pozice x)
- **Spodní okraj**: Přičtěte výšku k pozici y – nyní víte, kde končí!
- **Pravý okraj**: Přičtěte šířku k pozici x – a máte kompletní hranici

### Algoritmus průniku

Detekce průniku obdélníků využívá logiku podobnou té, kterou Hubbleův vesmírný teleskop používá k určení, zda se nebeské objekty překrývají ve svém zorném poli. Algoritmus hledá oddělení:

```mermaid
flowchart LR
    A["Obdélník 1"] --> B{"Testy oddělení"}
    C["Obdélník 2"] --> B
    
    B --> D["Levý R2 > pravý R1?"]
    B --> E["Pravý R2 < levý R1?"]
    B --> F["Horní R2 > spodní R1?"]
    B --> G["Spodní R2 < horní R1?"]
    
    D --> H{"Některý pravda?"}
    E --> H
    F --> H
    G --> H
    
    H -->|Ano| I["❌ Žádná kolize"]
    H -->|Ne| J["✅ Kolize zjištěna"]
    
    style B fill:#e3f2fd
    style I fill:#ffebee
    style J fill:#e8f5e8
```
```javascript
function intersectRect(r1, r2) {
  return !(r2.left > r1.right ||
    r2.right < r1.left ||
    r2.top > r1.bottom ||
    r2.bottom < r1.top);
}
```

**Test separace funguje jako radary:**
- Je obdélník 2 zcela napravo od obdélníku 1?
- Je obdélník 2 zcela nalevo od obdélníku 1?
- Je obdélník 2 zcela pod obdélníkem 1?
- Je obdélník 2 zcela nad obdélníkem 1?

Pokud žádná z těchto podmínek není pravdivá, obdélníky se musí překrývat. Tento přístup odpovídá tomu, jak radaráři určují, zda jsou dvě letadla ve bezpečné vzdálenosti.

## Správa životního cyklu objektů

Když laser zasáhne nepřítele, oba objekty musí být ze hry odstraněny. Mazání objektů během smyčky však může způsobit zhroucení – lekce, kterou si rané počítačové systémy jako Apollo Guidance Computer tvrdě odpykaly. Místo toho používáme přístup "označit k odstranění", který bezpečně odstraňuje objekty mezi snímky.

```mermaid
stateDiagram-v2
    [*] --> Active: Objekt vytvořen
    Active --> Collided: Detekována kolize
    Collided --> MarkedDead: Nastavit dead = true
    MarkedDead --> Filtered: Další snímek
    Filtered --> [*]: Objekt odstraněn
    
    Active --> OutOfBounds: Opustí obrazovku
    OutOfBounds --> MarkedDead
    
    note right of MarkedDead
        Bezpečné pokračovat
        aktuální snímek
    end note
    
    note right of Filtered
        Objekty odstraněny
        mezi snímky
    end note
```
Takto označujeme něco k odstranění:

```javascript
// Označit objekt k odstranění
enemy.dead = true;
```

**Proč tento přístup funguje:**
- Označíme objekt jako „mrtvý“, ale okamžitě jej nesmažeme
- To dovolí bezpečně dokončit aktuální snímek hry
- Žádné pády kvůli použití již odstraněné věci!

Poté před příštím vykreslením odfiltrujeme označené objekty:

```javascript
gameObjects = gameObjects.filter(go => !go.dead);
```

**Co filtr dělá:**
- Vytváří nový seznam pouze s „živými“ objekty
- Odstraňuje všechny označené jako mrtvé
- Zajišťuje plynulý chod hry
- Zabraňuje zahlcení paměti hromaděním zničených objektů

## Implementace laserových mechanik

Laserové střely ve hrách fungují na stejném principu jako fotonová torpéda ve Star Treku – jsou to samostatné objekty, které letí po přímce, dokud něčeho nedosáhnou. Každé stisknutí mezerníku vytváří nový laserový objekt pohybující se po obrazovce.

Aby to fungovalo, musíme koordinovat několik částí:

**Klíčové komponenty implementace:**
- **Vytvořit** laserové objekty vycházející z pozice hrdiny
- **Zpracovat** vstup z klávesnice pro spuštění vytváření laseru
- **Řídit** pohyb a životní cyklus laseru
- **Implementovat** vizuální podobu laserových střel

## Implementace kontroly rychlosti střelby

Neomezená rychlost střelby by zahltila herní engine a hru učinila příliš jednoduchou. Skutečné zbraňové systémy čelí podobným omezením – i phasery USS Enterprise potřebovaly čas na dobití mezi výstřely.

Implementujeme systém ochlazování (cooldown), který zabrání rychlému střílení, a přitom zachová citlivost ovládání:

```mermaid
sequenceDiagram
    participant Player
    participant Weapon
    participant Cooldown
    participant Game
    
    Player->>Weapon: Stiskni mezerník
    Weapon->>Cooldown: Zkontroluj, zda je připraveno
    
    alt Zbraň je připravená
        Cooldown->>Weapon: cool = pravda
        Weapon->>Game: Vytvořit laser
        Weapon->>Cooldown: Spustit nové ochlazení
        Cooldown->>Cooldown: cool = nepravda
        
        Note over Cooldown: Počkej 500 ms
        
        Cooldown->>Cooldown: cool = pravda
    else Zbraň se chladí
        Cooldown->>Weapon: cool = nepravda
        Weapon->>Player: Žádná akce
    end
```
```javascript
class Cooldown {
  constructor(time) {
    this.cool = false;
    setTimeout(() => {
      this.cool = true;
    }, time);
  }
}

class Weapon {
  constructor() {
    this.cooldown = null;
  }
  
  fire() {
    if (!this.cooldown || this.cooldown.cool) {
      // Vytvořit laserový projektil
      this.cooldown = new Cooldown(500);
    } else {
      // Zbraň se stále ochlazuje
    }
  }
}
```

**Jak cooldown funguje:**
- Při vytvoření je zbraň „horká“ (ještě nemůže střílet)
- Po vypršení času se stává „studenou“ (připravenou střílet)
- Před výstřelem kontrolujeme: „Je zbraň studená?“
- To zabraňuje spamování, ale udržuje ovládání citlivé

✅ Připomeňte si lekci 1 ze série vesmírných her o cooldownu.

## Stavba systému detekce kolizí

Rozšíříte svůj stávající kód vesmírné hry o systém detekce kolizí. Podobně jako automatizovaný systém vyhýbání kolizím na Mezinárodní vesmírné stanici bude vaše hra kontinuálně sledovat pozice objektů a reagovat na průniky.

Na základě kódu z minulé lekce přidáte detekci kolizí s konkrétními pravidly, která řídí interakce objektů.

> 💡 **Tip pro profíky**: Laserový sprite je již součástí vaší složky assets a v kódu je připraven k použití.

### Pravidla kolizí k implementaci

**Herní mechaniky k přidání:**
1. **Laser zasáhne nepřítele**: Nepřítel je zničen při zásahu laserem
2. **Laser zasáhne hranici obrazovky**: Laser je odstraněn při dosažení horního okraje obrazovky
3. **Kolize nepřítele a hrdiny**: Oba objekty jsou zničeny při průniku
4. **Nepřítel dosáhne spodku**: Stav „konec hry“ při dosažení spodní části obrazovky nepřáteli

### 🔄 **Pedagogická kontrola**
**Základy detekce kolizí**: Před implementací zkontrolujte, že rozumíte:
- ✅ Jak hranice obdélníků definují oblasti kolizí
- ✅ Proč je test separace efektivnější než výpočet průniku
- ✅ Význam správy životního cyklu objektů v herní smyčce
- ✅ Jak událostmi řízené systémy koordinují reakce na kolize

**Rychlý autotest**: Co by se stalo, kdybyste objekty mazali okamžitě místo označení?
*Odpověď: Mazání uprostřed smyčky by mohlo způsobit pády nebo přeskočení některých objektů při iteraci*

**Fyzikální pochopení**: Nyní rozumíte:
- **Souřadnicové systémy**: Jak pozice a rozměry určují hranice
- **Logika průniku**: Matematické principy detekce kolizí
- **Optimalizace výkonu**: Proč jsou efektivní algoritmy důležité v reálném čase
- **Správa paměti**: Bezpečné vzory životního cyklu objektů pro stabilitu

## Nastavení vývojového prostředí

Dobrá zpráva – většinu základů jsme už pro vás připravili! Všechny herní zdroje a základní struktura čekají ve složce `your-work`, připravené pro přidání skvělých funkcí kolizí.

### Struktura projektu

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

**Co obsahuje struktura souborů:**
- **Obsahuje** všechny obrázky sprite používané pro herní objekty
- **Zahrnuje** hlavní HTML dokument a JavaScript aplikaci
- **Poskytuje** konfiguraci balíčku pro lokální vývojový server

### Spuštění vývojového serveru

Přejděte do složky projektu a spusťte lokální server:

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

**Tento příkaz:**
- **Změní** adresář na váš pracovní projekt
- **Spustí** lokální HTTP server na adrese `http://localhost:5000`
- **Poskytne** herní soubory k testování a vývoji
- **Umožní** živý vývoj s automatickým přenačtením stránky

Otevřete prohlížeč a přejděte na `http://localhost:5000`, kde uvidíte aktuální stav hry s vykresleným hrdinou a nepřáteli.

### Krok za krokem implementace

Podobně systematicky jako NASA programovala kosmickou loď Voyager, implementujeme detekci kolizí postupně, po jednotlivých částech.

```mermaid
flowchart TD
    A["1. Obvod obdélníku"] --> B["2. Detekce průniku"]
    B --> C["3. Laserový systém"]
    C --> D["4. Zpracování událostí"]
    D --> E["5. Pravidla kolizí"]
    E --> F["6. Systém cooldownu"]
    
    G["Hranice objektů"] --> A
    H["Fyzikální algoritmus"] --> B
    I["Vytváření projektilů"] --> C
    J["Vstup z klávesnice"] --> D
    K["Herní logika"] --> E
    L["Omezení rychlosti"] --> 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
```
#### 1. Přidejte hranice obdélníkových kolizí

Nejprve naučíme hry objekty, jak popsat své hranice. Přidejte tuto metodu do třídy `GameObject`:

```javascript
rectFromGameObject() {
    return {
      top: this.y,
      left: this.x,
      bottom: this.y + this.height,
      right: this.x + this.width,
    };
  }
```

**Tato metoda:**
- **Vytvoří** obdélníkový objekt s přesnými hranicemi
- **Spočítá** spodní a pravý okraj podle pozice + rozměrů
- **Vrátí** objekt připravený na algoritmy detekce kolizí
- **Poskytne** jednotné rozhraní pro všechny herní objekty

#### 2. Implementujte detekci průniku

Teď vytvoříme detektiva kolizí – funkci, která rozpozná, kdy se dva obdélníky překrývají:

```javascript
function intersectRect(r1, r2) {
  return !(
    r2.left > r1.right ||
    r2.right < r1.left ||
    r2.top > r1.bottom ||
    r2.bottom < r1.top
  );
}
```

**Algoritmus:**
- **Testuje** čtyři separační podmínky mezi obdélníky
- **Vrací** `false` pokud je některá podmínka oddělení splněna
- **Signalizuje** kolizi, pokud není oddělení
- **Používá** negaci pro efektivní test průniku

#### 3. Implementujte systém hromadné střelby laserem

Teď to bude zábava! Nastavíme systém střelby laserem.

##### Konstanty zpráv

Nejprve definujeme typy zpráv, aby části hry mohly mezi sebou komunikovat:

```javascript
KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
```

**Tyto konstanty:**
- **Standardizují** názvy událostí v celé aplikaci
- **Umožňují** konzistentní komunikaci mezi systémy hry
- **Zabraňují** překlepům při registraci ovladačů událostí

##### Zpracování klávesnice

Přidejte detekci mezerníku do posluchače kláves:

```javascript
} else if(evt.keyCode === 32) {
  eventEmitter.emit(Messages.KEY_EVENT_SPACE);
}
```

**Tento handler:**
- **Zachycuje** stisk mezerníku pomocí keyCode 32
- **Vysílá** standardizovanou událost
- **Umožňuje** oddělení logiky střelby

##### Nastavení posluchače událostí

Zaregistrujte chování střelby ve funkci `initGame()`:

```javascript
eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
 if (hero.canFire()) {
   hero.fire();
 }
});
```

**Tento posluchač:**
- **Reaguje** na události mezerníku
- **Kontroluje** stav cooldownu střelby
- **Spouští** vytvoření laseru, když je dovoleno

Přidejte zpracování kolizí laser-nepřítel:

```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
  first.dead = true;
  second.dead = true;
});
```

**Tento handler kolizí:**
- **Přijímá** data o kolizi s oběma objekty
- **Označuje** oba objekty k odstranění
- **Zajišťuje** správné vyčištění po kolizi

#### 4. Vytvořte třídu Laser

Implementujte laserovou střelu, která se pohybuje nahoru a spravuje svůj životní cyklus:

```javascript
class Laser extends GameObject {
  constructor(x, y) {
    super(x, y);
    this.width = 9;
    this.height = 33;
    this.type = 'Laser';
    this.img = laserImg;
    
    let id = setInterval(() => {
      if (this.y > 0) {
        this.y -= 15;
      } else {
        this.dead = true;
        clearInterval(id);
      }
    }, 100);
  }
}
```

**Implementace této třídy:**
- **Dědí** z GameObject a získává základní funkce
- **Nastavuje** vhodné rozměry laserového sprite
- **Vytváří** automatický pohyb nahoru pomocí `setInterval()`
- **Řeší** samodestrukci po dosažení horního okraje obrazovky
- **Řídí** časování animace a čištění

#### 5. Implementujte systém detekce kolizí

Vytvořte komplexní funkci pro detekci kolizí:

```javascript
function updateGameObjects() {
  const enemies = gameObjects.filter(go => go.type === 'Enemy');
  const lasers = gameObjects.filter(go => go.type === "Laser");
  
  // Test kolizí laser-voják
  lasers.forEach((laser) => {
    enemies.forEach((enemy) => {
      if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) {
        eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
          first: laser,
          second: enemy,
        });
      }
    });
  });

  // Odstranit zničené objekty
  gameObjects = gameObjects.filter(go => !go.dead);
}
```

**Tento systém:**
- **Filtruje** herní objekty podle typu pro efektivní kontrolu
- **Testuje** každý laser proti každému nepříteli na průnik
- **Vysílá** události kolize při detekci průniku
- **Čistí** zničené objekty po zpracování kolizí

> ⚠️ **Důležité**: Přidejte `updateGameObjects()` do hlavní smyčky hry ve `window.onload`, aby byla detekce kolizí aktivní.

#### 6. Přidejte cooldown systém do třídy Hero

Vylepšete třídu Hero o střelbu a omezení rychlosti:

```javascript
class Hero extends GameObject {
  constructor(x, y) {
    super(x, y);
    this.width = 99;
    this.height = 75;
    this.type = "Hero";
    this.speed = { x: 0, y: 0 };
    this.cooldown = 0;
  }
  
  fire() {
    gameObjects.push(new Laser(this.x + 45, this.y - 10));
    this.cooldown = 500;

    let id = setInterval(() => {
      if (this.cooldown > 0) {
        this.cooldown -= 100;
      } else {
        clearInterval(id);
      }
    }, 200);
  }
  
  canFire() {
    return this.cooldown === 0;
  }
}
```

**Rozšířená třída Hero:**
- **Inicializuje** cooldown timer na nule (připraveno ke střelbě)
- **Vytváří** laserové objekty umístěné nad lodí hrdiny
- **Nastavuje** dobu cooldownu pro omezení rychlosti střelby
- **Snižuje** cooldown pomocí intervalových aktualizací
- **Poskytuje** metodu `canFire()` pro kontrolu připravenosti ke střelbě

### 🔄 **Pedagogická kontrola**
**Úplné pochopení systému**: Zkontrolujte svoji znalost detekce kolizí:
- ✅ Jak hranice obdélníků umožňují efektivní detekci kolizí?
- ✅ Proč je správa životního cyklu objektů klíčová pro stabilitu hry?
- ✅ Jak systém cooldownu zabraňuje problémům s výkonem?
- ✅ Jakou roli hraje architektura založená na událostech při zpracování kolizí?

**Integrace systému**: Vaše detekce kolizí demonstruje:
- **Matematickou přesnost**: Algoritmy průniku obdélníků
- **Optimalizaci výkonu**: Efektivní vzory testování kolizí
- **Správu paměti**: Bezpečné vytváření a mazání objektů
- **Koordinaci událostí**: Oddělenou komunikaci systémů
- **Zpracování v reálném čase**: Aktualizace založené na snímcích

**Profesionální vzory**: Implementovali jste:
- **Oddělení odpovědností**: Fyzika, vykreslování a vstup odděleny
- **Objektově orientovaný design**: Dědičnost a polymorfismus
- **Správu stavů**: Životní cyklus objektů a sledování stavu hry
- **Optimalizaci výkonu**: Efektivní algoritmy pro použití v reálném čase

### Testování implementace

Vaše vesmírná hra nyní obsahuje kompletní detekci kolizí a bojové mechaniky. 🚀 Otestujte nové funkce:
- **Ovládejte** pohyb pomocí šipek
- **Střílejte lasery** mezerníkem – všimněte si, jak cooldown zabraňuje spamu
- **Sledujte kolize** laserů s nepřáteli, které vyvolávají odstranění
- **Ověřte** čištění, kdy zničené objekty mizí ze hry

Úspěšně jste implementovali systém detekce kolizí pomocí stejných matematických principů, které používají navigace kosmických lodí a robotika.

### ⚡ **Co můžete udělat během příštích 5 minut**
- [ ] Otevřete si vývojářské nástroje prohlížeče a nastavte breakpointy ve funkci pro detekci kolizí
- [ ] Vyzkoušejte změnit rychlost laseru nebo pohyb nepřátel a pozorujte efekty kolizí
- [ ] Experimentujte s různými hodnotami cooldownu a testujte rychlost střelby
- [ ] Přidejte příkazy `console.log` pro sledování kolizí v reálném čase

### 🎯 **Co můžete během této hodiny zvládnout**
- [ ] Dokončit kvíz po lekci a pochopit algoritmy detekce kolizí
- [ ] Přidat vizuální efekty jako výbuchy při kolizích
- [ ] Implementovat různé typy projektilů s různými vlastnostmi
- [ ] Vytvořit power-upy, které dočasně posílí schopnosti hráče
- [ ] Přidat zvukové efekty, aby byly kolize uspokojivější

### 📅 **Váš týdenní programování fyziky**
- [ ] Dokončit kompletní vesmírnou hru s vylepšenými kolizními systémy
- [ ] Implementovat pokročilé kolizní tvary nad rámec obdélníků (kruhy, mnohoúhelníky)
- [ ] Přidat částicové systémy pro realistické efekty výbuchů
- [ ] Vytvořit složité chování nepřátel s vyhýbáním kolizím
- [ ] Optimalizovat detekci kolizí pro lepší výkon při mnoha objektech
- [ ] Přidat simulaci fyzikálních veličin jako hybnost a realistický pohyb

### 🌟 **Váš měsíční mistr fyziky her**
- [ ] Stavět hry s pokročilými fyzikálními enginy a realistickými simulacemi
- [ ] Naučit se 3D detekci kolizí a algoritmy prostorového dělení
- [ ] Přispívat do open source fyzikálních knihoven a herních enginů
- [ ] Ovládnout optimalizaci výkonu pro graficky náročné aplikace
- [ ] Vytvářet vzdělávací obsah o herní fyzice a detekci kolizí
- [ ] Budovat portfolio demonstrující pokročilé programování fyziky

## 🎯 Váš časový plán ovládnutí detekce kolizí

```mermaid
timeline
    title Pokrok ve výuce detekce kolizí a herní fyziky
    
    section Základy (10 minut)
        Rectangle Math: Souřadnicové systémy
                      : Výpočty hranic
                      : Sledování pozice
                      : Správa rozměrů
        
    section Návrh algoritmu (20 minut)
        Intersection Logic: Testování oddělení
                          : Detekce překryvu
                          : Optimalizace výkonu
                          : Řešení okrajových případů
        
    section Implementace hry (30 minut)
        Object Systems: Správa životního cyklu
                      : Koordinace událostí
                      : Sledování stavů
                      : Úklid paměti
        
    section Interaktivní funkce (40 minut)
        Combat Mechanics: Systémy projektilů
                        : Časy na znovupoužití zbraní
                        : Výpočet poškození
                        : Vizuální zpětná vazba
        
    section Pokročilá fyzika (50 minut)
        Real-time Systems: Optimalizace snímkové frekvence
                         : Prostorové dělení
                         : Reakce na kolize
                         : Simulace fyziky
        
    section Profesionální techniky (1 týden)
        Game Engine Concepts: Systémy komponent
                             : Fyzikální pipeline
                             : Profilování výkonu
                             : Optimalizace pro různé platformy
        
    section Průmyslové aplikace (1 měsíc)
        Production Skills: Optimalizace ve velkém měřítku
                         : Týmová spolupráce
                         : Vývoj enginu
                         : Nasazení na platformy
```
### 🛠️ Shrnutí vašeho herního fyzikálního nástroje

Po absolvování této lekce ovládáte:
- **Matematiku kolizí**: Algoritmy průniku obdélníků a souřadnicové systémy
- **Optimalizaci výkonu**: Efektivní detekci kolizí pro realtime aplikace
- **Správu životního cyklu objektů**: Bezpečné vytváření, aktualizace a destrukce
- **Architekturu řízenou událostmi**: Oddělené systémy pro reakce na kolize
- **Integraci do herní smyčky**: Aktualizace fyziky a koordinace vykreslování po snímcích
- **Vstupní systémy**: Reagující ovládání s omezením frekvence a zpětnou vazbou
- **Správu paměti**: Efektivní poolování objektů a strategie čištění

**Reálné použití**: Vaše dovednosti detekce kolizí najdou uplatnění v:
- **Interaktivních simulacích**: Vědecké modelování a vzdělávací nástroje
- **Návrhu uživatelského rozhraní**: Drag-and-drop interakce a detekce dotyku
- **Vizualizaci dat**: Interaktivní grafy a klikatelné prvky
- **Mobilním vývoji**: Rozpoznávání dotykových gest a řešení kolizí
- **Programování robotiky**: Plánování cest a vyhýbání překážkám
- **Počítačové grafice**: Ray tracing a prostorové algoritmy

**Profesní dovednosti získané**: Nyní umíte:
- **Navrhovat** efektivní algoritmy pro realtime detekci kolizí
- **Implementovat** fyzikální systémy škálující s komplexitou objektů
- **Ladit** složité interakční systémy pomocí matematických principů
- **Optimalizovat** výkon pro různé hardware a schopnosti prohlížečů
- **Architektovat** udržovatelné herní systémy využitím osvědčených návrhových vzorů

**Ovládnuté herní koncepty**:
- **Simulace fyziky**: Realtime detekce a reakce na kolize
- **Výkonnostní inženýrství**: Optimalizované algoritmy pro interaktivní aplikace
- **Systémy událostí**: Oddělená komunikace mezi herními komponentami
- **Správa objektů**: Efektivní životní cyklus dynamického obsahu
- **Zpracování vstupu**: Reagující ovládání s odpovídající zpětnou vazbou

**Další krok**: Jste připraveni prozkoumat pokročilé fyzikální enginy jako Matter.js, implementovat 3D detekci kolizí nebo vytvářet složité částicové systémy!

🌟 **Ocenění dosaženo**: Vybudovali jste kompletní systém interakce založený na fyzice s profesionální detekcí kolizí!

## Výzva GitHub Copilot Agent 🚀

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

**Popis:** Vylepšete systém detekce kolizí implementací power-upů, které náhodně vznikají a poskytují dočasné schopnosti po sebrání hrdinou.

**Úkol:** Vytvořte třídu PowerUp, která rozšiřuje GameObject, a implementujte detekci kolizí mezi hrdinou a power-upy. Přidejte alespoň dva typy power-upů: jeden zvyšující rychlost střelby (zkracující cooldown) a druhý vytvářející dočasný štít. Zahrňte logiku spawnování, která vytváří power-upy v náhodných intervalech a pozicích.

---



## 🚀 Výzva

Přidejte explozi! Podívejte se na herní zdroje v [repozitáři Space Art](../../../../6-space-game/solution/spaceArt/readme.txt) a zkuste přidat explozi, když laser zasáhne mimozemšťana

## Kvíz po přednášce

[Kvíz po přednášce](https://ff-quizzes.netlify.app/web/quiz/36)

## Revize a samostudium

Experimentujte s intervaly ve vaší hře dosud. Co se stane, když je změníte? Přečtěte si více o [JavaScript časovacích událostech](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).

## Zadání

[Prozkoumejte kolize](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). Přestože usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro zásadní informace se doporučuje profesionální lidský překlad. Nejsme odpovědní za jakékoli nedorozumění nebo mylné výklady vyplývající z použití tohoto překladu.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->