History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	3 weeks ago
your-work	🌐 Update translations via Co-op Translator	3 weeks ago
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Izgradnja svemirske igre, dio 4: Dodavanje lasera i detekcija sudara

Kviz prije predavanja

U ovoj lekciji naučit ćete kako pucati lasere pomoću JavaScripta! Dodati ćemo dvije stvari u našu igru:

Laser: laser se ispaljuje iz broda vašeg junaka i kreće se vertikalno prema gore
Detekcija sudara, kao dio implementacije mogućnosti pucanja, dodati ćemo neka pravila igre:
- Laser pogodi neprijatelja: Neprijatelj umire ako ga pogodi laser
- Laser pogodi vrh ekrana: Laser se uništava ako pogodi gornji dio ekrana
- Sudar neprijatelja i junaka: Neprijatelj i junak se uništavaju ako se sudare
- Neprijatelj pogodi dno ekrana: Neprijatelj i junak se uništavaju ako neprijatelj pogodi dno ekrana

Ukratko, vi -- junak -- morate pogoditi sve neprijatelje laserom prije nego što stignu do dna ekrana.

✅ Istražite prvi računalni program za igru ikada napisan. Koja je bila njegova funkcionalnost?

Budimo heroji zajedno!

Detekcija sudara

Kako provodimo detekciju sudara? Moramo razmišljati o našim objektima u igri kao o pravokutnicima koji se kreću. Zašto, pitate se? Pa, slika koja se koristi za crtanje objekta u igri je pravokutnik: ima x, y, širinu i visinu.

Ako se dva pravokutnika, npr. junak i neprijatelj presijeku, imate sudar. Što bi se tada trebalo dogoditi ovisi o pravilima igre. Za implementaciju detekcije sudara trebate sljedeće:

Način za dobivanje pravokutne reprezentacije objekta u igri, nešto poput ovoga:

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

Funkciju za usporedbu, koja može izgledati ovako:

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

Kako uništiti stvari

Da biste uništili stvari u igri, morate obavijestiti igru da više ne treba crtati taj objekt u petlji igre koja se pokreće u određenim intervalima. Način za to je označiti objekt igre kao mrtav kada se nešto dogodi, ovako:

// collision happened
enemy.dead = true

Zatim možete izdvojiti mrtve objekte prije ponovnog crtanja ekrana, ovako:

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

Kako ispaliti laser

Ispaljivanje lasera znači reagiranje na događaj pritiska tipke i stvaranje objekta koji se kreće u određenom smjeru. Stoga trebamo provesti sljedeće korake:

Stvoriti objekt lasera: s vrha broda našeg junaka, koji nakon stvaranja počinje se kretati prema vrhu ekrana.
Povezati kod s događajem pritiska tipke: trebamo odabrati tipku na tipkovnici koja predstavlja igrača koji ispaljuje laser.
Stvoriti objekt igre koji izgleda kao laser kada se pritisne tipka.

Vremensko ograničenje za laser

Laser treba ispaliti svaki put kad pritisnete tipku, npr. razmaknicu. Kako bismo spriječili da igra stvara previše lasera u kratkom vremenu, trebamo to popraviti. Popravak se provodi implementacijom tzv. vremenskog ograničenja, timera, koji osigurava da se laser može ispaliti samo u određenim intervalima. To možete implementirati na sljedeći način:

class Cooldown {
  constructor(time) {
    this.cool = false;
    setTimeout(() => {
      this.cool = true;
    }, time)
  }
}

class Weapon {
  constructor {
  }
  fire() {
    if (!this.cooldown || this.cooldown.cool) {
      // produce a laser
      this.cooldown = new Cooldown(500);
    } else {
      // do nothing - it hasn't cooled down yet.
    }
  }
}

✅ Pogledajte lekciju 1 u seriji svemirske igre kako biste se podsjetili na vremenska ograničenja.

Što izgraditi

Uzet ćete postojeći kod (koji ste trebali očistiti i refaktorirati) iz prethodne lekcije i proširiti ga. Možete započeti s kodom iz dijela II ili koristiti kod iz Dio III - početni kod.

