Jogo em javascript, Notas de estudo de Matemática

Baixe Jogo em javascript e outras Notas de estudo em PDF para Matemática, somente na Docsity!

Construindo

JOGOS

JavaScript

Diego Oliveira

com

Sum´ario

• 1 O Que Vamos Fazer?
• 2 Come¸cando
  • 2.1 O Canvas
  • 2.2 Objetos
  • 2.3 Desenhando a Barra
• 3 Teclado e Movimento
  • 3.1 Teclado
  • 3.2 Movimento da Barra
• 4 Movimento da Bola e Colis˜oes
  • 4.1 Pontua¸c˜ao
• 5 Tempo no Jogo
• 6 Tela Final

1 O Que Vamos Fazer?

O jogo que ser´a feito ´e bastante simples, basicamente trata-se de uma barra que tenta aparar bolas que caem do “c´eu”. Se vocˆe j´a jogou Fruit Basket ou o Fruit Collection no Android. A ideia ´e praticamente a mesma.

Fruit Basket: apanhando frutas na cesta.

O jogo criado ter´a mais ou menos a seguinte cara.

Scoore: 0

Tela inicial

Tela final

Eu digo “mais ou menos” porque o resultado final depende do navegador que vocˆe estar´a usando. As imagens acima, por exemplo, s˜ao do Firefox.

