Aby zamkna─ç nasz projekt musimy doda─ç do niego jeszcze wrog├│w. Do┼éo┼╝y to element wyzwania do gry, co┼ø czego do tej pory brakowa┼éo.

Idea jest następująca: gdy za pierwszym razem uzbierasz wszystkie gwiazdki uwolni to odbijającą się bombę. Będzie się ona losowo przemieszczała po planszy, jeżeli ją dotkniesz, po prostu zginiesz. Wszystkie gwiazdki się automatycznie odtworzą gdy je wyłapiesz. Scenariusz z bombą również się powtórzy. Gracz będzie musiał uzbierać jak najwięcej punktów i nie zginąć.

Pierwsze czego potrzebujemy to grupa z bombami i dodanie odpowiednich Collider'├│w:

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

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

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

Bomby naturalnie będą spadać z platform i jeżeli gracz ich dotknie wywołamy funkcję zwrotną hitBomb. Wszystko co będzie ona wykonywać to zatrzymanie gry i kolorowanie gracza na czerwono:

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

    player.setTint(0xff0000);

    player.anims.play('turn');

    gameOver = true;
}

Do tej pory wszsytko jasne ale musimy w końcu zrzucić tę bombę. Aby tego dokonać zmodyfikujmy funkcję 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);

    }
}

Wykorzystamy metodę typową dla grup zwaną countActive. Sprawdzimy za jej pomocą ile jeszcze pozostało gwiazdek w grze. Jeżeli ich już nie ma, wykorzystamy iterację żeby je wszystkie przwyrócić i zresetować ich pozycję. To sprawi, że gwiazdki ponownie spadną z nieba.

W nast─Öpnym kroku kod stworzy bomb─Ö. Najpierw wylosujemy losowy punkt w osi x, zawsze po przeciwnej stronie ni┼╝┬ágracz - damy mu w ten spos├│b szans─Ö na prze┼╝ycie. Kiedy bomba zostanie stworzona ustawimy j─à na koliduj─àc─à ze ┼øwiatem i nadamy jej losow─à pr─Ödko┼ø─ç.

W rezultacie powyższego uzyskamy ładny mały sprite bomby, który losowo będzie się odbijał po ekranie gry. Będzie on na tyle niewielki, że łatwo go ominać. Jeżeli jednak pojawi się ich kilka gra stanie się o wiele trudniejsza!

image

I oto sko┼äczyli┼ømy pierwsz─à gr─Ö :)

Podsumowanie

Nauczy┼ée┼ø si─Ö┬ájak stworzy─ç sprite'a z w┼éa┼øciwo┼øciami fizycznymi, kt├│re umo┼╝liwiaj─à kontrole jego ruchu i interakcj─Ö z innymi obiektami w ┼øwiecie gry. Mo┼╝esz rozwin─à─ç ten projekt na wiele sposob├│w. Dlaczego nie powi─Ökszy─ç┬áobszaru gry i pozwoli─ç kamerze na ┼øledzenie gracza? Mo┼╝e dodasz r├│┼╝nych przeciwnik├│w, r├│┼╝ne znajd┼║ki albo nawet pasek ┼╝ycia dla gracza?

┼╗eby pozbawi─ç gr─Ö jakiegokolwiek elementu przemocy i nada─ç jej charakter speed-run mo┼╝esz zmusi─ç gracza do jak najszybszego zebrania wszystkich gwiazdek.

Z pomoc─à tego co nauczy┼ée┼ø si─Ö┬áw tym poradniku i tysi─Öcy przyk┼éad├│w dost─Öpnych w sieci, powiniene┼ø mie─ç solidn─à podstaw─Ö dla Twojego nast─Öpnego projektu. Je┼╝eli b─Ödziesz mia┼é jakie┼ø pytania albo b─Ödziesz potrzebowa─ç pomocy, napisz ┼ømia┼éo na forum Phasera.

Facebook Instant Games

Phaser 3 wspiera w pełni tworzenie gier typu Facebook Instant Games. Jeżeli już potrafisz stworzyć własną grę, dlaczego nie przekonwertujesz jej dla Facebook'a za pomocą tutorialu Getting Started Guide?