Como criar um jogo em HTML e Javascript – Parte 4

Como criar um jogo em HTML e Javascript - Parte 2Esta é a quarta parte da série de tutoriais “Como criar um jogo em HTML e Javascript” onde ensino passo a passo como criar um jogo em HTML e Javascript puro. Nesta quarta parte iremos criar o objecto “base” que servirá para evitar que a bola colida com o fundo do canvas e iremos configurar os controlos do teclado. 

 

Definir o conceito Base

Actualmente a bola e move-se dentro do nosso canvas livremente mas não existe nenhuma interactividade. Portanto vamos adicionar alguma interactividade, criando uma base que irá colidir com o jogador, sendo que esta base deve ser controlada pelo jogador.

Vamos começar por definir algumas variáveis que nos vão ser úteis. Adicione as seguintes variáveis no topo do seu código, juntamente com as outras variáveis.

No código acima estamos a definir a altura e largura da base e ainda a sua posição de início no eixo dos xx. Estas variáveis serão úteis no futuro para simplificar alguns cálculos.

Agora vamos criar uma função que irá desenhar a base no ecrã. Adicione as função abaixo depois da sua função desenhaBola():

 

Permitir o jogador controlar a base

Já temos uma função que irá desenhar a base sempre que quisermos. Agora resta-nos arranjar uma forma de permitir ao jogador mover essa base. Para isso iremos implementar alguns controlos do teclado. Vamos precisas de:

  1. Duas variáveis para guardar informação de quando a seta para a esquerda ou a seta para a direita estão ou não pressionadas.
  2. Dois leitores de eventos (event listeners) para os eventos keydown e keyup do teclado – Estes leitores de eventos irão chamar uma função nossa que irá tratar esses eventos.
  3. Duas funções para tratarem os eventos keydown e keyup. Estas são as funções que serão chamadas pelo leitos de eventos que descrevi acima e serão executadas sempre que o utilizador pressionar uma tecla do teclado.
  4. Uma forma de mover a base.

Vamos começar por adicionar as variáveis descritas no primeiro ponto. Adicione o seguinte código perto das outras variáveis:

O valor defeito para ambas é false isto acontece porque quando o jogo começa os botões que controlam a base não estão pressionados.

Para detectar quando as teclas são pressionadas vamos adicionar dois leitores de eventos. Adiciona as seguintes linhas acima da função setInterval() que se encontra no fundo do teu código Javascript.

Quando o evento keydown é disparado, numa das teclas do teclado (quando ela é pressionada), a função trataTeclaBaixo() é executada. O mesmo acontece para o segundo leitor de eventos: Quando o evento keyup (acontece quando uma tecla pára de ser pressionada) é disparado, a função trataTeclaCima() é executada. Adicione as funções seguintes depois das linhas addEventListener():

Quando pressiona-mos uma tecla (evento keydown) esta informação é guardada numa variável. A variável correspondente é colocada a true em cada caso. Quando a tecla é libertada (evento keyup), a variável é colocado novamente a false.

Ambas as funções levam um evento como parâmetro, representado pela variável evento. Desta variável conseguimos extrair informação útil como por exemplo, qual a tecla que foi pressionada. O atributo keyCode da variável evento guarda o número da tecla que foi pressionada (cada tecla do teclado tem um número correspondente). O keyCode 37 representa a seta para a esquerda do teclado e o keyCode 39 a seta para a direita. Quando a seta para a esquerda é pressionada a variável teclaEsquerdaPressionada é colocada a true e quando é libertada é colocada a false. Quando a seta para a direita é pressionada a variável teclaDireitaPressionada é colocada a true e quando esta tecla é libertada a variável é colocada a false.

 

Movimento da Base

Já temos as variáveis que guardam a informação útil acerca das teclas pressionadas, os leitores de eventos e as funções que tratam esses eventos. Vamos agora utilizar tudo isto que acabamos de criar para movimentar a base no ecrã.

Dentro da função desenha(), vamos verificar se a seta para a esquerda ou a seta para a direita estão pressionadas. Podemos então criar algo deste género:

Se a tecla para a esquerda está pressionada, a base será movida 7 pixels para a esquerda. Caso a tecla para a direita esteja pressionada, a base será movida 7 pixels para a direita. Isto é um bom avanço, mas a base irá desaparecer do ecrã se pressionarmos uma das teclas durante demasiado tempo. Vamos agora melhorar este aspecto e mover a base apenas dentro dos limites do canvas, alterando o código anterior para este que se segue:

A variável baseX que contém a posição da base no eixo dos xx, pode agora variar apenas entre 0 e canvas.width-baseLargura, isto é exactamente o que nós queremos.

Adicione o bloco de código acima dentro e no final da função desenha().

Agora só nos resta chamar a função desenhaBase() dentro da função desenha() para que a base apareça no ecrã. Adicione a linha seguinte dentro da função desenha(), abaixo da linha desenhaBola():

O resultado de tudo o que fizemos neste post será algo deste género:

Base e Controlos - Preview

 

Download do Código deste Post

Faça o download do código do jogo como ele se deve encontrar após a conclusão deste tutorial. O código encontra-se altamente comentado para que perceba todas a etapas de criação do jogo.

Download

Tem dúvidas? Sugestões? Então deixe um comentário abaixo.

Este tutorial está dividido em 10 partes.

Deixar uma resposta