savjet: laser s kojim ćete raditi već se nalazi u vašoj mapi s resursima i referenciran je u vašem kodu

Dodajte detekciju sudara, kada laser sudari s nečim, trebaju se primijeniti sljedeća pravila:
1. Laser pogodi neprijatelja: neprijatelj umire ako ga pogodi laser
2. Laser pogodi vrh ekrana: laser se uništava ako pogodi gornji dio ekrana
3. Sudar neprijatelja i junaka: neprijatelj i junak se uništavaju ako se sudare
4. Neprijatelj pogodi dno ekrana: neprijatelj i junak se uništavaju ako neprijatelj pogodi dno ekrana

Preporučeni koraci

Pronađite datoteke koje su stvorene za vas u podmapi your-work. Trebale bi sadržavati sljedeće:

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

Pokrenite svoj projekt u mapi your_work tako da upišete:

cd your-work
npm start

Gornji kod će pokrenuti HTTP server na adresi http://localhost:5000. Otvorite preglednik i unesite tu adresu, trenutno bi trebao prikazati junaka i sve neprijatelje, ništa se još ne kreće :).

Dodajte kod

Postavite pravokutnu reprezentaciju objekta igre za rukovanje sudarima Sljedeći kod omogućuje vam dobivanje pravokutne reprezentacije GameObject. Uredite svoju klasu GameObject kako biste je proširili:

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

Dodajte kod koji provjerava sudar Ovo će biti nova funkcija koja testira presijecaju li se dva pravokutnika:

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

Dodajte mogućnost ispaljivanja lasera

Dodajte poruku za događaj pritiska tipke. Tipka razmaknica trebala bi stvoriti laser neposredno iznad broda junaka. Dodajte tri konstante u objekt Messages:
```
 KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
 COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
 COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
```
Rukujte tipkom razmaknica. Uredite funkciju window.addEventListener za događaj keyup kako biste rukovali razmaknicom:
```
  } else if(evt.keyCode === 32) {
    eventEmitter.emit(Messages.KEY_EVENT_SPACE);
  }
```

Dodajte slušatelje događaja. Uredite funkciju initGame() kako biste osigurali da junak može pucati kada se pritisne razmaknica:

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

i dodajte novu funkciju eventEmitter.on() kako biste osigurali ponašanje kada neprijatelj sudari s laserom:

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

Pomaknite objekt, Osigurajte da se laser postupno kreće prema vrhu ekrana. Stvorit ćete novu klasu Laser koja proširuje GameObject, kao što ste već radili:

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

Rukujte sudarima, Implementirajte pravila sudara za laser. Dodajte funkciju updateGameObjects() koja testira sudare objekata za pogotke:

function updateGameObjects() {
  const enemies = gameObjects.filter(go => go.type === 'Enemy');
  const lasers = gameObjects.filter((go) => go.type === "Laser");
// laser hit something
  lasers.forEach((l) => {
    enemies.forEach((m) => {
      if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
        first: l,
        second: m,
      });
    }
   });
});

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

Pobrinite se da dodate updateGameObjects() u petlju igre u window.onload.

Implementirajte vremensko ograničenje za laser, tako da se može ispaliti samo u određenim intervalima.

Na kraju, uredite klasu Hero kako bi mogla koristiti vremensko ograničenje:

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

U ovom trenutku, vaša igra ima neku funkcionalnost! Možete se kretati pomoću tipki sa strelicama, ispaliti laser razmaknicom, a neprijatelji nestaju kada ih pogodite. Bravo!

🚀 Izazov

Dodajte eksploziju! Pogledajte resurse igre u repozitoriju Space Art i pokušajte dodati eksploziju kada laser pogodi vanzemaljca.

Kviz nakon predavanja

Pregled i samostalno učenje

Eksperimentirajte s intervalima u vašoj igri do sada. Što se događa kada ih promijenite? Pročitajte više o JavaScript vremenskim događajima.

Zadatak

Istražite sudare

Odricanje od odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prevođenje Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za bilo kakve nesporazume ili pogrešne interpretacije koje proizlaze iz korištenja ovog prijevoda.