Phaser.js #7 – Criando jogo Final!

Estamos chegando ao final de nosso projeto com Phaser pessoal! Lembrando que vocês podem acessar o projeto original em inglês na documentação diretamente no site do Phaser (deixarei o link no final do post).

Pontuação

O que é um jogo sem uma pontuação, não é mesmo? Como saberemos quantas estrelas coletamos?

Para isso, precisamos criar um objeto de jogo de texto. Vamos criar duas variáveis para conter uma pontuação e o objeto de texto:

var score = 0;
var scoreText;

O scoreText será configurado na função create():

scoreText = this.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

A coordenada que exibiremos o texto score: 0 é na 16×16. A fonte padrão de textos do Phaser é a Courier.

Agora, precisamos modificar a função collectStar para que, quando o player coletar uma estrela, o contador seja aumentado, adicionando o nosso score:

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

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

Deste modo, cada vez que coletamos uma estrela, o nosso contador, que é a variável score, é incrementada em 10, ou seja, a cada estrela coletada, +10 pontos para você 🙂

Você pode verificar isso no seu arquivo part9.html!

 

Mas o jogo é só isso?

Errado! Agora, criaremos um “inimigo”. O “inimigo” será uma bomba que, a cada 12 estrelas coletadas, irá surgir na tela. Mas detalhe: essa bomba tem uma velocidade alta! A cada vez que você coletar 12 estrelas, outras 12 estrelas surgirão e uma bomba adicional!

Vamos criar um grupo para as bombas e as suas devidas colisões:

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

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

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

O legal é: As bombas ricochetearão pela plataforma, e, se uma bomba acertar o player, a função hitBomb() será acionada, parando o jogo e deixando o nosso jogador vermelho!

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

    player.setTint(0xff0000);

    player.anims.play('turn');

    gameOver = true;
}

E como lançaremos a bomba no cenário?

Simples, modificaremos a função collectStar() para que, a cada 12 estrelas coletadas, uma bomba apareça na tela!

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');var bomb = bombs.create(x, 16, 'bomb');
        bomb.setBounce(1);.setBounce(1);
        bomb.setCollideWorldBounds(true);.setCollideWorldBounds(true);
        bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);.setVelocity(Phaser.Math.Between(-200, 200), 20);

    }}
}}

Para isso, usaremos um método de grupo chamado countActive, para verificar quantas estrelas faltam para ser capturadas. Se não faltar nenhuma, significa que o player capturou todas. Então, usaremos a função de iteração que reativará todas as estrelas, redefinindo sua posição no eixo Y para 0. Assim, todas as estrelas cairão na tela novamente.

A parte final do código cria uma bomba. Escolhemos uma coordenada aleatória para ela no eixo X, fazendo com que ela apareça sempre no lado oposto da tela ao qual está o jogador, para que ele tenha uma chance de sobrevivência.

Agora que a bomba está criada, ela deve colidir com as plataformas e ricochetear, saltando e com uma velocidade aleatória. Conforme coletamos mais estrelas, mais bombas aparecerão na tela! Você pode verificar o código no seu arquivo part10.html!

E terminamos nosso jogo!

Com essa sequência de postagens, você aprendeu a criar sprites com propriedades físicas, controle de movimento e interações com outros objetos.

Você pode verificar o conteúdo original em inglês em: https://phaser.io/tutorials/making-your-first-phaser-3-game/part10

Gostou desta sequência de artigos? Comente abaixo!