|
|
# Vytvorte vesmírnu hru Časť 4: Pridanie lasera a detekcia kolízií
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title Vaša cesta detekcie kolízií
|
|
|
section Základy fyziky
|
|
|
Pochopiť obdĺžniky: 3: Študent
|
|
|
Naučiť sa matematiku prieniku: 4: Študent
|
|
|
Pochopiť súradnicové systémy: 4: Študent
|
|
|
section Herná mechanika
|
|
|
Implementovať paľbu laserom: 4: Študent
|
|
|
Pridať životný cyklus objektu: 5: Študent
|
|
|
Vytvoriť pravidlá kolízií: 5: Študent
|
|
|
section Integrácia systému
|
|
|
Vytvoriť detekciu kolízií: 5: Študent
|
|
|
Optimalizovať výkon: 5: Študent
|
|
|
Otestovať interakčné systémy: 5: Študent
|
|
|
```
|
|
|
## Kvíz pred prednáškou
|
|
|
|
|
|
[Kvíz pred prednáškou](https://ff-quizzes.netlify.app/web/quiz/35)
|
|
|
|
|
|
Premyslite si moment zo Star Wars, keď Lukeove protónové torpéda zasiahli výfukový port Hviezdy smrti. Táto presná detekcia kolízie zmenila osud galaxie! V hrách funguje detekcia kolízií rovnako - určuje, kedy objekty interagujú a čo sa stane ďalej.
|
|
|
|
|
|
V tejto lekcii pridáte laserové zbrane do svojej vesmírnej hry a implementujete detekciu kolízií. Rovnako ako plánovači misií NASA počítajú dráhy kozmických lodí na vyhýbanie sa úlomkom, naučíte sa detegovať, kedy sa herné objekty pretínajú. Rozdelíme si to na zvládnuteľné kroky, ktoré na seba nadväzujú.
|
|
|
|
|
|
Na konci budete mať funkčný bojový systém, kde lasery ničia nepriateľov a kolízie spúšťajú herné udalosti. Tie isté princípy kolízií sa používajú od fyzikálnych simulácií po interaktívne webové rozhrania.
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((Detekcia kolízie))
|
|
|
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
|
|
|
```
|
|
|
✅ Urobte si malý prieskum o úplne prvej počítačovej hre kedy napísanej. Aká bola jej funkčnosť?
|
|
|
|
|
|
## Detekcia kolízií
|
|
|
|
|
|
Detekcia kolízií funguje ako senzory blízkosti na lunárnom module Apollo - neustále kontrolujú vzdialenosti a spúšťajú varovania, keď sú objekty príliš blízko. V hrách tento systém určuje, kedy objekty interagujú a čo by sa malo stať ďalej.
|
|
|
|
|
|
Prístup, ktorý použijeme, považuje každý herný objekt za obdĺžnik, podobne ako systémy riadenia letovej prevádzky používajú zjednodušené geometrické tvary na sledovanie lietadiel. Táto obdĺžniková metóda môže vyzerať jednoducho, ale je výpočtovo efektívna a funguje dobre pre väčšinu herných scénárov.
|
|
|
|
|
|
### Reprezentácia obdĺžnika
|
|
|
|
|
|
Každý herný objekt potrebuje súradnicové hranice, podobne ako rover Mars Pathfinder mapoval svoju polohu na povrchu Marsu. Takto definujeme tieto hranice:
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A["🎯 Herný Objekt"] --> B["📍 Poloha (x, y)"]
|
|
|
A --> C["📏 Rozmery (šírka, výška)"]
|
|
|
|
|
|
B --> D["Hore: y"]
|
|
|
B --> E["Vľavo: x"]
|
|
|
|
|
|
C --> F["Dole: y + výška"]
|
|
|
C --> G["Vpravo: x + šírka"]
|
|
|
|
|
|
D --> H["🔲 Obrys Obdĺžnika"]
|
|
|
E --> H
|
|
|
F --> H
|
|
|
G --> H
|
|
|
|
|
|
H --> I["Pripravené na Detekciu Kolízie"]
|
|
|
|
|
|
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
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Rozoberme si to:**
|
|
|
- **Horný okraj**: To je presne miesto, kde váš objekt začína vertikálne (jeho y pozícia)
|
|
|
- **Ľavý okraj**: Kde začína horizontálne (jeho x pozícia)
|
|
|
- **Dolný okraj**: Pridajte výšku k y pozícii – teraz viete, kde končí!
|
|
|
- **Pravý okraj**: Pridajte šírku k x pozícii – a máte kompletné hranice
|
|
|
|
|
|
### Algoritmus prieniku
|
|
|
|
|
|
Detekcia prieniku obdĺžnikov používa logiku podobnú tomu, ako Hubblov vesmírny teleskop zisťuje, či sa nebeské objekty prekrývajú vo svojom zornom poli. Algoritmus kontroluje separáciu:
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A["Obdĺžnik 1"] --> B{"Testy oddelenia"}
|
|
|
C["Obdĺžnik 2"] --> B
|
|
|
|
|
|
B --> D["Ľavý R2 > pravý R1?"]
|
|
|
B --> E["Pravý R2 < ľavý R1?"]
|
|
|
B --> F["Horný R2 > dolný R1?"]
|
|
|
B --> G["Dolný R2 < horný R1?"]
|
|
|
|
|
|
D --> H{"Niečo pravda?"}
|
|
|
E --> H
|
|
|
F --> H
|
|
|
G --> H
|
|
|
|
|
|
H -->|Áno| I["❌ Žiadna kolízia"]
|
|
|
H -->|Nie| J["✅ Kolízia zistená"]
|
|
|
|
|
|
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 separácie funguje ako radarové systémy:**
|
|
|
- Je obdĺžnik 2 úplne napravo od obdĺžnika 1?
|
|
|
- Je obdĺžnik 2 úplne naľavo od obdĺžnika 1?
|
|
|
- Je obdĺžnik 2 úplne pod obdĺžnikom 1?
|
|
|
- Je obdĺžnik 2 úplne nad obdĺžnikom 1?
|
|
|
|
|
|
Ak žiadna z týchto podmienok nie je pravdivá, obdĺžniky sa musia prekrývať. Tento prístup odráža spôsob, akým radaroví operátori určujú, či sú dve lietadlá v bezpečných vzdialenostiach.
|
|
|
|
|
|
## Správa životného cyklu objektov
|
|
|
|
|
|
Keď laser zasiahne nepriateľa, oba objekty musia byť z hry odstránené. Avšak mazať objekty počas slučky môže spôsobiť pády – lekcia naučená tvrdo v raných počítačových systémoch ako Apollo Guidance Computer. Namiesto toho používame prístup „označiť na vymazanie“, ktorý bezpečne odstráni objekty medzi snímkami.
|
|
|
|
|
|
```mermaid
|
|
|
stateDiagram-v2
|
|
|
[*] --> Active: Objekt vytvorený
|
|
|
Active --> Collided: Detekovaná kolízia
|
|
|
Collided --> MarkedDead: Nastaviť dead = true
|
|
|
MarkedDead --> Filtered: Ďalší snímok
|
|
|
Filtered --> [*]: Objekt odstránený
|
|
|
|
|
|
Active --> OutOfBounds: Opúšťa obrazovku
|
|
|
OutOfBounds --> MarkedDead
|
|
|
|
|
|
note right of MarkedDead
|
|
|
Bezpečné pokračovať
|
|
|
aktuálny snímok
|
|
|
end note
|
|
|
|
|
|
note right of Filtered
|
|
|
Objekty odstránené
|
|
|
medzi snímkami
|
|
|
end note
|
|
|
```
|
|
|
Takto označíme niečo na odstránenie:
|
|
|
|
|
|
```javascript
|
|
|
// Označiť objekt na odstránenie
|
|
|
enemy.dead = true;
|
|
|
```
|
|
|
|
|
|
**Prečo tento prístup funguje:**
|
|
|
- Označíme objekt ako „mŕtvy“, ale hneď ho nemažeme
|
|
|
- Toto umožní bezpečný dokončenie aktuálneho herného rámca
|
|
|
- Žiadne pády z pokusu použiť niečo, čo už neexistuje!
|
|
|
|
|
|
Potom pred ďalším vykresľovacím cyklom odfiltrujeme označené objekty:
|
|
|
|
|
|
```javascript
|
|
|
gameObjects = gameObjects.filter(go => !go.dead);
|
|
|
```
|
|
|
|
|
|
**Toto filtrovanie robí:**
|
|
|
- Vytvorí nový zoznam iba so „živými“ objektmi
|
|
|
- Vyhodí všetko označené ako mŕtve
|
|
|
- Udržiava plynulý chod hry
|
|
|
- Zabraňuje hromadeniu zničených objektov a zbytočnému využívaniu pamäte
|
|
|
|
|
|
## Implementácia mechaniky lasera
|
|
|
|
|
|
Laserové projektily v hrách fungujú na rovnakom princípe ako fotónové torpéda v Star Treku – sú to samostatné objekty, ktoré sa pohybujú po priamych líniách, kým niečo nezasiahnu. Každé stlačenie medzerníka vytvorí nový laserový objekt, ktorý sa pohybuje cez obrazovku.
|
|
|
|
|
|
Aby to fungovalo, potrebujeme koordinovať niekoľko rôznych častí:
|
|
|
|
|
|
**Kľúčové komponenty na implementáciu:**
|
|
|
- **Vytvoriť** laserové objekty, ktoré sa vyskytujú na pozícii hrdinu
|
|
|
- **Spracovať** vstup z klávesnice na spustenie vytvorenia lasera
|
|
|
- **Spravovať** pohyb lasera a jeho životný cyklus
|
|
|
- **Implementovať** vizuálne zobrazenie laserových projektilov
|
|
|
|
|
|
## Implementácia kontroly rýchlosti streľby
|
|
|
|
|
|
Neobmedzená rýchlosť streľby by preťažila herný engine a spravila by hru príliš jednoduchou. Skutočné zbrane čelia podobným obmedzeniam – dokonca aj fázery USS Enterprise potrebovali čas na dobitie medzi výstrelmi.
|
|
|
|
|
|
Implementujeme systém chladenia, ktorý zabráni spamovaniu rýchlej streľby a zároveň udržuje citlivé ovládanie:
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
participant Player
|
|
|
participant Weapon
|
|
|
participant Cooldown
|
|
|
participant Game
|
|
|
|
|
|
Player->>Weapon: Stlač medzerník
|
|
|
Weapon->>Cooldown: Skontroluj, či je pripravené
|
|
|
|
|
|
alt Zbraň je pripravená
|
|
|
Cooldown->>Weapon: pripravené = pravda
|
|
|
Weapon->>Game: Vytvor laser
|
|
|
Weapon->>Cooldown: Spusti nový časovač
|
|
|
Cooldown->>Cooldown: pripravené = nepravda
|
|
|
|
|
|
Note over Cooldown: Čakaj 500 ms
|
|
|
|
|
|
Cooldown->>Cooldown: pripravené = pravda
|
|
|
else Zbraň je v ochladzovaní
|
|
|
Cooldown->>Weapon: pripravené = nepravda
|
|
|
Weapon->>Player: Žiadna akcia
|
|
|
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) {
|
|
|
// Vytvorte laserový projektil
|
|
|
this.cooldown = new Cooldown(500);
|
|
|
} else {
|
|
|
// Zbraň sa stále ochladzuje
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Ako chladenie funguje:**
|
|
|
- Keď je zbraň vytvorená, začína ako „horúca“ (ešte nemôže strieľať)
|
|
|
- Po uplynutí časového limitu sa stane „studenou“ (pripravená strieľať)
|
|
|
- Pred streľbou overíme: „Je zbraň studená?“
|
|
|
- Toto zabraňuje spamovaniu kliknutí a zároveň zachováva rýchlu odozvu
|
|
|
|
|
|
✅ Odporúčame si pripomenúť lekciu 1 zo série vesmírnych hier o cooldownoch.
|
|
|
|
|
|
## Vytvorenie systému detekcie kolízií
|
|
|
|
|
|
Rozšírte svoj existujúci kód vesmírnej hry o systém detekcie kolízií. Rovnako ako Medzinárodná vesmírna stanica má automatizovaný systém vyhýbania sa kolíziám, vaša hra bude neustále sledovať polohy objektov a reagovať na ich prieniky.
|
|
|
|
|
|
Na základe kódu z predchádzajúcej lekcie pridáte detekciu kolízií so špecifickými pravidlami riadiacimi interakcie objektov.
|
|
|
|
|
|
> 💡 **Profesionálny tip**: Sprite lasera už máte v zložke s aktívami a je odkazovaný vo vašom kóde, pripravený na použitie.
|
|
|
|
|
|
### Pravidlá kolízií na implementáciu
|
|
|
|
|
|
**Pridajte tieto herné mechaniky:**
|
|
|
1. **Laser zasiahne nepriateľa**: Objekt nepriateľa je zničený, keď ho zasiahne laserový projektil.
|
|
|
2. **Laser zasiahne hranicu obrazovky**: Laser sa odstráni, keď dosiahne horný okraj obrazovky.
|
|
|
3. **Kolízia nepriateľa a hrdinu**: Obe objekty sú zničené, keď sa pretínajú.
|
|
|
4. **Nepriateľ dosiahne spodok**: Stav „koniec hry“, keď nepriatelia dosiahnu spodok obrazovky.
|
|
|
|
|
|
### 🔄 **Pedagogická kontrola**
|
|
|
**Základy detekcie kolízií:** Pred implementáciou si overte:
|
|
|
- ✅ Ako hranice obdĺžnika definujú kolízne zóny
|
|
|
- ✅ Prečo je test separácie efektívnejší než výpočet prieniku
|
|
|
- ✅ Význam správy životného cyklu objektov v herných slučkách
|
|
|
- ✅ Ako systém riadený udalosťami koordinuje odpovede na kolízie
|
|
|
|
|
|
**Rýchly samo-test:** Čo by sa stalo, ak by ste objekty vymazali hneď namiesto ich označenia?
|
|
|
*Odpoveď: Vymazanie počas slučky by mohlo spôsobiť pády alebo preskočenie objektov v iterácii.*
|
|
|
|
|
|
**Pochopenie fyziky:** Teraz ovládate:
|
|
|
- **Súradnicové systémy:** Ako poloha a rozmery vytvárajú hranice
|
|
|
- **Logiku prieniku:** Matematické princípy detekcie kolízií
|
|
|
- **Optimalizáciu výkonu:** Prečo sú efektívne algoritmy dôležité v reálnom čase
|
|
|
- **Správu pamäte:** Bezpečné vzory životného cyklu objektov pre stabilitu
|
|
|
|
|
|
## Nastavenie vývojového prostredia
|
|
|
|
|
|
Dobré správy – veľkú časť prípravy sme už urobili za vás! Všetky herné aktíva a základná štruktúra čakajú v podadresári `your-work`, pripravené na pridanie skvelých funkcií detekcie kolízií.
|
|
|
|
|
|
### Štruktúra projektu
|
|
|
|
|
|
```bash
|
|
|
-| assets
|
|
|
-| enemyShip.png
|
|
|
-| player.png
|
|
|
-| laserRed.png
|
|
|
-| index.html
|
|
|
-| app.js
|
|
|
-| package.json
|
|
|
```
|
|
|
|
|
|
**Pochopenie štruktúry súborov:**
|
|
|
- **Obsahuje** všetky obrázky sprite potrebné pre herné objekty
|
|
|
- **Zahŕňa** hlavný HTML dokument a súbor JavaScript aplikácie
|
|
|
- **Poskytuje** konfiguráciu balíka pre lokálny vývojový server
|
|
|
|
|
|
### Spustenie vývojového servera
|
|
|
|
|
|
Prejdite do svojho projektu a spustite lokálny server:
|
|
|
|
|
|
```bash
|
|
|
cd your-work
|
|
|
npm start
|
|
|
```
|
|
|
|
|
|
**Tento príkaz:**
|
|
|
- **Zmení** adresár do vášho pracovného projektu
|
|
|
- **Spustí** lokálny HTTP server na `http://localhost:5000`
|
|
|
- **Poskytuje** vaše herné súbory na testovanie a vývoj
|
|
|
- **Umožňuje** živý vývoj s automatickým reloadom
|
|
|
|
|
|
Otvorte si prehliadač a navštívte `http://localhost:5000`, aby ste videli aktuálny stav hry s hrdinom a nepriateľmi na obrazovke.
|
|
|
|
|
|
### Implementácia krok za krokom
|
|
|
|
|
|
Rovnako systémovo, ako NASA programovala kozmickú loď Voyager, implementujeme detekciu kolízií metodicky, krok za krokom.
|
|
|
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A["1. Obmedzenia obdĺžnika"] --> B["2. Detekcia prieniku"]
|
|
|
B --> C["3. Laserový systém"]
|
|
|
C --> D["4. Spracovanie udalostí"]
|
|
|
D --> E["5. Pravidlá kolízií"]
|
|
|
E --> F["6. Systém ochladzovania"]
|
|
|
|
|
|
G["Hranice objektu"] --> A
|
|
|
H["Fyzikálny algoritmus"] --> B
|
|
|
I["Vytváranie projektilov"] --> C
|
|
|
J["Vstup z klávesnice"] --> D
|
|
|
K["Logika hry"] --> E
|
|
|
L["Obmedzenie rýchlosti"] --> 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. Pridajte hranice obdĺžnika pre kolízie
|
|
|
|
|
|
Najprv naučíme herné objekty opisovať svoje hranice. Pridajte túto metódu do svojej triedy `GameObject`:
|
|
|
|
|
|
```javascript
|
|
|
rectFromGameObject() {
|
|
|
return {
|
|
|
top: this.y,
|
|
|
left: this.x,
|
|
|
bottom: this.y + this.height,
|
|
|
right: this.x + this.width,
|
|
|
};
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Táto metóda dosahuje:**
|
|
|
- **Vytvorí** obdĺžnikový objekt s presnými hranicami
|
|
|
- **Spočíta** spodný a pravý okraj pomocou pozície a rozmerov
|
|
|
- **Vracia** objekt pripravený pre algoritmy detekcie kolízií
|
|
|
- **Poskytuje** štandardné rozhranie pre všetky herné objekty
|
|
|
|
|
|
#### 2. Implementujte detekciu prieniku
|
|
|
|
|
|
Teraz vytvorme detektíva kolízií – funkciu, ktorá zistí, kedy sa dva obdĺžniky prekrývajú:
|
|
|
|
|
|
```javascript
|
|
|
function intersectRect(r1, r2) {
|
|
|
return !(
|
|
|
r2.left > r1.right ||
|
|
|
r2.right < r1.left ||
|
|
|
r2.top > r1.bottom ||
|
|
|
r2.bottom < r1.top
|
|
|
);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Tento algoritmus funguje tak, že:**
|
|
|
- **Testuje** štyri podmienky separácie medzi obdĺžnikmi
|
|
|
- **Vracia** `false`, ak je splnená niektorá podmienka separácie
|
|
|
- **Indikuje** kolíziu, keď neexistuje separácia
|
|
|
- **Používa** negáciu pre efektívne testovanie prieniku
|
|
|
|
|
|
#### 3. Implementujte systém streľby laserom
|
|
|
|
|
|
Tu začína zábava! Nastavme systém laserovej streľby.
|
|
|
|
|
|
##### Konštanty správ
|
|
|
|
|
|
Najprv definujme niektoré typy správ, aby si rôzne časti hry mohli medzi sebou rozprávať:
|
|
|
|
|
|
```javascript
|
|
|
KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
|
|
|
COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
|
|
|
COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
|
|
|
```
|
|
|
|
|
|
**Tieto konštanty zabezpečujú:**
|
|
|
- **Štandardizujú** názvy udalostí v celej aplikácii
|
|
|
- **Umožňujú** konzistentnú komunikáciu medzi hernými systémami
|
|
|
- **Zabraňujú** preklepom pri registrácii udalostných handlerov
|
|
|
|
|
|
##### Spracovanie vstupu z klávesnice
|
|
|
|
|
|
Pridajte detekciu stlačenia medzerníka do svojho poslucháča udalostí klávesov:
|
|
|
|
|
|
```javascript
|
|
|
} else if(evt.keyCode === 32) {
|
|
|
eventEmitter.emit(Messages.KEY_EVENT_SPACE);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Tento vstupný handler:**
|
|
|
- **Detekuje** stlačenia medzerníka pomocou keyCode 32
|
|
|
- **Vysiela** štandardizovanú správu udalosti
|
|
|
- **Umožňuje** oddelenú logiku streľby
|
|
|
|
|
|
##### Nastavenie poslucháča udalostí
|
|
|
|
|
|
Zaregistrujte správanie streľby vo funkcii `initGame()`:
|
|
|
|
|
|
```javascript
|
|
|
eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
|
|
|
if (hero.canFire()) {
|
|
|
hero.fire();
|
|
|
}
|
|
|
});
|
|
|
```
|
|
|
|
|
|
**Tento event listener:**
|
|
|
- **Reaguje** na udalosti stlačenia medzerníka
|
|
|
- **Kontroluje** stav cooldownu pri streľbe
|
|
|
- **Spúšťa** vytvorenie lasera, keď je to povolené
|
|
|
|
|
|
Pridajte spracovanie kolízie pre interakcie laser-nepriateľ:
|
|
|
|
|
|
```javascript
|
|
|
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
|
|
first.dead = true;
|
|
|
second.dead = true;
|
|
|
});
|
|
|
```
|
|
|
|
|
|
**Tento handler kolízie:**
|
|
|
- **Prijíma** dáta o kolízii s oboma objekty
|
|
|
- **Označí** oba objekty na odstránenie
|
|
|
- **Zabezpečí** správne vyčistenie po kolízii
|
|
|
|
|
|
#### 4. Vytvorte triedu Laser
|
|
|
|
|
|
Implementujte laserový projektil, ktorý sa pohybuje nahor a spravuje svoj vlastný ž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);
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Táto implementácia triedy:**
|
|
|
- **Rozširuje** GameObject pre dedenie základnej funkcionality
|
|
|
- **Nastavuje** vhodné rozmery pre sprite lasera
|
|
|
- **Vytvára** automatický pohyb nahor pomocou `setInterval()`
|
|
|
- **Spravuje** samodeštrukciu po dosiahnutí horného okraja obrazovky
|
|
|
- **Riadi** svoju animáciu a vyčistenie
|
|
|
|
|
|
#### 5. Implementujte systém detekcie kolízií
|
|
|
|
|
|
Vytvorte komplexnú funkciu detekcie kolízií:
|
|
|
|
|
|
```javascript
|
|
|
function updateGameObjects() {
|
|
|
const enemies = gameObjects.filter(go => go.type === 'Enemy');
|
|
|
const lasers = gameObjects.filter(go => go.type === "Laser");
|
|
|
|
|
|
// Testovanie kolízií laser-hráč
|
|
|
lasers.forEach((laser) => {
|
|
|
enemies.forEach((enemy) => {
|
|
|
if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) {
|
|
|
eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
|
|
|
first: laser,
|
|
|
second: enemy,
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// Odstrániť zničené objekty
|
|
|
gameObjects = gameObjects.filter(go => !go.dead);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Tento systém kolízií:**
|
|
|
- **Filtruje** herné objekty podľa typu pre efektívne testovanie
|
|
|
- **Testuje** každý laser voči každému nepriateľovi na prieniky
|
|
|
- **Vysiela** udalosti kolízie, keď sa detekujú prieniky
|
|
|
- **Čistí** zničené objekty po spracovaní kolízií
|
|
|
|
|
|
> ⚠️ **Dôležité**: Pridajte `updateGameObjects()` do hlavnej hernej slučky v `window.onload` na povolenie detekcie kolízií.
|
|
|
|
|
|
#### 6. Pridajte cooldown systém do triedy Hero
|
|
|
|
|
|
Vylepšite triedu Hero o mechaniku streľby a obmedzenie rýchlosti:
|
|
|
|
|
|
```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;
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Pochopenie vylepšenej triedy Hero:**
|
|
|
- **Inicializuje** cooldown časovač na nulu (pripravený na streľbu)
|
|
|
- **Vytvára** laserové objekty umiestnené nad loďou hrdinu
|
|
|
- **Nastavuje** čas cooldownu na zabránenie rýchlej streľbe
|
|
|
- **Znižuje** cooldown časovač pomocou intervalového updatu
|
|
|
- **Poskytuje** kontrolu stavu streľby cez metódu `canFire()`
|
|
|
|
|
|
### 🔄 **Pedagogická kontrola**
|
|
|
**Kompletné pochopenie systému**: Overte si majstrovstvo v systéme kolízií:
|
|
|
- ✅ Ako hranice obdĺžnika umožňujú efektívnu detekciu kolízií?
|
|
|
- ✅ Prečo je správa životného cyklu objektov kľúčová pre stabilitu hry?
|
|
|
- ✅ Ako systém cooldownu zabraňuje problémom s výkonom?
|
|
|
- ✅ Akú úlohu zohráva architektúra riadená udalosťami v spracovaní kolízií?
|
|
|
|
|
|
**Integrácia systému**: Vaša detekcia kolízií ukazuje:
|
|
|
- **Matematickú presnosť:** Algoritmy prieniku obdĺžnikov
|
|
|
- **Optimalizáciu výkonu:** Efektívne vzory testovania kolízií
|
|
|
- **Správu pamäte:** Bezpečné vytváranie a ničenie objektov
|
|
|
- **Koordináciu udalostí:** Oddelenú komunikáciu systémov
|
|
|
- **Spracovanie v reálnom čase:** Aktualizácie podľa snímok
|
|
|
|
|
|
**Profesionálne vzory**: Implementovali ste:
|
|
|
- **Oddelenie záujmov:** Fyzika, vykresľovanie a vstup oddelené
|
|
|
- **Objektovo-orientovaný dizajn:** Dedenie a polymorfizmus
|
|
|
- **Správu stavu:** Životný cyklus objektov a sledovanie stavu hry
|
|
|
- **Optimalizáciu výkonu:** Efektívne algoritmy pre použitie v reálnom čase
|
|
|
|
|
|
### Testovanie vašej implementácie
|
|
|
|
|
|
Vaša vesmírna hra teraz obsahuje kompletný systém detekcie kolízií a bojovú mechaniku. 🚀 Otestujte tieto nové schopnosti:
|
|
|
- **Pohybujte sa** pomocou šípok pre kontrolu ovládania pohybu
|
|
|
- **Strieľajte lasermi** medzerníkom – všimnite si, ako cooldown zabraňuje spamovaniu
|
|
|
- **Sledujte kolízie**, keď lasery zasiahnu nepriateľov a spustia odstránenie
|
|
|
- **Overte vyčistenie**, keď zničené objekty zmiznú z hry
|
|
|
|
|
|
Úspešne ste implementovali systém detekcie kolízií používajúci tie isté matematické princípy, ktoré riadia navigáciu kozmických lodí a robotiku.
|
|
|
|
|
|
### ⚡ **Čo môžete spraviť v nasledujúcich 5 minútach**
|
|
|
- [ ] Otvorte DevTools v prehliadači a nastavte breakpointy vo funkcii detekcie kolízií
|
|
|
- [ ] Vyskúšajte meniť rýchlosť lasera alebo pohyb nepriateľov a sledujte efekty kolízií
|
|
|
- [ ] Experimentujte s rôznymi hodnotami cooldownu na testovanie rýchlosti streľby
|
|
|
- [ ] Pridajte príkazy `console.log` na sledovanie kolíznych udalostí v reálnom čase
|
|
|
|
|
|
### 🎯 **Čo môžete dosiahnuť počas tejto hodiny**
|
|
|
- [ ] Dokončiť kvíz po lekcii a porozumieť algoritmom detekcie kolízií
|
|
|
- [ ] Pridať vizuálne efekty ako výbuchy pri vzniku kolízií
|
|
|
- [ ] Implementovať rôzne typy projektilov s rôznymi vlastnosťami
|
|
|
- [ ] Vytvoriť power-upy, ktoré dočasne zlepšia schopnosti hráča
|
|
|
- [ ] Pridať zvukové efekty, aby boli kolízie príjemnejšie
|
|
|
|
|
|
### 📅 **Váš týždeň programovania fyziky**
|
|
|
- [ ] Dokončiť kompletnú vesmírnu hru s vyladenými systémami kolízií
|
|
|
- [ ] Implementovať pokročilé tvary kolízií okrem obdĺžnikov (kruhy, polygóny)
|
|
|
- [ ] Pridať systémy častíc pre realistické efekty výbuchov
|
|
|
- [ ] Vytvoriť komplexné správanie nepriateľov s vyhýbaním sa kolíziám
|
|
|
- [ ] Optimalizovať detekciu kolízií pre lepší výkon pri mnohých objektoch
|
|
|
- [ ] Pridať fyzikálnu simuláciu ako hybnosť a realistický pohyb
|
|
|
|
|
|
### 🌟 **Mesiac zvládania hernej fyziky**
|
|
|
- [ ] Postaviť hry s pokročilými fyzikálnymi enginmi a realistickými simuláciami
|
|
|
- [ ] Naučiť sa 3D detekciu kolízií a algoritmy priestorového delenia
|
|
|
- [ ] Prispievať do open source knižníc fyziky a herných enginov
|
|
|
- [ ] Ovládnuť optimalizáciu výkonu pre graficky náročné aplikácie
|
|
|
- [ ] Vytvárať vzdelávací obsah o hernej fyzike a detekcii kolízií
|
|
|
- [ ] Vybudovať portfólio prezentujúce pokročilé programovacie zručnosti vo fyzike
|
|
|
|
|
|
## 🎯 Časová os vašej dokonalosti v detekcii kolízií
|
|
|
|
|
|
```mermaid
|
|
|
timeline
|
|
|
title Progres učenia detekcie kolízií a hernej fyziky
|
|
|
|
|
|
section Základy (10 minút)
|
|
|
Rectangle Math: Súradnicové systémy
|
|
|
: Výpočty hraníc
|
|
|
: Sledovanie pozície
|
|
|
: Správa rozmerov
|
|
|
|
|
|
section Návrh algoritmu (20 minút)
|
|
|
Intersection Logic: Testovanie oddelenia
|
|
|
: Detekcia prekrytia
|
|
|
: Optimalizácia výkonu
|
|
|
: Riešenie hraničných prípadov
|
|
|
|
|
|
section Implementácia hry (30 minút)
|
|
|
Object Systems: Správa životného cyklu
|
|
|
: Koordinácia udalostí
|
|
|
: Sledovanie stavu
|
|
|
: Čistenie pamäte
|
|
|
|
|
|
section Interaktívne funkcie (40 minút)
|
|
|
Combat Mechanics: Systémy projektilov
|
|
|
: Cooldown zbrane
|
|
|
: Výpočet poškodenia
|
|
|
: Vizuálna odozva
|
|
|
|
|
|
section Pokročilá fyzika (50 minút)
|
|
|
Real-time Systems: Optimalizácia snímkovej frekvencie
|
|
|
: Priestorové rozdelenie
|
|
|
: Reakcia na kolízie
|
|
|
: Simulácia fyziky
|
|
|
|
|
|
section Profesionálne techniky (1 týždeň)
|
|
|
Game Engine Concepts: Komponentové systémy
|
|
|
: Fyzikálne pipeline
|
|
|
: Profilovanie výkonu
|
|
|
: Optimalizácia pre viaceré platformy
|
|
|
|
|
|
section Priemyselné aplikácie (1 mesiac)
|
|
|
Production Skills: Optimalizácia vo veľkom meradle
|
|
|
: Tímová spolupráca
|
|
|
: Vývoj herného enginu
|
|
|
: Nasadenie na platformy
|
|
|
```
|
|
|
### 🛠️ Zhrnutie vášho balíka nástrojov hernej fyziky
|
|
|
|
|
|
Po dokončení tejto lekcie zvládate:
|
|
|
- **Matematiku kolízií**: Algoritmy prieniku obdĺžnikov a súradnicové systémy
|
|
|
- **Optimalizáciu výkonu**: Efektívna detekcia kolízií pre aplikácie v reálnom čase
|
|
|
- **Správu životného cyklu objektov**: Bezpečné vytváranie, aktualizáciu a ničenie vzoriek
|
|
|
- **Udalostne riadenú architektúru**: Oddelené systémy pre reakciu na kolízie
|
|
|
- **Integráciu hernej slučky**: Aktualizácie fyziky v snímkach a koordinácia renderovania
|
|
|
- **Systémy vstupu**: Reaktívne ovládanie s obmedzením rýchlosti a spätnou väzbou
|
|
|
- **Správu pamäte**: Efektívne poolovanie objektov a stratégie čistenia
|
|
|
|
|
|
**Aplikácie v reálnom svete**: Vaše schopnosti detekcie kolízií sa priamo uplatnia v:
|
|
|
- **Interaktívnych simuláciách**: Vedecké modelovanie a vzdelávacie nástroje
|
|
|
- **Návrhu užívateľského rozhrania**: Drag-and-drop interakcie a detekcia dotykov
|
|
|
- **Vizualizácii dát**: Interaktívne grafy a klikateľné prvky
|
|
|
- **Mobilnom vývoji**: Rozpoznávanie dotykových gest a spracovanie kolízií
|
|
|
- **Programovaní robotiky**: Plánovanie trás a vyhýbanie sa prekážkam
|
|
|
- **Počítačovej grafike**: Ray tracing a priestorové algoritmy
|
|
|
|
|
|
**Získané profesionálne zručnosti**: Teraz môžete:
|
|
|
- **Navrhovať** efektívne algoritmy pre detekciu kolízií v reálnom čase
|
|
|
- **Implementovať** fyzikálne systémy škálovateľné s komplexnosťou objektov
|
|
|
- **Ladiť** zložité interakčné systémy pomocou matematických princípov
|
|
|
- **Optimalizovať** výkon pre rôzne hardvérové a prehliadačové možnosti
|
|
|
- **Navrhovať** udržateľné herné systémy s overenými vzormi
|
|
|
|
|
|
**Osvojené koncepty vývoja hier**:
|
|
|
- **Simulácia fyziky**: Detekcia kolízií a reakcie v reálnom čase
|
|
|
- **Výkonnostné inžinierstvo**: Optimalizované algoritmy pre interaktívne aplikácie
|
|
|
- **Udalostné systémy**: Oddelená komunikácia medzi komponentmi hry
|
|
|
- **Správa objektov**: Efektívne vzory životného cyklu pre dynamický obsah
|
|
|
- **Spracovanie vstupu**: Reaktívne ovládanie s primeranou spätnou väzbou
|
|
|
|
|
|
**Ďalšia úroveň**: Ste pripravení preskúmať pokročilé fyzikálne enginy ako Matter.js, implementovať 3D detekciu kolízií alebo stavať komplexné systémy častíc!
|
|
|
|
|
|
🌟 **Úspech odomknutý**: Vytvorili ste kompletný systém fyzikálnej interakcie s profesionálnou detekciou kolízií!
|
|
|
|
|
|
## Výzva GitHub Copilot Agenta 🚀
|
|
|
|
|
|
Použite režim Agenta a dokončite nasledujúcu úlohu:
|
|
|
|
|
|
**Popis:** Vylepšite systém detekcie kolízií implementáciou power-upov, ktoré sa náhodne generujú a poskytujú dočasné schopnosti, keď ich zoberie hrdina lode.
|
|
|
|
|
|
**Úloha:** Vytvorte triedu PowerUp, ktorá rozširuje GameObject, a implementujte detekciu kolízie medzi hrdinom a power-upmi. Pridajte aspoň dva typy power-upov: jeden, ktorý zvyšuje rýchlosť streľby (znižuje čas obnovy) a druhý, ktorý vytvára dočasný štít. Zahrňte logiku náhodného generovania power-upov v náhodných intervaloch a pozíciách.
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 Výzva
|
|
|
|
|
|
Pridajte výbuch! Pozrite sa na herné grafiky v [Space Art repozitári](../../../../6-space-game/solution/spaceArt/readme.txt) a skúste pridať výbuch, keď laser zasiahne mimozemšťana
|
|
|
|
|
|
## Kvíz po prednáške
|
|
|
|
|
|
[Kvíz po prednáške](https://ff-quizzes.netlify.app/web/quiz/36)
|
|
|
|
|
|
## Prehľad a samostatné štúdium
|
|
|
|
|
|
Experimentujte s intervalmi vo vašej hre doteraz. Čo sa stane, keď ich zmeníte? Prečítajte si viac o [JavaScript časovacích udalostiach](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
|
|
|
|
|
|
## Zadanie
|
|
|
|
|
|
[Preskúmajte kolízie](assignment.md)
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**Upozornenie**:
|
|
|
Tento dokument bol preložený pomocou automatizovanej prekladateľskej služby AI [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, vezmite prosím na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Originálny dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre dôležité informácie sa odporúča odborný preklad človekom. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne výklady vyplývajúce z použitia tohto prekladu.
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
