Web-Dev-For-Beginners/translations/pl/6-space-game/4-collision-detection

Stwórz grę kosmiczną Część 4: Dodawanie lasera i wykrywanie kolizji

journey
    title Twoja podróż wykrywania kolizji
    section Podstawy fizyki
      Zrozum prostokąty: 3: Student
      Naucz się matematyki przecięć: 4: Student
      Pojmij układy współrzędnych: 4: Student
    section Mechanika gry
      Wdróż wystrzał lasera: 4: Student
      Dodaj cykl życia obiektu: 5: Student
      Stwórz zasady kolizji: 5: Student
    section Integracja systemu
      Zbuduj wykrywanie kolizji: 5: Student
      Optymalizuj wydajność: 5: Student
      Testuj systemy interakcji: 5: Student

Quiz przed wykładem

Quiz przed wykładem

Pomyśl o momencie w Gwiezdnych Wojnach, gdy protonowe torpedy Luke'a trafiły w wylot spalin Gwiazdy Śmierci. To precyzyjne wykrycie kolizji zmieniło losy galaktyki! W grach wykrywanie kolizji działa podobnie - określa kiedy obiekty wchodzą ze sobą w interakcje i co się wtedy dzieje.

W tej lekcji dodasz do swojej gry kosmicznej bronie laserowe i zaimplementujesz wykrywanie kolizji. Podobnie jak planiści misji NASA obliczają trajektorie statków kosmicznych, aby unikać odłamków, nauczysz się wykrywać, kiedy obiekty gry się przecinają. Rozłożymy to na zrozumiałe etapy, które będą na siebie nakładać.

Na końcu będziesz mieć działający system walki, w którym lasery niszczą wrogów, a kolizje wywołują zdarzenia w grze. Te same zasady wykrywania kolizji stosuje się we wszystkim, od symulacji fizycznych po interaktywne interfejsy internetowe.

mindmap
  root((Wykrywanie Kolizji))
    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

✅ Zrób krótkie badania na temat pierwszej napisanej w historii komputerowej gry. Jakie miała funkcje?

Wykrywanie kolizji

Wykrywanie kolizji działa jak czujniki odległości w module księżycowym Apollo – stale mierzy odległości i wywołuje alarmy, gdy obiekty zbliżają się zbyt blisko. W grach ten system decyduje, kiedy obiekty ze sobą oddziałują i co powinno się dalej wydarzyć.

Podejście, którego użyjemy, traktuje każdy obiekt gry jako prostokąt, podobnie jak systemy kontroli ruchu lotniczego wykorzystują uproszczone kształty geometryczne do śledzenia samolotów. Ta prostokątna metoda może wydawać się prosta, ale jest wydajna obliczeniowo i dobrze działa w większości scenariuszy gier.

Reprezentacja prostokąta

Każdy obiekt gry potrzebuje granicznych współrzędnych, podobnie jak łazik Mars Pathfinder mapował swoją lokalizację na powierzchni Marsa. Tak definiujemy te granice:

flowchart TD
    A["🎯 Obiekt Gry"] --> B["📍 Pozycja (x, y)"]
    A --> C["📏 Wymiary (szerokość, wysokość)"]
    
    B --> D["Góra: y"]
    B --> E["Lewo: x"]
    
    C --> F["Dół: y + wysokość"]
    C --> G["Prawo: x + szerokość"]
    
    D --> H["🔲 Granice Prostokąta"]
    E --> H
    F --> H
    G --> H
    
    H --> I["Gotowy do Detekcji Kolizji"]
    
    style A fill:#e3f2fd
    style H fill:#e8f5e8
    style I fill:#fff3e0

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

Rozłóżmy to na części:

• Górna krawędź: To po prostu miejsce, gdzie obiekt zaczyna się pionowo (jego pozycja y)
• Lewa krawędź: Miejsce startu poziomo (jego pozycja x)
• Dolna krawędź: Dodaj wysokość do pozycji y – teraz wiesz, gdzie się kończy!
• Prawa krawędź: Dodaj szerokość do pozycji x – i masz pełne granice

Algorytm wykrywania przecięcia

