Vytvorenie tvojej prvej hry v programe Phaser 3

Našu hru zavŕšime pridaním podliakov. Tak pridáme do hry peknÛ prvok vÛzvy, niečo, čo nám zatiaĝ chÛbalo.

Myšlienka je nasledujúca: keď vyzbieraš všetky hviezdy, neviditeĝnÛ podliak hodí po tvojom hráčovi odráŝajúcu sa bombu. Táto bomba sa bude náhodne odráŝať po úrovni a ak sa s ňou postava zrazí, tak zomrie. S bombou sa opäť objavia aj hviezdy, takŝe ich postava môŝe zbierať a po ich vyzbieraní sa vypustí dalšia bomba aj s hviezdami. Hráč čelí vÛzve: získaj pred smrťou čo najväčšie skóre.

Prvou vecou, ktorú potrebujeme je skupina pre bomby a pár Colliderov:

bombs = this.physics.add.group();

this.physics.add.collider(bombs, platforms);

this.physics.add.collider(player, bombs, hitBomb, null, this);

Bomby sa budú samozrejme odráŝať od plošiniek a ak sa s nimi zrazí postava, zavoláme funkciu 'hitBomb'. Táto funkcia zastaví hru a sfarbí hráča do červena:

function hitBomb (player, bomb)
{
    this.physics.pause();

    player.setTint(0xff0000);

    player.anims.play('turn');

    gameOver = true;
}

Bombu v┼íak potrebujeme vypusti┼Ñ. Uprav├¡me preto funkciu collectStar:

function collectStar (player, star)
{
    star.disableBody(true, true);

    score += 10;
    scoreText.setText('Score: ' + score);

    if (stars.countActive(true) === 0)
    {
        stars.children.iterate(function (child) {

            child.enableBody(true, child.x, 0, true, true);

        });

        var x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);

        var bomb = bombs.create(x, 16, 'bomb');
        bomb.setBounce(1);
        bomb.setCollideWorldBounds(true);
        bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);

    }
}

Pou┼¥ijeme skupinov├║ met├│du countActive, aby sme zistili, ko─¥ko m├íme akt├¡vnych hviezd. Ak n├ím met├│da vr├íti O, tak to znamen├í, ┼¥e ich na┼ía postava v┼íetky vyzbierala. Pomocou met├│dy iterate, ich znovu v┼íetky obnov├¡me a nastav├¡me im y-ov├║ poz├¡ciu na nulu. V─Åaka tomu spadn├║ v┼íetky hviezdy znovu zhora obrazovky.

V ďalšej části kódu vytvoríme bombu. Najskôr vyberieme jej náhodnu x-ovú pozíciu tak, aby bola vŝdy na opačnej strane obrazovky, neŝ je postava, jednoducho preto, aby sme jej dali šancu na záchranu. Potom nastavíme bombu tak, aby kolidovala s hranicami sveta, odráŝala sa a mala náhodnú rÛchlosť.

VÛsledkom je bombička, ktorá sa odráŝa na obrazovke. Je natoĝko malá, ŝe sa jej dá na začiatku ĝahko vyhnúť, ale čoskoro, keď sa ich počet zväčší, to bude o dosť ťaŝšie!

A tÛm je naša hra hotová :)

Záver

Nau─ìil si sa, ako vytvori┼Ñ sprite s fyzik├ílnymi vlastnos┼Ñami, vie┼í ovl├ída┼Ñ jeho pohyb a interakciu s ostatn├¢mi objektmi v malom hernom svete. Existuje v┼íak ve─¥a mo┼¥nost├¡ ako vylep┼íi┼Ñ t├║to hru. ─îo takto zv├ñ─ì┼íi┼Ñ ve─¥kos┼Ñ ├║rovne a necha┼Ñ skrolova┼Ñ kameru, prida┼Ñ ─Åal┼íie typy podliakov, ─Åal┼íie cenn├® predmety, ktor├® by postava mohla zbiera┼Ñ alebo prida┼Ñ indik├ítor zdravia postavy?

Ak nemáš rád násilie, môŝeš zmeniť typ hry na časovku, kde budeš merať hráčovi čas, za ktorÛ vyzbiera všetky hviezdy.

S t├¢m, ─ìo si sa nau─ìil v tomto kurze a s pomocou stoviek pr├¡kladov, ktor├® s├║ k dispoz├¡cii, by si mal ma┼Ñ sol├¡dny z├íklad pre dal┼íie projekty. Ak m├í┼í ot├ízky, potrebuje┼í radu alebo chce┼í zdie─¥a┼Ñ to, na ─ìom pracuje┼í, tak cho─Å na f├│rum.

Instantn├® hry na Facebooku

Phaser 3 plne podporuje tvorbu instantn├¢ch hier na Facebooku. Pr├íve si sa nau─ìil vytv├íra┼Ñ hru vo frameworku Phaser. Pozri sa, ak├® je ─¥ahk├® skonvertova┼Ñ ju na instantn├║ hru v nasleduj├║com n├ívode: Ako za─ìa┼Ñ s instantn├¢mi hrami pre Facebook.