History

leestott 7cfaffabb5 🌐 Update translations via Co-op Translator		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 translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Unescape Escape

Sukurkite kosminį žaidimą, 4 dalis: pridėkime lazerį ir aptikime susidūrimus

Klausimai prieš paskaitą

Šioje pamokoje išmoksite šaudyti lazeriais naudodami JavaScript! Į žaidimą pridėsime du dalykus:

Lazerį: šis lazeris bus iššautas iš herojaus laivo ir judės vertikaliai aukštyn.
Susidūrimų aptikimą, kaip dalį šaudymo funkcionalumo, taip pat pridėsime keletą žaidimo taisyklių:
- Lazeris pataiko į priešą: priešas miršta, jei jį pataiko lazeris.
- Lazeris pataiko į ekrano viršų: lazeris sunaikinamas, jei pataiko į ekrano viršutinę dalį.
- Priešo ir herojaus susidūrimas: priešas ir herojus sunaikinami, jei susiduria vienas su kitu.
- Priešas pasiekia ekrano apačią: priešas ir herojus sunaikinami, jei priešas pasiekia ekrano apačią.

Trumpai tariant, jūs – herojus – turite pataikyti į visus priešus lazeriu, kol jie nepasiekia ekrano apačios.

✅ Pasidomėkite apie pirmąjį kada nors sukurtą kompiuterinį žaidimą. Kokios buvo jo funkcijos?

Būkime herojiški kartu!

Susidūrimų aptikimas

Kaip aptikti susidūrimus? Turime galvoti apie žaidimo objektus kaip apie stačiakampius, kurie juda. Kodėl? Na, vaizdas, naudojamas žaidimo objektui piešti, yra stačiakampis: jis turi x, y, plotį ir aukštį.

Jei du stačiakampiai, t.y. herojus ir priešas, susikerta, įvyksta susidūrimas. Kas turėtų nutikti, priklauso nuo žaidimo taisyklių. Norint įgyvendinti susidūrimų aptikimą, reikia:

Būdo gauti stačiakampio reprezentaciją žaidimo objektui, kažkas panašaus į tai:

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

Palyginimo funkcijos, kuri gali atrodyti taip:

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

Kaip sunaikinti objektus

Norint sunaikinti objektus žaidime, reikia pranešti žaidimui, kad jis nebeturėtų piešti šio objekto žaidimo cikle, kuris vyksta tam tikru intervalu. Vienas būdas tai padaryti – pažymėti žaidimo objektą kaip mirusį, kai kažkas nutinka, pavyzdžiui:

// collision happened
enemy.dead = true

Tada galite pašalinti mirusius objektus prieš atnaujindami ekraną, pavyzdžiui:

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

Kaip iššauti lazerį

Lazerio iššovimas reiškia reakciją į klavišo paspaudimą ir objekto sukūrimą, kuris juda tam tikra kryptimi. Todėl reikia atlikti šiuos veiksmus:

Sukurti lazerio objektą: iš herojaus laivo viršaus, kuris sukūrimo metu pradeda judėti aukštyn link ekrano viršaus.
Priskirti kodą klavišo įvykiui: reikia pasirinkti klavišą klaviatūroje, kuris reprezentuos žaidėjo šaudymą lazeriu.
Sukurti žaidimo objektą, kuris atrodo kaip lazeris, kai paspaudžiamas klavišas.

Lazerio šaudymo pertraukos

Lazeris turi būti iššaunamas kiekvieną kartą, kai paspaudžiamas klavišas, pavyzdžiui, tarpas. Kad žaidimas nesukurtų per daug lazerių per trumpą laiką, reikia tai išspręsti. Sprendimas – įgyvendinti vadinamąją pertrauką, laikmatį, kuris užtikrina, kad lazeris gali būti iššaunamas tik tam tikru dažniu. Tai galite įgyvendinti taip:

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

✅ Peržiūrėkite pirmąją pamoką apie kosminį žaidimą, kad prisimintumėte apie pertraukas.

Ką sukurti

Turėsite paimti esamą kodą (kurį turėjote išvalyti ir pertvarkyti) iš ankstesnės pamokos ir jį išplėsti. Galite pradėti nuo II dalies kodo arba naudoti kodą iš III dalies pradžios.

patarimas: lazeris, su kuriuo dirbsite, jau yra jūsų išteklių aplanke ir nurodytas jūsų kode