Wykrywanie przecięcia prostokątów używa logiki podobnej do tej, którą teleskop Hubble wykorzystuje, by określić, czy obiekty niebieskie nachodzą na siebie w polu widzenia. Algorytm sprawdza oddzielenie:

flowchart LR
    A["Prostokąt 1"] --> B{"Testy Rozdzielenia"}
    C["Prostokąt 2"] --> B
    
    B --> D["Lewa R2 > Prawa R1?"]
    B --> E["Prawa R2 < Lewa R1?"]
    B --> F["Góra R2 > Dół R1?"]
    B --> G["Dół R2 < Góra R1?"]
    
    D --> H{"Którekolwiek Prawda?"}
    E --> H
    F --> H
    G --> H
    
    H -->|Tak| I["❌ Brak Kolizji"]
    H -->|Nie| J["✅ Wykryto Kolizję"]
    
    style B fill:#e3f2fd
    style I fill:#ffebee
    style J fill:#e8f5e8

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

Test oddzielenia działa jak systemy radarowe:

• Czy prostokąt 2 leży całkowicie na prawo od prostokąta 1?
• Czy prostokąt 2 leży całkowicie na lewo od prostokąta 1?
• Czy prostokąt 2 leży całkowicie pod prostokątem 1?
• Czy prostokąt 2 leży całkowicie nad prostokątem 1?

Jeśli żadna z tych warunków nie jest spełniona, prostokąty muszą się nakładać. To podejście odzwierciedla, jak operatorzy radarów sprawdzają, czy dwa samoloty zachowują bezpieczną odległość.

Zarządzanie cyklem życia obiektów

Gdy laser trafia w wroga, oba obiekty muszą zostać usunięte z gry. Jednak usuwanie obiektów w trakcie pętli może powodować błędy — to lekcja wyciągnięta z dawnych systemów komputerowych, takich jak Apollo Guidance Computer. Zamiast tego stosujemy podejście „oznacz do usunięcia”, które bezpiecznie usuwa obiekty między klatkami.

stateDiagram-v2
    [*] --> Active: Obiekt Utworzony
    Active --> Collided: Wykryto Kolizję
    Collided --> MarkedDead: Ustaw dead = true
    MarkedDead --> Filtered: Następna klatka
    Filtered --> [*]: Obiekt Usunięty
    
    Active --> OutOfBounds: Opuszcza Ekran
    OutOfBounds --> MarkedDead
    
    note right of MarkedDead
        Bezpieczne kontynuowanie
        bieżąca klatka
    end note
    
    note right of Filtered
        Obiekty usunięte
        między klatkami
    end note

Tak oznaczamy coś do usunięcia:

// Oznacz obiekt do usunięcia
enemy.dead = true;

Dlaczego to podejście działa:

• Oznaczamy obiekt jako „martwy”, ale nie usuwamy go od razu
• Pozwala to dokończyć obecną klatkę gry bez błędów
• Brak awarii z powodu używania czegoś, co już zniknęło!

Następnie filtrujemy oznaczone obiekty przed kolejnym cyklem renderowania:

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

Co robi to filtrowanie:

• Tworzy nową listę z tylko „żyjącymi” obiektami
• Usuwa wszystko, co oznaczono jako martwe
• Utrzymuje płynność gry
• Zapobiega zbyt szybkiemu narastaniu uszkodzonych obiektów w pamięci

Implementacja mechaniki lasera

Pociski laserowe w grach działają na tej samej zasadzie co fotonowe torpedy w Star Treku – są odrębnymi obiektami, które poruszają się po liniach prostych aż do trafienia w coś. Każde naciśnięcie spacji tworzy nowy obiekt lasera, który przesuwa się po ekranie.

Aby to działało, musimy koordynować kilka elementów:

Kluczowe elementy do zaimplementowania:

• Tworzenie obiektów laserów, które powstają przy pozycji bohatera
• Obsługa klawiatury do wywołania tworzenia lasera
• Zarządzanie ruchiem i cyklem życia laserów
• Implementacja wizualnej reprezentacji pocisków laserowych

Implementacja kontroli szybkości strzałów

Nieograniczona szybkość strzelania zalałaby silnik gry i uczyniłaby rozgrywkę zbyt prostą. Rzeczywiste systemy broni mają podobne ograniczenia – nawet fazery USS Enterprise potrzebowały czasu na przeładowanie między strzałami.