A jogabilidade ser´a bastante simples, e muita semelhante `a do PONG. Enquanto a barra se move para direita e esquerda tentamos capturas as bolas que caem. Sendo que cada bola vale 5 pontos e existe um tempo limite para que essas bolas seja coletadas.

2.1 O Canvas

Vamos come¸car criando a tela do jogo. Essa tela ser´a o ele- mento Canvas. O Canvas ´e um elemento novo presente apenas no HTML5. Podemos pensar nele como uma esp´ecie de folha de papel em branco. Nessa folha ´e que desenhamos os elementos do jogo.

Existe mais de uma forma de criar o elemento Canvas. A mais simples ´e utilizando o pr´oprio HTML.

Outra forma ´e usando JavaScript.

Em ambos os casos vocˆe deve informar os valores num´ericos dos atributos width e height (largura e a altura) que o elemento Canvas ter´a.

O id (identificador) ´e uma esp´ecie de endere¸co do Canvas. Necessitamos dele pois uma p´agina html pode ter mais de um Canvas.

No primeiro caso, podemos informar os atributos width e height via Css, o que n˜ao recomendo. O resultado disso quase sempre s˜ao imagens feias e desfocadas no seu jogo.

Vocˆe pode usar qualquer uma das duas formas apresentadas para criar o Canvas, ou at´e outra se desejar. Contudo, a cria¸c˜ao do Canvas por meio de javascript ´e uma abordagem mais profis- sional. Ela tamb´em possui algumas vantagens sobre as outras.

Ent˜ao, para come¸car vamos criar uma tela de 600 x 600 pixeis sem usar a tag .

Para visualizar a ´area do Canvas vamos colocar-lhe uma cor de fundo e centraliza-lo no navegador. Isso ´e feito usando Css.

2.2 Objetos

O jogo proposto possui apenas dois “personagens”: a barra deslizante e as bolas que caem. Vamos criar ent˜ao dois arrays para guardar vari´aveis relacionadas a estes dois personagens.

Esse tipo de array em javascript ´e chamado de objeto lit- eral. Poder´ıamos tamb´em usar construtoras mas, devido a sim- plicidade do jogo n˜ao h´a necessidade disso.

3 Teclado e Movimento

3.1 Teclado

A detec¸c˜ao das teclas do teclado ´e feita atrav´es dos ouvintes (listener) do JavaScript. Com eles podemos controlar o movimento da barra.

Mas, antes de declarar esses ouvintes, primeiro criamos um array vazio.

Esse array ir´a guardar os c´odigos das teclas que forem pressionadas.

Os ouvintes ser˜ao usados para “preencher” e “esvaziar” esse array. Por isso usaremos dois “ouvintes” keyup (para preencher) e o keydown (para esvaziar).

Quando uma tecla ´e pressionada, por exemplo a de c´odigo 38, o ouvinte keydown chama a fun¸c˜ao KeyDown e passa para ela, por valor, o c´odigo da tecla. Ent˜ao, a fun¸c˜ao por sua vez acrescenta ao arrey keys o elemento keys[38] = true.

Quando a tecla ´e solta o listener keyup chama a fun¸c˜ao KeyUp e a mesma retira o elemento keys[38] do array tornando o vazio (na verdade indefinido) novamente.

Isso j´a ´e o suficiente para que as teclas de seu teclado sejam reconhecidas pelo browser.

3.2 Movimento da Barra

Em resumo o que temos da implementa¸c˜ao dos ouvintes ´e o seguinte: se uma tecla est´a sendo pressionada seu c´odigo est´a dentro do array keys. Em qualquer outro caso n˜ao.

E esse resultado que vamos ter sempre em mente agora.´

Para implementar o movimento da barra vamos escrever uma nova fun¸c˜ao chamada movimento.

Para que a fun¸c˜ao movimento tenha algum efeito visualmente modifica- se a fun¸c˜ao create para o seguinte:

Se tudo ocorrer bem j´a ser´a poss´ıvel verificar o deslocamento da barra com os bot˜oes left e right do se teclado. Se a velocidade ficar muito baixa mude o valor da vari´avel barra.speed para um valor maior.

enemies[0] = [bola.x, bola.y, bola.diametro]; enemies[1] = [bola.x + 170, bola.y + 20, bola.diametro]; enemies[2] = [bola.x + 340, bola.y + 40, bola.diametro]; enemies[3] = [bola.x + 510, bola.y + 60, bola.diametro]];

O JavaScript n˜ao tem uma estrutura pr´opria para matrizes. O que pode- mos fazer ´e simplesmente colocar array dentro de array. E assim que supri-´ mos o problema para a falta de uma estrutura pr´opria para matrizes.

Agora que temos todos os dados das quatro bolas vamos desenha-las na tela. Para isso, basta criar uma fun¸c˜ao como a fun¸c˜ao seguinte

E chama-la dentro da fun¸c˜ao create.

O resultado final deve ser parecido com a imagem a seguir.

Agora j´a ´e poss´ıvel ver as 4 bolas do jogo paradas pr´oximas ao topo da tela. No entanto, n˜ao queremos que elas venham do meio da tela, mas sim de cima. Por isso altere a vari´avel y do objeto bola para −80.

Fazendo essa altera¸c˜ao as bolas devem desaparecer da tela. Elas ainda existem, mas n˜ao podemos vˆe-las, pois elas est˜ao “acima” da ´area do Canvas. Quando fizermos as bolas se deslocarem verticalmente isso dar´a a im- press˜ao de que as bolas est˜ao caindo do c´eu. Para fazer as bolas se movi- mentarem para baixo vamos atualizar a fun¸c˜ao movimento para o seguinte

O resultado do que foi feito at´e agora ser˜ao bolas caindo de posi¸c˜oes diferentes toda vez que vocˆe atualizar o navegador. As vezes vocˆe ver´a apenas uma ou duas bolas ou tˆes ou quatro, isso porque algumas delas estar˜ao caindo fora da tela.

Outra coisa que vocˆe deve notar ´e que embora as bolas comecem caindo de uma posi¸c˜ao aleat´oria ela n˜ao se modifica ap´os o jogo ter iniciado. Para mudar a posi¸c˜ao x da bola tamb´em quando ela retorna para cima altere a fun¸c˜ao movimento, com muita aten¸c˜ao, para a forma a seguir.

Experimente executar o seu script no browser. Agora as bolas parecem cair em posi¸c˜oes aleat´orias.

4.1 Pontua¸c˜ao

Antes de prosseguir vamos melhorar um pouco a legibilidade do c´odigo. Primeiro vamos colocar o desenho da barra num prototype.

E dentro da fun¸c˜ao create() no lugar das linhas

substitu´ımos por apenas:

Sempre que a bola colidir sobre a barra do jogo deve se atribuir alguma pontua¸c˜ao ao jogador.

Come¸camos por declarar mais uma vari´avel que chamaremos de placar. Essa vari´avel ter´a de ser igual a zero. Que ´e a pontua¸c˜ao no qual quase todo placar come¸ca.

Essa vari´avel ficar´a respons´avel por guardar os pontos do jogador. Agora altere a fun¸c˜ao create() para o seguinte:

Agora escrevemos mais um prot´otipo para o objeto barra chamado scoore.

5 Tempo no Jogo

Para finalizar vamos acrescentar um contador ao jogo. Assim o objetivo do jogador ser´a fazer a maior pontua¸c˜ao poss´ıvel antes do contador finalizar o jogo.

Implementar esse contador ´e muito simples. Primeiro criamos uma vari´avel chamada time com valor igual a zero.

Agora criamos a fun¸c˜ao tempo()

E alteramos a fun¸c˜ao bf create acrescentando a chamada da fun¸c˜ao:

Agora a cada vez que a fun¸c˜ao desenho se repete (a cada 10 milissegun- dos) a vari´avel time ´e acrecida em uma unidade. E quando finalmente chega a mil chama uma janela de alerta parando o jogo.

Agora o o jogo possui um objetivo. Conseguir a maior pontua¸c˜ao poss´ıvel antes do contador finalizar o jogo. Se achar que o tempo ficou demasiada- mente curto, altere a fun¸c˜ao tempo(), a seu gosto.

6 Tela Final

Deixar uma janela de alerta finalizando o seu jogo ´e algo que podemos considerar, no m´ınimo, esteticamente feio.

Vamos ent˜ao resolver isso criando mais uma fun¸c˜ao para indicar o fim do jogo. A fun¸c˜ao ser´a a seguinte:

Uma vez escrita a fun¸c˜ao final(), altere a fun¸c˜ao tempo para:

E tamb´em a fun¸c˜ao create()