Pong em JavaScript, Notas de estudo de Informática

Baixe Pong em JavaScript e outras Notas de estudo em PDF para Informática, somente na Docsity!

Programando

PONG

com

DHTML

Jogador 1: Jogador 2:

Diego A. Oliveira

Sumário

• 1 O Que é Esse DHTML?
• 2 E Qual a Desvantagem do DHTML?
  • 2.1 Por Que O PONG?
  • 2.2 O Que Vamos Precisar?
  • 2.3 O Canvas
  • 2.4 Visualizando o Canvas
  • 2.5 Desenho no Canvas
  • 2.6 Final de Seção
• 3 OBJETOS NO JAVASCRIPT
  • 3.1 O Objeto Bola
  • 3.2 Placar
  • 3.3 Final de Seção
• 4 O Loop de Animação
  • 4.1 Desenhando Linhas
  • 4.2 Final de Seção
• 5 DETECÇÃO DE TECLA
  • 5.1 Final de Seção
• 6 MOVIMENTO DAS BARRAS
  • 6.1 Explicando o Que Aconteceu
  • 6.2 Final de Seção
• 7 MOVIMENTO DA BOLA E COLISÃO
  • 7.1 Velocidade da Bola
  • 7.2 Fim de Seção
• 8 Placar
  • 8.1 Final de Seção
• 9 MELHORANDO A PERFORMASSE [Opcional]
• 10 LIVROS INDICADOS

1 O Que é Esse DHTML?

O DHTML (Dinamic Hiper Text Markup Language) é a junção de três outras linguagens o JavaScript, o Css e o HTML. Mas, jogos em DHTML na verdade levam muito pouco de HTML e Css a maior parte do trabalho fica mesmo com o JavaScript. A vantagem do JavaScript em relação as demais linguagens é que ela é interpretada pelo browser. O que significa que desde que você tenha um OS com um browser moderno instalado será capaz de testar seu trabalho. Outra vantagem é que você não pre- cisa instalar nada em sua máquina, pois você necessitará apenas de um editor simples de texto. Por fim o JavaScript tem uma ex- celente curva de aprendizado. São tantos recursos que em pouco tempo você já será capaz de fazer coisas impressionantes.

2 E Qual a Desvantagem do DHTML?

Existem várias linguagens de programação e apesar do que muita gente acredita, eu já vi até professores universitários afir- marem isso, elas não são todas iguais. Cada linguagem possui uma característica própria que facilita uma ou outra tarefa. Temos que nos lembrar que o JavaScript foi criado para dar interação a páginas Web e não para criação de jogos. Assim, temos de lidar com algumas limitações. Por exemplo:

ˆ O JavaScript não trabalha com ambientação 3D;

ˆ Como é interpretada pelo browser possui as limitações gráficas do browser;

ˆ O debug é difícil;

ˆ É necessário testar seus códigos em vários navegadores.

A linguagem mais indicada para criação de jogos, segundo al- guns profissionais, é a linguagem C. Esta linguagem é normal- mente usada para programação de sistemas que envolvam pro- cessamento pesado. Mas, se você pretende desenvolver jogos simples que não exijam muito do hardware pode perfeitamente utilizar-se do JavaScript.

2.1 Por Que O PONG?

O PONG é um jogo relativamente simples de programar, por isso muitos livros de programação o apresentam em suas páginas finais. Sendo simples é um excelente ponto de partida para quem está começando.

2.2 O Que Vamos Precisar?

Para desenvolver com o DHTML você precisa apenas de um navegador atualizado e um editor de texto simples. Eu recomendo o Sublime Text como editor de texto e o Google Chrome como navegador. No entanto, você pode usar o bloco de notas e o IE. O problema é que o IE só conseguem interpretar bem o DHTML a partir da sua 9 ^ versão (IE9). O que você não deve fazer é usar o Word ou WordPad como editores. Isso porque esses programas têm o habito de "mudar" o texto que escrevemos.

Como já disse, o HTML5 é uma tecnologia que ainda está sendo implementada nos navegadores de modo que é bom ter um se- gundo navegador para testar. Como segundo navegador eu re- comendo o Firefox. Um programa que funciona bem no Chrome e no Firefox normalmente bem funciona nos demais.

2.3 O Canvas

