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!