O que veremos aqui?

Neste post, mostrarei como contabilizar as moedas que o jogador pegar durante o jogo.

Como contabilizar moedas?

De uma maneira simples, contabilizar moedas é basicamente incrementar um contador de moedas e exibir os resultados.

O primeiro passo então é criar um contador de moedas no jogo. Fora de qualquer função então, logo abaixo da função window.onload, crie uma variável que conterá o objeto de texto e outra para conter a contagem das moedas capturadas com valor 0:

window.onload = function() {
    // Cria o cenário com 1220 x 600 px
    game = new Phaser.Game(1000, 640, Phaser.AUTO, '', {
        preload: carregaAssets,
        create: criaCenario,
        update: atualizaJogo
    });
};

// Objeto para exibir texto de moedas
var textoMoedas;
// Contador de moedas
var contadorMoedas = 0;

// Demais código abaixo...

Como essas variáveis estão fora de qualquer função, recebem o nome de variáveis globais, ou seja, podem ser acessadas de qualquer lugar no código do jogo.

Feito isso, crie a função chamada criaTextoPontuacao. Ela será responsável por criar o objeto textoMoedas que será onde aparecerá para o jogador o contador das moedas que ele pegar.

Essa função deve ser criada no final do código (assim como qualquer outra função do jogo).

/**
 *  Função que cria texto de pontuação do jogo
 */
function criaTextoPontuacao(){
    // Cria imagem genérica
    var myBitmap = game.add.bitmapData(200, 40);
    // Define fundo
    myBitmap.context.fillStyle = "#FFFFFF";
    // Desenha retângulo
    myBitmap.context.fillRect(0,0,200,40);
    // Cria sprite e adiciona-a no jogo
    sprite = game.add.sprite(20, 20, myBitmap);
    // Faz sprite seguir câmera
    sprite.fixedToCamera = true;
     
    // Cria texto para exibir pontuação do usuário
    textoMoedas = game.add.text(25, 30, "Pontuação: " + contadorMoedas + " moedas" , {
        font: "18px Arial",
        fill: "#",
        align: "left"
    });

    // Faz texto seguir câmera
    textoMoedas.fixedToCamera = true;
}

Dentro da função criaCenario, você deve chamar a função anteriormente criada. Chamar uma função consiste em inserir seu nome, abre e fecha parênteses, seguido de ponto e vírgula:

function criaCenario(){
    // código que havia aqui...
    
    // Chama função criaTextoPontuacao
    criaTextoPontuacao();
}

Agora, basta criar a função que irá incrementar o contador, e exibir o novo valor de moedas capturadas na tela do jogador:

/**
 *  Incrementa contador de moedas e exibe novo valor para jogador
 */
function contabilizaMoedas(){
    // Incrementa contador
    contadorMoedas++;

    // Atualiza texto
    textoMoedas.setText('Pontuação: ' + contadorMoedas + ' moedas');
}

E por fim, a função contabilizaMoedas deve ser chamada toda vez que uma moeda for capturada. Edite então a função encostouEmMoeda e adicione uma chamada à função contabilizaMoedas:

function encostouEmMoeda(player, moeda) {
    // ... código que já estava aqui

    // Contabiliza moedas
    contabilizaMoedas();
}

O resultado final você confere na imagem abaixo:

Desta maneira simples, podemos agora saber quantas moedas o jogador conseguiu capturar durante o jogo. Simples não?

Jogo em ação

Aqui você pode ver o código que implementamos funcionando. Neste link você pode baixar esta versão do jogo:

O que vem por aí?

No próximo post veremos como matar o inimigo pulando em cima dele.

Até breve!