Tutorial: Jogos em HTML5 – Parte 7: Hi-Score

No último tutorial, adicionamos um sistema de pontuação. Entretanto, um sistema de pontuação não tem muito sentido se não tivermos uma meta de superação.

Então, no tutorial desta semana, vamos criar um sistema de Hi-score, ou seja, ele vai guardar e mostrar a maior pontuação que já foi feita no jogo. E o mais interessante, não importa se foi fechado o navegador, ele sempre vai manter a pontuação máxima, pelo menos até limpar os caches do navegador.

Salvando a Pontuação

Primeiro, vamos simplesmente criar uma definição global para o nosso hiscore:

Definição Global:
01 var hiscore;

Essa variável global é que vai guardar a maior pontuação. Agora, vamos criar uma função que salvará a pontuação na variável hiscore. Vamos chamá-la de setarhiscore:

Função setarhiscore:
01 function setarhiscore(){
02  if(pontos>hiscore){
03     hiscore = pontos;
04     localStorage.setItem(“hiscore”,pontos);
05  }
06 }

É uma função bem simples e pequena: primeiro verificamos se a quantidade de pontos do jogador é maior que a maior pontuação obtida. Se for, então o hiscore passa a ser a quantidade de pontos e então usamos o objeto do sistema localStorage para guardar a pontuação.

O objeto localStorage funciona como Cookies do HTML5, salvando e carregando informações no computador do jogador. Aqui, na linha 04, nós usamos o método setItem para guardar a pontuação do jogador. O primeiro parâmetro é a chave, ou o nome que vamos nos referir quando formos usar esta informação. O segundo parâmetro é a informação que será salva. Essa informação será convertida em dados no formato texto.

Agora que criamos a função, existem duas situações em que este método será chamado: a primeira é quando o jogador perde e a outra é quando o jogador ganha. Então vamos adicionar uma linha adicional em cada uma das condições.
A condicional que faz a verificação de vitória está na função mainloop, vamos modificar conforme o que está abaixo:

Função mainloop:
01 function mainloop()
02   …
03   if(tijolos.length==0){
04   estado=3;
05   setarhiscore()
06    }
07    …
08 }

E a condição que verifica a derrota está no método verificaColisao da classe Bola, então mudaremos o método adicionando o setarhiscore assim como fizemos anteriormente:

Classe Bola:
01 function Bola(x,y,raio)
02   …
03   this.verificaColisao = function(){
04      …
05      if((this.y-this.raio)>=600){
06        estado=2;
07        setarhiscore()
08      }
09   }
10   …
11 }

E assim, a pontuação mais alta estará salva.

 

Carregando a Pontuação e Exibindo o Hiscore

Para carregar a pontuação é mais simples ainda, basta adicionar algumas linhas logo após a declaração da variável Hiscore:

Definição Global:
01 var hiscore;
02 dado = parseInt(localStorage.getItem(“hiscore”));
03 hiscore = (isNaN(dado))?0:dado;

Na linha 02, nós usamos o método getItem para pegar o hiscore que foi salvo. Como o localStorage salva os dados como texto, precisamos convertê-los para números e guardamos em uma variável chamada dado. Na linha 03, o que será atribuído ao hiscore dependerá se o que estiver armazenado em dado é ou não um número. Então, usamos a função isNaN (isNaN = is Not a Number)para verificar se o conteúdo de dado é um número. Se ele não for, preencheremos com 0, caso contrário, usaremos o número armazenado em dado como hiscore.

Se você fez tudo aqui, até pode ter tentado executar, mas como saber se está funcionando direito? Vamos colocar para exibir o Hiscore. Para isso, vamos adicionar umas linhas na função pintar:

Função Pintar:
01 function pintar(){
02 …
03   contexto.fillText(“Hi-Score”,5,575);
04   contexto.fillText(hiscore,5,595);
05 }

Agora testando, ficará algo semelhante a isso:

Considerações Finais

Hoje criamos um sistema de Hiscore no nosso jogo e, consequentemente, vimos como utilizar o objeto localStorage para salvar e carregar dados no computador do jogador. Existe também o objeto sessionStorage, que possui os mesmos métodos, entretanto, diferente do localStorage, uma vez que o navegador é fechado, os dados serão apagados.

Então pessoal, até a próxima semana com o último tutorial da nossa primeira temporada de HTML5. Até mais!

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