Jogo Em Javascript

Transcript

Construindo com JOGOS JavaScript Diego Oliveira Sum´ ario 1 O Que Vamos Fazer? 3 2 Come¸ cando 2.1 O Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.2 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.3 Desenhando a Barra . . . . . . . . . . . . . . . . . . . . . . . 5 6 7 8 3 Teclado e Movimento 3.1 Teclado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.2 Movimento da Barra . . . . . . . . . . . . . . . . . . . . . . . 9 9 10 4 Movimento da Bola e Colis˜ oes 11 4.1 Pontua¸c˜ ao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 5 Tempo no Jogo 18 6 Tela Final 19 Aviso! Essa apostila ´e uma esp´ecie de continua¸c˜ao da apostila do PONG, que pode ser baixada de gra¸ca em: https://pt.azdoctips.com/doc/153261572/1/PONG-COM-HTML5-E-JAVASCRIPT ´ poss´ıvel que se prossiga sem a leitura da apostila anterior, contudo E as explica¸c˜ oes desta apostila s˜ao menos detalhadas. Assim, uma ou outra passagem pode parecer um tanto mal explicada. Em outras palavras, para prosseguir ´e necess´ ario um pr´e-requisito um pouco maior do que a simples no¸c˜ ao de l´ ogica de programa¸c˜ao. 2 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 3 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. 4 2 Come¸ cando Abra seu editor de texto (eu sugiro o sublime text) e escreva uma estrutura bem b´ asica de um arquivo HTML. N˜ ao ´e nem de longe meu objetivo ensinar HTML mas, como necessitamos saber o b´ asico dele segue uma r´apida explica¸c˜ao do que foi escrito acima. • O ´e uma tag padr˜ao do HTML5 e informa ao navegador que o que est´a sendo escrito ´e HTML5. • A tag marca o in´ıcio do c´odigo HTML enquanto marca seu fim. Al´em disso informamos na tag html que a l´ıngua que usaremos ´e o portuguˆes. No entanto, essa informa¸c˜ ao ´e u ´til apenas para os indexadores de busca de modo que se desejarmos podemos substituir por apenas . • A tag permite a inclus˜ao de textos com acentos ou cedilhas. Se vocˆe n˜ao for incluir texto junto do seu jogo seu uso ´e dispens´avel. • A tag marca ´a ´area de cabe¸calho do seu c´odigo. • A tag marca o fim. • As tags e marcam o in´ıcio e fim do corpo do c´ odigo HTML a maior parte do c´odigo que ser´a escrito ficar´a nesta ´ area. 5 2.1 O Canvas Vamos come¸car criando a tela do jogo. Essa tela ser´a o elemento 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 profissional. 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 . 6 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 literal. Poder´ıamos tamb´em usar construtoras mas, devido a simplicidade do jogo n˜ ao h´a necessidade disso. 7 2.3 Desenhando a Barra Agora que j´ a declaramos e preenchemos o array que guarda as configura¸c˜ oes da barra vamos desenha-la na tela. Primeiro declaramos uma var´avel, que chamarei de ctx (context), que ir´ a guardar o contexto gr´afico do Canvas. Isso facilitar´ a bastante a escrita do script. Em seguida criamos uma fun¸c˜ao que ser´a de fato a respons´avel por desenhar a barra na tela. Agora vocˆe j´ a poder´a ver a barra e o player. 8 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. 9 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. ´ esse resultado que vamos ter sempre em mente agora. E 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 modificase 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. 10 4 Movimento da Bola e Colis˜ oes Agora que j´ a temos o controle da barra vamos fazer as bolas que “caem”. Lembre-se que em capitulo anterior criamos o objeto bola. No entanto, o jogo n˜ ao ter´a apenas uma bola mas 4. Assim, precisaremos de 4 objetos e n˜ ao de apenas um. Uma op¸c˜ao seria criar manualmente mais trˆes objetos semelhante ao objeto bola acima, a outra ´e criar um la¸co que fa¸ca isso pra gente. Somente para tornar as coisas mais interessantes vamos usar um la¸co. Primeiro criamos um vetor vazio. Agora usamos um la¸co para preencher esse vetor. O m´etodo push() adiciona um ou mais elementos ao final de um array. Assim o nosso array enemies que antes era vazio agora possui quatro ´ındices e cada ´ındice guarda um conjunto de valores. Veja: 11 enemies[0] enemies[1] enemies[2] enemies[3] = = = = [bola.x, bola.y, bola.diametro]; [bola.x + 170, bola.y + 20, bola.diametro]; [bola.x + 340, bola.y + 40, bola.diametro]; [bola.x + 510, bola.y + 60, bola.diametro]]; O JavaScript n˜ ao tem uma estrutura pr´opria para matrizes. O que pode´ assim que suprimos fazer ´e simplesmente colocar array dentro de array. E 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. 12 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 impress˜ ao de que as bolas est˜ ao caindo do c´eu. Para fazer as bolas se movimentarem para baixo vamos atualizar a fun¸c˜ao movimento para o seguinte 13 Incrementamos a vari´ avel y de cada bola de modo que elas se desloquem para baixo. E quando finalmente todas as bolas chegam at´e a parte inferior da tela as mesmas s˜ ao retornadas para sua posi¸c˜ao inicial. E assim num loop sem fim. Experimente ver isso em seu navegador. Infelizmente, o jogo n˜ ao ficar´a muito divertido, se as bolas ca´ırem sempre do mesmo lugar. Por isso vamos adicionar um c´alculo para fazer a posi¸c˜ao x da bola variar de forma quase aleat´oria. Para conseguir isso altere a loop disso: para isso O objeto Math.random nada mais ´e que um gerador de n´ umeros pseudoaleat´ orios no intervalo [0, 1). Assim, quando preenchemos o vetor enemies o fazemos com coordenadas diferentes de x para cada desenho da bola. 14 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 15 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. 16 E finalmente chamamos o prot´otipo dentro da fun¸c˜ao create. Ou ´nico problema ´e que quando a fun¸c˜ao acima ´e chamada ela incrementa em 13 unidades a vari´ avel placar do objeto barra. Isso ocorre porque a pontua¸c˜ ao ´e acrescentada de uma em uma unidade enquanto as bolas passam pela barra. Em outras palavras enquanto a bola est´a passando pela barra o placar est´ a sendo aumentado. Resolver este problema ´e f´acil. Basta alterar dentro do prototype scoore a linha: if(enemies[i][1] > (canvas.height - barra.alt)) De modo que ela se ajuste a seu gosto. Como por exemplo: if(enemies[i][1] > (canvas.height-1)) 17 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. vari´ avel chamada time com valor igual a zero. Primeiro criamos uma 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 milissegundos) 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 demasiadamente curto, altere a fun¸c˜ ao tempo(), a seu gosto. 18 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() 19 Experimentando agora depois de um tempo ser´a poss´ıvel ver uma tela com a frase “Acabou” e com a pontua¸c˜ao final obtida pelo jogador. 20