Tutorial: Jogos em HTML5 – Parte 6: Adicionando Pontuação e Mensagens

HTML 5No último tutorial, finalizamos o básico do jogo. Nós temos a raquete, a bola e os tijolos, assim como cada um desses elementos interagem entre si. Agora podemos nos preocupar mais com alguns detalhes, que apesar de não serem fundamentais, melhoram a experiência com o jogo.

A primeira dessas melhorias é o que chamamos de HUD (Heads-Up Display), que mostra informações sobre o jogo durante o mesmo. Aqui vamos fazer com que cada tijolo quebrado dê um ponto e vamos mostrar esta pontuação em tempo real. Também irei explicar como mostrar mensagens de acordo com o estado do jogo. Então vamos começar.

Fazendo a Pontuação

Para marcar a pontuação é tão simples quanto mexer em variáveis: vamos adicionar nas definições globais uma variável chamada “pontos”, dessa maneira:

Definição Global:
01 var pontos = 0;

Aqui indicamos que temos uma variável que armazenará a pontuação e que a mesma se iniciará com o valor 0.
Agora, vamos programar a parte que ganharemos os pontos. Será dado um ponto para cada tijolo que é quebrado. Para indicar ao programa que devemos adicionar pontos, vamos modificar o código onde ocorre o tratamento de colisão da bola com o tijolo, que segundo o tutorial passado, ocorre na classe Tijolo no método detectarColisaoTijoloxBola(), ficando dessa maneira:

Classe Tijolo:
01 function Tijolo(x,y,largura,altura){
02   this.x = x;
03   this.y = y;
04   this.largura = largura;
05   this.altura = altura;
06
07   this.pintar = function(){
08  …
12   }
13
14 this.detectarColisaoTijoloxBola = function(){
15  …
20  if (distancia < (bola.raio*bola.raio)){
21   if(bola.x>this.x && bola.x<(this.x+this.largura)){
22    bola.inverterY();
23   }else if(bola.y>this.y && bola.y<(this.y+this.altura)){
24    bola.inverterX();
25   }else{
26    bola.inverterY();
27    bola.inverterX();
28   }
29   pontos+=1;
30   return true;
31  }
32  return false;
33   }
34
35 }

A única coisa que fizemos foi adicionar na linha 29 o código para aumentar 1 ponto. Esta linha está restrita ao condicional de colisão do tijolo, ou seja, ela só vai ser executada quando a bola atingir o tijolo.

Exibindo as Informações

Agora, vamos fazer com que a pontuação apareça na tela. Para isso, vamos alterar a função pintar(), colocando no final o seguinte código:

Classe Pintar:
01 function pintar(){
02   contexto.clearRect(0,0,400,600);
03   jogador.pintar();
04   bola.pintar();
05
06   for(t in tijolos){
07  tijolos[t].pintar();
08   }
09
10   contexto.font = “18pt monospace”;
11   contexto.fillText(pontos,350,595);
12
13 }

Aqui, as novidades estão nas linhas 10 e 11, que são comandos utilizados para que possamos escrever no Canvas. Na linha 10, nós estamos selecionando a fonte, que no nosso caso, é de tamanho 18pt do tipo Monospace. Para alterar o tamanho, coloque outro valor no lugar de 18, enquanto para especificar uma fonte, você substitui o “monospace” pelo nome da fonte que deseja. Já na linha 11, usamos o método do Contexto chamado fillText() para escrever a pontuação. Os dois números que vem em seguida são respectivamente a posição x e y do texto. Entretanto, preste atenção, pois por padrão, essa posição y é onde fica a base da linha do texto e a posição x a margem esquerda. Porém essa configuração pode ser modificada, mas não veremos neste tutorial.

Se testarmos agora, teremos uma tela semelhante a esta:

Informações conforme o Estado de Jogo

Vamos fazer uma melhoria: mostrar outras informações ou mensagens conforme o estado do jogo. Por exemplo, o jogo inicia pausado, então exibiremos uma mensagem com “Aperte Espaço para iniciar”. Em jogo, mostraremos a pontuação. Caso o jogador perdeu, aparecerá a mensagem “Fim de Jogo” e, se venceu, a mensagem “Você venceu”.
Vamos alterar o nosso pintar para a seguinte maneira:

Classe Pintar:
01 function pintar(){
02   contexto.clearRect(0,0,400,600);
03   jogador.pintar();
04   bola.pintar();
05
06   for(t in tijolos){
07  tijolos[t].pintar();
08   }
09
10   contexto.font = “18pt monospace”;
11   switch(estado){
12     case 0:
13  contexto.fillText(“Aperte ESPACO para iniciar”,12,295);
14  break;
15     case 1:
16        contexto.fillText(pontos,350,595);
17  break;
18     case 2:
19        contexto.fillText(“Fim de Jogo”,125,295);
20        break;
21     case 3:
22        contexto.fillText(“Voce venceu”,125,295);
23        break;
24   }
25
26 }

Aqui alteramos a parte que adicionamos e colocamos dentro de um “switch” filtrando por estado. De acordo com o caso, ele vai usar um dos comandos para exibir. Note que aqui nós não colocamos acentos ou cedilhas, isto porque seriamos obrigado a definir uma codificação para o HTML e por enquanto, quero facilitar ao máximo. Caso você utilize um caractere que não é suportado pela codificação, esse caractere será substituído pelo caractere de espaço.

Considerações Finais

No tutorial de hoje, nós criamos o HUD de nosso jogo usando o método fillText para escrever texto no Canvas. Assim como outros comandos de desenho do Contexto vistos no primeiro tutorial, existe um método strokeText o qual somente o contorno das letras é desenhado.

Ensinei também a mostrar as informações de acordo com a máquina de estados do jogo, criando um melhor feedback para o jogador. É importante o jogo mostrar informações extras pertinentes ao jogador para que ele saiba o que fazer. Um exemplo bom disso é o fato do jogo começar pausado e somente a tecla espaço que libera o mesmo, mas sem nenhuma mensagem, pois um jogador novo perderia muito tempo até achar o botão correto para iniciar a partida. Com isso, o tutorial de hoje está finalizado.

Thalisson Christiano de Almeida

Thalisson Christiano de Almeida

Formado em Ciência da Computação (UDESC). Foi Programador da Céu Games e professor do Técnico em Informática do SENAI-SC. Atualmente, trabalha na empresa By Seven. Já foi jogador de xadrez e praticou kung-fu, ambos por 4 anos. Hoje é praticante do Jiu-jitsu, esperando que não fique nos 4 anos. Não tem preferência de tipos de jogos em especifico, variando desde jogos casuais de Facebook até jogos mais hardcore.

Send this to a friend