Making your first Phaser 3 game - Part 10 - Bouncing Bombs

Para deixar nosso jogo mais completo, ├® hora de adicionar alguns vil├Áes. Isso dar├í um bom elemento de desafio, algo que antes estava faltando.

A ideia ├®: Quando voc├¬ coletar todas as estrelas pela primeira vez, ser├í lan├ºado uma bomba saltitante. A bomba ir├í saltar aleatoriamente pela fase e se voc├¬ colidir com ela, voc├¬ morre. Todas as estrelas ir├úo reaparecer para que voc├¬ as colete de novo, e se voc├¬ o fizer, uma nova bomba ser├í lan├ºada. Isto ir├í dar ao jogador um desafio: conseguir a pontua├º├úo mais alta sem morrer.

A primeira coisa que precisamos ├® um Group para as bombas e alguns Colliders:

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

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

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

As bombar ir├úo quicar nas plataformas, e se o player encostar nelas n├│s iremos chamar a fun├º├úo hitBomb. Ela ir├í parar o jogo e pintar o player de vermelho.

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

    player.setTint(0xff0000);

    player.anims.play('turn');

    gameOver = true;
}

At├® agora tudo bem, mas n├│s precisamos soltar as bombas. Para fazer isto modificaremos a fun├º├úo 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);

    }
}

N├│s utilizamos um m├®todo do Grupo chamado countActive para ver quantas estrelas sobraram vivas. Se n├úo houver nenhuma, ent├úo o jogador coletou todas, com isso n├│s utilizamos a fun├º├úo de iterate para reativar todas as estrelas e resetar suas posi├º├Áes para zero. Isto far├í com que todas as estrelas caiam do topo da tela de novo;

A pr├│xima parte do c├│digo cria a bomba. Primeiro n├│s escolhemos uma coordenada x aleat├│ria, sempre no lado oposto ao player, apenas para dar uma chance a ele. Ent├úo a bomba ├® criada, ela ├® configurada para colidir com o world, quicar e ter uma velocidade aleat├│ria.

O resultado final ├® este pequeno sprite de bomba que salta pela tela. pequena o bastante para ser facilmente evitada, no come├ºo, mas assim que os n├║meros aumentam come├ºa a ficar bem dif├¡cil!

E o nosso jogo est├í feito :)

Conclus├úo

Voc├¬ agora aprendeu como criar um sprite com propriedades f├¡sicas, controlar seu movimento e torna-lo interativo com outros objetos em um pequeno game world. Existem muitas outras coisas que voc├¬ pode fazer para aperfei├ºoar este jogo. Por que n├úo expandir o tamanho da fase e permitir que a c├ómera role? Talvez adicionar vil├Áes de diferentes tipos, diferentes valores, ou dar ao player uma barra de vida.

Ou para um jogo n├úo violento, voc├¬ pode torna-lo um speed-run e desafiar o jogador a coletar as estrelas o mais r├ípido poss├¡vel.

Com o que voc├¬ aprendeu neste tutorial, e as centenas de exemplos dispon├¡veis, voc├¬ deve ter agora uma funda├º├úo s├│lida para futuros projetos. Mas como sempre, se voc├¬ tiver uma d├║vida, precisar de um conselho, ou quer compartilhar o que voc├¬ estr├í trabalhando, ent├úo sinta-se a vontade para pedir ajuda no f├│rum do Phaser.

Facebook Instant Games

Phaser 3 agora tem suporte total para criar Facebook Instant Games. Agora voc├¬ aprendeu como criar um jogo utilizando o Phaser, por qu├¬ n├úo ver como ├® f├ícil converte-lo em um Instant Game no nosso Guia de primeiros passos.