Wdrożymy system chłodzenia (cooldown), który zapobiega spamowi szybkich strzałów, a jednocześnie zachowuje responsywność sterowania:

sequenceDiagram
    participant Player
    participant Weapon
    participant Cooldown
    participant Game
    
    Player->>Weapon: Naciśnij Spację
    Weapon->>Cooldown: Sprawdź czy gotowa
    
    alt Broń jest gotowa
        Cooldown->>Weapon: gotowa = prawda
        Weapon->>Game: Stwórz Laser
        Weapon->>Cooldown: Rozpocznij nowy cooldown
        Cooldown->>Cooldown: gotowa = fałsz
        
        Note over Cooldown: Czekaj 500ms
        
        Cooldown->>Cooldown: gotowa = prawda
    else Broń się schładza
        Cooldown->>Weapon: gotowa = fałsz
        Weapon->>Player: Brak akcji
    end

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) {
      // Stwórz pocisk laserowy
      this.cooldown = new Cooldown(500);
    } else {
      // Broń nadal się chłodzi
    }
  }
}

Jak działa cooldown:

• Po stworzeniu broń jest „gorąca” (nie może jeszcze strzelać)
• Po upływie czasu staje się „zimna” (gotowa do strzału)
• Przed oddaniem strzału sprawdzamy: „Czy broń jest zimna?”
• To zapobiega spamowaniu, ale zachowuje szybkie reakcje

✅ Przypomnij sobie lekcję 1 z serii gry kosmicznej o systemach cooldown.

Budowanie systemu kolizji

Rozszerzysz swój istniejący kod gry kosmicznej o system wykrywania kolizji. Podobnie jak automatyczny system unikania kolizji Międzynarodowej Stacji Kosmicznej, twoja gra będzie na bieżąco monitorować pozycje obiektów i reagować na przecięcia.

Na podstawie kodu z poprzedniej lekcji dodasz wykrywanie kolizji z konkretnymi zasadami sterującymi interakcjami obiektów.

💡 Pro Tip: Sprite lasera jest już dołączony w folderze assets i odwołany w twoim kodzie, gotowy do wdrożenia.

Zasady kolizji do zaimplementowania

Mechanika gry do dodania:

1. Laser trafia wroga: Obiekt wroga jest niszczony, jeśli zostanie trafiony przez pocisk laserowy
2. Laser trafia w krawędź ekranu: Laser jest usuwany, gdy dotrze do górnej krawędzi ekranu
3. Kolizja wroga z bohaterem: Oba obiekty są niszczone, gdy się przecinają
4. Wróg dociera do dołu ekranu: Warunek przegranej, gdy wrogowie docierają do dołu ekranu

🔄 Sprawdzenie pedagogiczne

Podstawy wykrywania kolizji: Zanim zaimplementujesz, upewnij się, że rozumiesz:

• ✅ Jak granice prostokątów definiują strefy kolizji
• ✅ Dlaczego testy separacji są wydajniejsze niż obliczanie przecięć
• ✅ Znaczenie zarządzania cyklem życia obiektów w pętli gry
• ✅ Jak systemy oparte na zdarzeniach koordynują reakcje na kolizje

Szybki test samodzielny: Co by się stało, gdybyś usuwał obiekty od razu zamiast oznaczać je? Odpowiedź: Usuwanie w trakcie pętli mogłoby powodować awarie lub pominięcie obiektów w iteracji

Zrozumienie fizyki: Teraz rozumiesz:

• Układy współrzędnych: Jak pozycja i wymiary tworzą granice
• Logika przecięć: Zasady matematyczne wykrywania kolizji
• Optymalizacja wydajności: Dlaczego efektywne algorytmy są ważne w systemach czasu rzeczywistego
• Zarządzanie pamięcią: Bezpieczne wzorce zarządzania obiektami dla stabilności

Konfiguracja środowiska programistycznego

Dobre wieści - większość przygotowań jest już gotowa! Wszystkie twoje zasoby gry i podstawowa struktura czekają w podfolderze your-work, gotowe na dodanie fajnych funkcji kolizji.

Struktura projektu

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

Co zawiera struktura plików:

• Zawiera wszystkie obrazy sprite potrzebne do obiektów gry
• Zawiera główny dokument HTML i plik aplikacji JavaScript
• Dostarcza konfigurację pakietu dla lokalnego serwera deweloperskiego

Uruchamianie serwera deweloperskiego

Przejdź do folderu projektu i uruchom lokalny serwer:

cd your-work
npm start

Ta sekwencja komend:

• Zmienia katalog na twój folder roboczy projektu
• Uruchamia lokalny serwer HTTP na http://localhost:5000
• Serwuje pliki gry do testowania i pracy deweloperskiej
• Umożliwia tworzenie na żywo ze automatycznym odświeżaniem

Otwórz przeglądarkę i przejdź pod adres http://localhost:5000, aby zobaczyć aktualny stan gry z wyrenderowanym bohaterem i wrogami na ekranie.

Implementacja krok po kroku

Podobnie jak systematyczne podejście NASA do programowania sond Voyager, zaimplementujemy wykrywanie kolizji metodycznie, budując każdy element krok po kroku.

flowchart TD
    A["1. Granice Prostokąta"] --> B["2. Wykrywanie Przecięć"]
    B --> C["3. System Lasera"]
    C --> D["4. Obsługa Zdarzeń"]
    D --> E["5. Zasady Kolizji"]
    E --> F["6. System Czasu Odnowienia"]
    
    G["Granice Obiektów"] --> A
    H["Algorytm Fizyki"] --> B
    I["Tworzenie Pocisków"] --> C
    J["Wejście z Klawiatury"] --> D
    K["Logika Gry"] --> E
    L["Ograniczenie Częstotliwości"] --> F
    
    F --> M["🎮 Pełna Gra"]
    
    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. Dodaj granice kolizji prostokąta

Najpierw nauczmy obiekty gry opisywać swoje granice. Dodaj tę metodę do klasy GameObject:

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

Ta metoda robi:

• Tworzy obiekt prostokąta z precyzyjnymi koordynatami granic
• Oblicza dolną i prawą krawędź za pomocą pozycji plus wymiary
• Zwraca obiekt gotowy do użycia w algorytmach wykrywania kolizji
• Zapewnia ustandaryzowany interfejs dla wszystkich obiektów gry

2. Zaimplementuj wykrywanie przecięcia

Teraz stwórzmy nasze wykrywanie kolizji – funkcję, która określi, czy dwa prostokąty się nakładają:

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

Ten algorytm:

• Sprawdza cztery warunki separacji między prostokątami
• Zwraca false, jeśli jakikolwiek warunek separacji jest prawdziwy
• Wskazuje kolizję, gdy nie ma oddzielenia
• Używa negacji logiki dla efektywnego testu przecięcia

3. Wdrożenie systemu strzelania laserem

Teraz robi się ciekawie! Ustawmy system strzelania laserem.

Stałe wiadomości

Najpierw zdefiniujmy typy wiadomości, aby różne części naszej gry mogły się komunikować:

KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",

Te stałe:

• Standaryzują nazwy zdarzeń w całej aplikacji
• Umożliwiają spójną komunikację między systemami gry
• Zapobiegają literówkom przy rejestracji obsługi zdarzeń

Obsługa klawiatury

Dodaj wykrywanie spacji w słuchaczu zdarzeń klawiszy:

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

Ten handler wejścia:

• Wykrywa wciśnięcia spacji kodem klawisza 32
• Emituje ustandaryzowaną wiadomość zdarzenia
• Umożliwia oddzielenie logiki strzelania

Rejestracja nasłuchiwaczy

Zarejestruj zachowanie strzału w funkcji initGame():

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

Ten nasłuchiwacz:

• Reaguje na zdarzenia spacji
• Sprawdza status cooldown
• Wyzwala tworzenie lasera, gdy jest to dozwolone

Dodaj obsługę kolizji laser-wróg:

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

Ten handler kolizji:

• Odbiera dane o kolizji z dwoma obiektami
• Oznacza oba obiekty do usunięcia
• Zapewnia prawidłowe czyszczenie po kolizji

4. Utwórz klasę Laser

Zaimplementuj pocisk laserowy, który porusza się w górę i zarządza swoim cyklem życia:

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);
  }
}