O Canvas é uma tecnologia presente nas especificações do HTML5 e já está implementada em todos os navegadores inclu- sive no IE9. Essa tecnologia surgiu com a proposta de adicionar mais interatividade a páginas web, querendo inclusive substituir o Flash como recurso multimídia. A forma mais simples de se pensar no Canvas é como uma folha de papel em branco. Nesta folha é que "desenhamos" ou colocamos os elementos do jogo.

Existe mais de uma forma de criar o elemento Canvas em uma página HTML, veja:

1

O innerHeight retorna a altura da tela do browser em seu dis- positivo enquanto o innerWidth a largura. Se (if) a largura for maior ou igual a 700 pixel então as dimensões do Canvas será de 600x480 pixeis. Caso contrário (else), será de 400x320 pixeis.

Como esse tutorial não é voltado para tablets ou celulares va- mos usar o Canvas por meio das tags. Mas, o leitor deve ficar a vontade em escolher uma outra forma.

Se o Canvas é um elemento do HTML posso passar os valores de width e height usando css?

Se esta pergunta passou pela sua cabeça então é a resposta para ela é SIM e NÃO. O Canvas pode receber dimensões tam- bém via Css, no entanto, evite ao máximo fazer isso. Por motivos que não será discutido aqui, o resultado disso quase sempre são imagens desfocadas e feias na sua tela. E não queremos um jogo com imagens assim.

2.4 Visualizando o Canvas

O código a seguir cria um Canvas com dimensões iguais a 600x480 pixels.

1 O navegador nao suporta o Canvas.

Contudo, se você abrir o seu navegador não verá absoluta- mente nada. Na verdade, o Canvas já está presente você apenas não consegue vê-lo. Para conseguirmos ver o Canvas podemos recorrer ao Css.

1 canvas{ 2 position: absolute; 3 top: 0px; 4 bottom: 0px; 5 left: 0px; 6 right: 0px; 7 margin: auto; 8 background-color: black; 9 }

O css acima não só centraliza o Canvas como também coloca- lhe um fundo negro. Se você abrir agora seu navegador verá um retângulo negro. Esse retângulo é o Canvas e consequentemente a tela do jogo.

O primeiro método indica a cor que será usada para desenhar no Canvas.

//Síntese do método ctx.fillStyle = ’cor’;

O segundo método (fillRect), desenha retângulos.

//Síntese do método ctx.fillRect(x, y, w, h);

Os valores x e y correspondem a posição do canto superior esquerdo do retângulo. O w a largura e h a altura.

As coordenadas para a tela do navegador funcionam como na figura acima.

Para desenhos um pouco mais complexos, como um circulo, necessitamos criar um patch (caminho). Veja a seguir como de- senhar um circulo de diâmetro igual a 14.

1 ctx.beginPath(); /* Inicio do patch / 2 ctx.arc(50, 50, 14, 0, Math.PI2, true); 3 ctx.closePath(); /* Fim do Patch */ 4 ctx.fillStyle = ’red’; 5 ctx.fill();

Primeiro iniciamos o Patch e dentro dele colocamos o script necessário para desenhar a bola. Em seguida fechamos o pacth. Contudo, a criação do pacth não implica no desenho de nada no seu Canvas. Por isso usamos o fill logo abaixo. Ele é que respon- sável por desenhar o conteúdo do patch dentro do Canvas.

2.6 Final de Seção

No final de cada seção será dado o código completo desen- volvido até o momento. Isso servirá tanto para que você possa acompanhar o próximo capitulo, caso você venha a se perder em alguma passagem, quanto para que você consiga se organizar melhor.

Até o momento o que temos do nosso jogo é o seguinte:

1 2 3 4 15 Pong com HTML5 e JavaScript 16 17 18 O navegador nao suporta o Canvas do HTML5. 19 23 24

3 OBJETOS NO JAVASCRIPT

Não é meu objetivo explicar detalhadamente o que são obje- tos no JavaScript, assim ensinarei apenas o necessário para que prossigamos. Mas, antes veja a cara final do jogo que vamos fazer.

Para criar a raquete esquerda poderíamos simplesmente escr- ever.

1 ctx.fillRect(560,190,25,100);

Onde 560 seria a coordenada x, 190 a coordenada y em que a raquete começaria a ser desenhada. O valor 25 é a largura da barra e 100 a altura que ela terá. Contudo, existe uma forma mais eficiente. Primeiro criamos uma função que deverá receber por valor todos os valores necessários para desenhar a raquete.

