No ú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.