Ta klasa:

• Dziedziczy po GameObject, aby odziedziczyć podstawową funkcjonalność
• Ustawia odpowiednie wymiary sprite'a lasera
• Tworzy automatyczny ruch w górę za pomocą setInterval()
• Zarządza samodestrukcją po dotarciu do górnej krawędzi ekranu
• Obsługuje własne timery animacji i sprzątanie

5. Implementuj system wykrywania kolizji

Stwórz kompleksową funkcję wykrywania kolizji:

function updateGameObjects() {
  const enemies = gameObjects.filter(go => go.type === 'Enemy');
  const lasers = gameObjects.filter(go => go.type === "Laser");
  
  // Testuj kolizje lasera z wrogiem
  lasers.forEach((laser) => {
    enemies.forEach((enemy) => {
      if (intersectRect(laser.rectFromGameObject(), enemy.rectFromGameObject())) {
        eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
          first: laser,
          second: enemy,
        });
      }
    });
  });

  // Usuń zniszczone obiekty
  gameObjects = gameObjects.filter(go => !go.dead);
}

System kolizji:

• Filtruje obiekty gry według typu dla efektywnego testowania
• Testuje każdą wiązkę laserów z każdym wrogiem pod kątem przecięcia
• Emituję zdarzenia kolizji, gdy wykryje przecięcia
• Czyści zniszczone obiekty po obsłudze kolizji

⚠️ Ważne: Dodaj updateGameObjects() do swojej głównej pętli gry w window.onload, aby włączyć wykrywanie kolizji.

6. Dodaj system cooldown do klasy Hero

Ulepsz klasę Hero, dodając mechanikę strzelania i ograniczanie tempa strzałów:

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;
  }
}

Ulepszona klasa Hero:

• Inicjuje licznik cooldown na zero (gotowy do strzału)
• Tworzy obiekty laserów umieszczone nad okrętem bohatera
• Ustawia okres cooldown, aby zapobiec szybkiemu strzelaniu
• Zmniejsza licznik cooldown w cyklicznych aktualizacjach
• Umożliwia sprawdzenie gotowości do strzału metodą canFire()

🔄 Sprawdzenie pedagogiczne

Kompletne zrozumienie systemu: Sprawdź swoją biegłość w systemie kolizji:

• ✅ Jak granice prostokątów umożliwiają efektywne wykrywanie kolizji?
• ✅ Dlaczego zarządzanie cyklem życia obiektów jest krytyczne dla stabilności gry?
• ✅ Jak system cooldown zapobiega problemom z wydajnością?
• ✅ Jaką rolę odgrywa architektura oparta na wydarzeniach w obsłudze kolizji?

Integracja systemów: Twój system kolizji demonstruje:

• Precyzję matematyczną: Algorytmy przecięcia prostokątów
• Optymalizację wydajności: Wydajne wzorce testowania kolizji
• Zarządzanie pamięcią: Bezpieczne tworzenie i usuwanie obiektów
• Koordynację zdarzeń: Odłączoną komunikację systemową
• Przetwarzanie w czasie rzeczywistym: Cykl aktualizacji oparty na klatkach

Wzorce profesjonalne: Zaimplementowałeś:

• Separation of Concerns: Oddzielenie fizyki, renderowania i obsługi wejścia
• Projektowanie obiektowe: Dziedziczenie i polimorfizm
• Zarządzanie stanem: Cykl życia obiektów i śledzenie stanu gry
• Optymalizację wydajności: Efektywne algorytmy do zastosowań czasu rzeczywistego

Testowanie implementacji

Twoja gra kosmiczna ma teraz pełny system wykrywania kolizji i mechanikę walki. 🚀 Przetestuj nowe funkcje:

• Nawiguj za pomocą klawiszy strzałek, aby zweryfikować sterowanie ruchem
• Strzelaj laserami za pomocą spacji – zauważ, jak cooldown zapobiega spamowaniu
• Obserwuj kolizje, gdy lasery trafiają wrogów, co wywołuje ich usunięcie
• Sprawdź sprzątanie, gdy uszkodzone obiekty znikają z gry

Pomyślnie zaimplementowałeś system wykrywania kolizji, korzystając z tych samych zasad matematycznych, które kierują nawigacją statków kosmicznych i robotyką.

