Tutorial: Jogos em HTML5 – Parte 8: Adicionando Efeito de Sons

O nosso jogo está praticamente finalizado com pontuação e até mesmo salva a nossa melhor pontuação.

Entretanto está silencioso demais. Sim, hoje daremos o nosso último toque no jogo aplicando as SE (Sound Effect, ou Efeitos de Sons) usando a classe Audio.

 

Obtendo os arquivos

Para adicionar sons no nosso jogo, obviamente devemos ter esses sons no computador. Vou passar o link para os dois sons que usei neste tutorial: o primeiro som é Blop (Mark Diangelo), que vai ser usado quando a bola for rebatida e vou nomear o arquivo como Blop.mp3. O segundo som é Mirror Breaking (Mike Koenig), que vai ser usado quando a bola quebrar um tijolo. O nome do arquivo para este segundo som vai ser MirrorBreaking.mp3. Ambos os sons estão sob licença Attribution 3.0.

Outros sons podem ser usados, mas o importante é que atualmente somente 3 tipos de arquivos de sons podem ser usados: MP3, OGG e WAV. Para este tutorial, os arquivos devem estar na mesma pasta do arquivo HTML. Caso esteja em outra pasta, deve-se utilizar o caminho relativo em relação ao HTML.
Carregando e Executando

Com os arquivos adicionados, vamos primeiro criar uma definição global de um vetor que vai guardar os dois sons e, em seguida, instanciaremos um objeto da classe Audio indicando os arquivos de sons que queremos usar:
Definição Global:
01 var sons = new Array();
02 sons[0] = new Audio(‘Blop.mp3’);
03 sons[1] = new Audio(‘MirrorBreaking.mp3’);

Na posição 0 do vetor, instanciei um objeto Audio que tocará o som do arquivo Blop.mp3, enquanto na posição 1 tem outro objeto Audio que tocará o som do MirrorBreaking.mp3.

Agora vou colocar os comandos para executar os sons, começando no método verificaColisao da classe Bola:
Classe Bola:
01 function Bola(x,y,raio)
02   …
03   this.verificaColisao = function(){
04     if((this.x-this.raio)<=0 || (this.x+this.raio)>=400){
05        this.inverterX();
06        sons[0].play();
07     }
08     if((this.y-this.raio)<=0 || detectarColisaoRaquetexBola()){
09        this.inverterY();
10        sons[0].play();
11     }
12     …
13   }
14 }

Usamos o método play() para tocar o som de um objeto Audio, neste caso, o objeto que estiver no vetor sons e na posição 0. Isso fará com que cada vez que houver uma colisão com paredes ou com a raquete, um som Blop será executado.
O próximo som vai ser executado apenas quando um tiijolo for quebrado, então vamos adicionar mais uma linha no método detectarColisaoTijoloxBola:

Classe tijolo:
01 function Tijolo(x,y,largura,altura){
02   …
03   this.detectarColisaoTijoloxBola = function(){
04     …
05     if (distancia < (bola.raio*bola.raio)){
06       …
07       pontos+=1;
08       sons[1].play();
09       return true;
10
11     }
12     return false;
13   }
14 }

Agora o jogo está pronto, aproveite o gostinho de ter um trabalho concluído.
Considerações Finais

Neste tutorial vimos como utilizar a classe Audio para executar SE. Arquivos desse tipo geralmente são muitos curtos e por isso muitas vezes nós simplesmente executamos sem ter a preocupação de ter que parar.

Esse foi o nosso último tutorial de HTML 5 desta temporada. Nestes últimos 2 meses montamos um jogo de Breakout bem simples para conhecer os comandos mais básicos para criar um jogo em HTML 5 como formas, letras, animação cinemática, tratamento de colisão e sons. Em breve, retornarei com outro exemplo de jogo para montarmos, portanto, continue acompanhando o site e até a próxima.

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