1 function Raquete(x,y,larg,alt){ 2 this.x = x; 3 this.y = y; 4 this.largura = larg; 5 this.altura = alt; 6 }; 7 Raquete.prototype.draw = function(){ 8 9 };

O que acabamos de fazer foi criar um método para a classe Raquete. No momento ele está vazio mas, faremos com que esse método desenhe a raquete sempre que requisitado.

1 function Raquete(x,y,larg,alt){ 2 this.x = x; 3 this.y = y; 4 this.largura = larg; 5 this.altura = alt; 6 }; 7 Raquete.prototype.draw = function(){ 8 ctx.fillStyle = ’white’; 9 ctx.fillRect(this.x,this.y,this.largura,this.altura); 10 };

O this indica que o fillRect está recebendo o valor da classe ao qual o método pertence. Agora quando quisermos desenhar a raquete podemos escrever somente:

playerR.draw();

O trecho de código a seguir mostra a raquete da direita desen- hada no Canvas.

1 function Raquete(x,y,larg,alt){ 2 this.x = x; 3 this.y = y; 4 this.largura = larg; 5 this.altura = alt; 6 }; 7 Raquete.prototype.draw = function(){ 8 ctx.fillStyle = ’white’; 9 ctx.fillRect(this.x,this.y,this.largura,this.altura); 10 }; 11

12 var playerR = new Raquete(560,190,25,100); 13 14 /* Chamando o metodo draw */ 15 playerR.draw();

Raquete mais a direita.

Note que usamos dentro do método draw a variável ctx. Como estamos utilizando todo o javascript num único arquivo e ctx é global não teremos nenhum problema. Mas, se estivéssemos es- crevendo o javascript em um arquivo externo o ideal seria passar a classe também á variável. Para que você se acostume a fazer atualize sua classe Raquete para receber a variável ctx.

1 function Raquete(x,y,larg,alt,ctx){ 2 this.x = x; 3 this.y = y; 4 this.largura = larg; 5 this.altura = alt; 6 /Recebendo ctx/ 7 this.ctx = ctx; 8 }; 9 Raquete.prototype.draw = function(){ 10 /* o metodo draw tambem se altera */

3.1 O Objeto Bola

Vamos dar uma olhada no nosso script até agora.

1 function Raquete(x,y,larg,alt,ctx){ 2 this.x = x; 3 this.y = y; 4 this.largura = larg; 5 this.altura = alt; 6 this.ctx = ctx; 7 }; 8 Raquete.prototype.draw = function(){ 9 this.ctx.fillStyle = ’white’; 10 this.ctx.fillRect(this.x,this.y,this.largura,this.altura) ; 11 }; 12 var playerR = new Raquete(560,190,25,100,ctx); 13 var playerL = new Raquete(10, 190, 25, 100,ctx); 14 15 playerR.draw(); 16 playerL.draw();

Antes de continuar certifique-se que você é capaz de entender cada linha.

Se você compreendeu bem essa parte de objetos você não terá dificuldade em entender o código a seguir que implementa o objeto bola e o desenha no canvas quando o método draw é solicitado.

1 function Boll(x,y,diametro,ctx){ 2 this.x = x; 3 this.y = y; 4 this.diametro = diametro; 5 this.ctx = ctx; 6 }; 7 Boll.prototype.draw = function(){ 8 this.ctx.beginPath(); 9 this.ctx.arc(this.x, this.y, this.diametro, 0, Math.PI*2, true); 10 this.ctx.closePath(); 11 this.ctx.fillStyle = ’white’; 12 this.ctx.fill(); 13 }; 14 15 var bola = new Boll(50, 190, 14, ctx);

16 17 bola.draw();

Bola decentralizada.

O script acima gera uma bola decentralizada. Para resolver isso basta alterar os valores do objeto bola para isso:

1 var bola = new Boll(canvas.width/2, canvas.height/2, 14, ctx);

Agora a bola ficara no meio do Canvas. Lembre-se, a var- iável canvas guarda as configurações do canvas que criamos as- sim canvas.width retorna o valor do width que fornecemos para o Canvas e a barra (/) seguida pelo dois divide esse valor pela metade.