⚡ Co możesz zrobić w ciągu następnych 5 minut

• Otwórz narzędzia deweloperskie przeglądarki i ustaw pułapki (breakpointy) w funkcji wykrywania kolizji
• Spróbuj zmodyfikować prędkość lasera lub ruch wrogów, aby zobaczyć efekty kolizji
• Eksperymentuj z różnymi wartościami cooldown, aby przetestować tempo strzelania
• Dodaj instrukcje console.log do śledzenia zdarzeń kolizji w czasie rzeczywistym

🎯 Co możesz osiągnąć w tę godzinę

• Ukończ quiz po lekcji i zrozum algorytmy wykrywania kolizji
• Dodaj efekty wizualne, takie jak eksplozje, gdy dochodzi do kolizji
• Zaimplementuj różne typy pocisków o zróżnicowanych właściwościach
• Stwórz power-upy, które tymczasowo zwiększają zdolności gracza
• Dodaj efekty dźwiękowe, aby kolizje były bardziej satysfakcjonujące

📅 Twój tygodniowy plan programowania fizyki

• Ukończ pełną grę kosmiczną z dopracowanymi systemami kolizji
• Wdróż zaawansowane kształty kolizji wykraczające poza prostokąty (koła, wielokąty)
• Dodaj systemy cząsteczek dla realistycznych efektów eksplozji
• Stwórz złożone zachowanie przeciwników z unikaniem kolizji
• Optymalizuj wykrywanie kolizji, by poprawić wydajność przy wielu obiektach
• Dodaj symulację fizyki, jak pęd i realistyczny ruch

🌟 Twoje miesięczne mistrzostwo fizyki gry

• Buduj gry z zaawansowanymi silnikami fizyki i realistycznymi symulacjami
• Ucz się wykrywania kolizji 3D i algorytmów partycjonowania przestrzeni
• Współtwórz biblioteki fizyki i silniki gier open source
• Opanuj optymalizację wydajności w aplikacjach graficznych wymagających mocy obliczeniowej
• Twórz materiały edukacyjne dotyczące fizyki gier i wykrywania kolizji
• Zbuduj portfolio prezentujące zaawansowane umiejętności programowania fizyki

🎯 Twój harmonogram opanowania wykrywania kolizji

timeline
    title Postęp w nauce wykrywania kolizji i fizyki w grach
    
    section Podstawy (10 minut)
        Rectangle Math: Systemy współrzędnych
                      : Obliczenia granic
                      : Śledzenie pozycji
                      : Zarządzanie wymiarami
        
    section Projektowanie algorytmów (20 minut)
        Intersection Logic: Testowanie separacji
                          : Wykrywanie nakładania się
                          : Optymalizacja wydajności
                          : Obsługa przypadków brzegowych
        
    section Implementacja gry (30 minut)
        Object Systems: Zarządzanie cyklem życia
                      : Koordynacja zdarzeń
                      : Śledzenie stanu
                      : Sprzątanie pamięci
        
    section Funkcje interaktywne (40 minut)
        Combat Mechanics: Systemy pocisków
                        : Czas odnowienia broni
                        : Obliczanie obrażeń
                        : Informacje wizualne
        
    section Zaawansowana fizyka (50 minut)
        Real-time Systems: Optymalizacja liczby klatek
                         : Partycjonowanie przestrzenne
                         : Reakcja na kolizje
                         : Symulacja fizyki
        
    section Techniki profesjonalne (1 tydzień)
        Game Engine Concepts: Systemy komponentów
                             : Linie przetwarzania fizyki
                             : Profilowanie wydajności
                             : Optymalizacja wieloplatformowa
        
    section Zastosowania przemysłowe (1 miesiąc)
        Production Skills: Optymalizacja na dużą skalę
                         : Współpraca zespołowa
                         : Rozwój silnika
                         : Wdrażanie na platformy

🛠️ Podsumowanie Twojego zestawu narzędzi fizyki gry

Po ukończeniu tej lekcji opanowałeś:

