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.

← Previous