Pridėkite susidūrimų aptikimą, kai lazeris susiduria su kažkuo, turėtų būti taikomos šios taisyklės:
1. Lazeris pataiko į priešą: priešas miršta, jei jį pataiko lazeris.
2. Lazeris pataiko į ekrano viršų: lazeris sunaikinamas, jei pataiko į ekrano viršutinę dalį.
3. Priešo ir herojaus susidūrimas: priešas ir herojus sunaikinami, jei susiduria vienas su kitu.
4. Priešas pasiekia ekrano apačią: priešas ir herojus sunaikinami, jei priešas pasiekia ekrano apačią.

Rekomenduojami žingsniai

Raskite failus, kurie buvo sukurti jums aplanke your-work. Jame turėtų būti:

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

Pradėkite savo projektą aplanke your_work įvesdami:

cd your-work
npm start

Aukščiau pateiktas kodas paleis HTTP serverį adresu http://localhost:5000. Atidarykite naršyklę ir įveskite šį adresą, šiuo metu turėtų būti matomas herojus ir visi priešai, tačiau niekas dar nejuda :).

Pridėkite kodą

Sukurkite stačiakampio reprezentaciją savo žaidimo objektui, kad galėtumėte aptikti susidūrimus Žemiau pateiktas kodas leidžia gauti stačiakampio reprezentaciją GameObject. Redaguokite savo GameObject klasę, kad ją išplėstumėte:
```
rectFromGameObject() {
    return {
      top: this.y,
      left: this.x,
      bottom: this.y + this.height,
      right: this.x + this.width,
    };
  }
```

Pridėkite kodą, kuris tikrina susidūrimus Tai bus nauja funkcija, kuri testuoja, ar du stačiakampiai susikerta:

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

Pridėkite lazerio šaudymo funkcionalumą

Pridėkite klavišo įvykio pranešimą. Tarpas turėtų sukurti lazerį tiesiai virš herojaus laivo. Pridėkite tris konstantas į Messages objektą:
```
 KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
 COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
 COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
```
Tvarkykite tarpo klavišą. Redaguokite window.addEventListener funkciją, kad ji tvarkytų tarpo klavišą:
```
  } else if(evt.keyCode === 32) {
    eventEmitter.emit(Messages.KEY_EVENT_SPACE);
  }
```

Pridėkite klausytojus. Redaguokite initGame() funkciją, kad užtikrintumėte, jog herojus gali šaudyti paspaudus tarpo klavišą:

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

ir pridėkite naują eventEmitter.on() funkciją, kad užtikrintumėte elgesį, kai priešas susiduria su lazeriu:

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

Judinkite objektą, Užtikrinkite, kad lazeris palaipsniui judėtų ekrano viršaus link. Sukurkite naują Laser klasę, kuri išplečia GameObject, kaip darėte anksčiau:

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

Tvarkykite susidūrimus, Įgyvendinkite lazerio susidūrimo taisykles. Pridėkite updateGameObjects() funkciją, kuri testuoja susidūrimus tarp objektų:

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

Įsitikinkite, kad pridėjote updateGameObjects() į savo žaidimo ciklą window.onload.

Įgyvendinkite pertrauką lazeriui, kad jis galėtų būti iššaunamas tik tam tikru dažniu.

Galiausiai, redaguokite Hero klasę, kad ji galėtų turėti pertrauką:

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

Šiuo metu jūsų žaidimas turi tam tikrą funkcionalumą! Galite naviguoti naudodami rodyklių klavišus, šaudyti lazeriu paspaudę tarpo klavišą, o priešai dingsta, kai juos pataikote. Puikiai padirbėta!

🚀 Iššūkis

Pridėkite sprogimą! Pažvelkite į žaidimo išteklius Space Art repo ir pabandykite pridėti sprogimą, kai lazeris pataiko į ateivį.

Klausimai po paskaitos

Apžvalga ir savarankiškas mokymasis

Eksperimentuokite su intervalais savo žaidime. Kas nutinka, kai juos pakeičiate? Skaitykite daugiau apie JavaScript laiko įvykius.

Užduotis

Susipažinkite su susidūrimais

Atsakomybės atsisakymas:
Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą Co-op Translator. Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Dėl svarbios informacijos rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.

README.md Unescape Escape