• Matematykę kolizji: Algorytmy przecięcia prostokątów i systemy współrzędnych
• Optymalizację wydajności: Efektywne wykrywanie kolizji w aplikacjach czasu rzeczywistego
• Zarządzanie cyklem życia obiektów: Bezpieczne wzorce tworzenia, aktualizacji i niszczenia
• Architekturę opartą na zdarzeniach: Odseparowane systemy reagujące na kolizje
• Integrację z pętlą gry: Aktualizacje fizyki bazujące na klatkach i koordynacja renderowania
• Systemy wejścia: Responsywne sterowanie z ograniczeniem częstotliwości i sprzężeniem zwrotnym
• Zarządzanie pamięcią: Efektywne pule obiektów i strategie sprzątania

Zastosowania w praktyce: Twoje umiejętności wykrywania kolizji mają zastosowanie w:

• Interaktywnych symulacjach: Modelowanie naukowe i narzędzia edukacyjne
• Projektowaniu interfejsów: Interakcje przeciągnij i upuść oraz wykrywanie dotyku
• Wizualizacji danych: Interaktywne wykresy i elementy klikalne
• Tworzeniu aplikacji mobilnych: Rozpoznawanie gestów dotykowych i obsługa kolizji
• Programowaniu robotów: Planowanie ścieżek i unikanie przeszkód
• Grafice komputerowej: Śledzenie promieni i algorytmy przestrzenne

Nabyte umiejętności zawodowe: Potrafisz teraz:

• Projektować efektywne algorytmy do wykrywania kolizji w czasie rzeczywistym
• Implementować systemy fizyki skalujące się złożonością obiektów
• Debugować złożone systemy interakcji, używając zasad matematycznych
• Optymalizować wydajność dla różnych sprzętów i przeglądarek
• Architektować utrzymywalne systemy gier stosując sprawdzone wzorce projektowe

Opanowane pojęcia w tworzeniu gier:

• Symulacja fizyki: Wykrywanie i reakcja na kolizje w czasie rzeczywistym
• Inżynieria wydajności: Optymalizowane algorytmy dla aplikacji interaktywnych
• Systemy zdarzeń: Oddzielona komunikacja między komponentami gry
• Zarządzanie obiektami: Efektywne wzorce cyklu życia dla treści dynamicznej
• Obsługa wejścia: Responsywne sterowanie z odpowiednim sprzężeniem zwrotnym

Kolejny poziom: Jesteś gotów eksplorować zaawansowane silniki fizyki jak Matter.js, implementować wykrywanie kolizji 3D lub budować złożone systemy cząsteczek!

🌟 Odznaka zdobyta: Zbudowałeś kompletny system interakcji oparty na fizyce z profesjonalnym wykrywaniem kolizji!

Wyzwanie GitHub Copilot Agent 🚀

Użyj trybu Agenta, aby ukończyć następujące wyzwanie:

Opis: Ulepsz system wykrywania kolizji, implementując power-upy, które pojawiają się losowo i zapewniają tymczasowe zdolności po zebraniu przez statek bohatera.

Polecenie: Stwórz klasę PowerUp rozszerzającą GameObject i zaimplementuj wykrywanie kolizji między bohaterem a power-upami. Dodaj przynajmniej dwa typy power-upów: jeden zwiększający szybkostrzelność (skrócenie czasu odnowienia), a drugi tworzący tymczasową tarczę. Uwzględnij logikę pojawiania się power-upów w losowych odstępach i pozycjach.

---

🚀 Wyzwanie

Dodaj eksplozję! Spójrz na zasoby gry w repozytorium Space Art i spróbuj dodać eksplozję, gdy laser trafia obcego

Quiz po wykładzie

Quiz po wykładzie

Przegląd i nauka własna

Eksperymentuj z interwałami w swojej grze. Co się dzieje, gdy je zmieniasz? Przeczytaj więcej o zdarzeniach czasowych w JavaScript.

Zadanie domowe

Zbadaj kolizje

---

Zastrzeżenie:
Niniejszy dokument został przetłumaczony za pomocą usługi tłumaczenia AI Co-op Translator. Choć staramy się zapewnić dokładność, prosimy pamiętać, że automatyczne tłumaczenia mogą zawierać błędy lub niedokładności. Oryginalny dokument w języku źródłowym należy traktować jako źródło autorytatywne. W przypadku informacji o kluczowym znaczeniu zalecane jest skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.