(Parte 1 de 3)

Programando

PONG com

DHTML Jogador 1: Jogador 2:

Diego A. Oliveira

Sumário

1 O Que é Esse DHTML? 4

2.1 Por Que O PONG?5
2.2 O Que Vamos Precisar?5
2.3 O Canvas5
2.4 Visualizando o Canvas8
2.5 Desenho no Canvas9
2.6 Final de Seção13

2 E Qual a Desvantagem do DHTML? 4

3.1 O Objeto Bola19
3.2 Placar21
3.3 Final de Seção2

3 OBJETOS NO JAVASCRIPT 14

4.1 Desenhando Linhas26
4.2 Final de Seção28

4 O Loop de Animação 24

5.1 Final de Seção34

5 DETECÇÃO DE TECLA 30

6.1 Explicando o Que Aconteceu36
6.2 Final de Seção39

6 MOVIMENTO DAS BARRAS 35

7.1 Velocidade da Bola46
7.2 Fim de Seção48

7 MOVIMENTO DA BOLA E COLISÃO 42

8.1 Final de Seção53

8 Placar 51 9 MELHORANDO A PERFORMASSE [Opcional] 56 10LIVROS INDICADOS 58

Introdução e Avisos

Se você já fez disciplinas como algoritmo, lógica de programação ou mesmo cálculo numérico então você já deu o primeiro passo para o mundo da programação, isso mesmo o primeiro passo. Isso porque estas disciplinas trabalham apenas o básico e estão bem longe do que se deseja para formar um programador de nível mediano. Se no entanto, você nunca teve nenhum contato com nenhuma linguagem pare a leitura desta apostila e procure em uma biblioteca, ou mesmo na internet aulas sobre lógica de programação. Todos os livros ou tutoriais sobre jogos, por mais básico que sejam e venha com frases como: "aprenda passo a passo", "a partir do básico", "for dummies" e etc., requerem um conhecimento razoável pelo menos em lógica de programação. E se você não o têm, não conseguirá entender completamente o seu conteúdo. E esta apostila não é diferente.

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 precisa instalar nada em sua máquina, pois você necessitará apenas de um editor simples de texto. Por fim o JavaScript tem uma excelente 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 afirmarem 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 alguns profissionais, é a linguagem C. Esta linguagem é normalmente usada para programação de sistemas que envolvam processamento 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 segundo navegador para testar. Como segundo navegador eu recomendo o Firefox. Um programa que funciona bem no Chrome e no Firefox normalmente bem funciona nos demais.

O Canvas é uma tecnologia presente nas especificações do

HTML5 e já está implementada em todos os navegadores inclusive 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:

2 /* Cria o elemento */ 3 canvas = document.createElement("myCanvas");

4 /* Dimensoes do elemento */ 5 canvas.width = 600;

6 canvas.height = 480; 7 document.body.appendChild(canvas); 8 </script>

No primeiro exemplo criamos o elemento Canvas usando a tag <canvas>, assim como faríamos como um elemento qualquer do HTML. Note que foi dado ao canvas um id (identificador) e os atributos width e height (largura e altura). Esses três atributos (id, width e height) são indispensáveis para se trabalhar com o Canvas.

A vantagem dessa abordagem é que podemos colocar alguma mensagem indicando que o browser não suporta essa tecnologia entre as tags. Caso o browser a suporte, esse conteúdo é ignorado:

O segundo exemplo apresenta o mesmo resultado que o primeiro.

Note que também precisamos informar uma id e valores para os atributos width e height, assim como no exemplo anterior.

Embora essa ultima abordagem seja um pouco mais complicada ela possui uma vantagem. Podemos, por exemplo, criar o elemento Canvas de acordo com o tamanho da tela do browser do seu PC, celular ou tablet.

1 <script> 2 function Tela(){ 3 alturaBrowser = window.innerHeight; 4 larguraBrowser = window.innerWidth; 5 if(larguraBrowser >= 700){ 6 larguraBrowser = 600; 7 alturaBrowser = 480; 8 }else{ 9 larguraBrowser = 400; 10 alturaBrowser = 320; 1 } 12 }; 13 14 Tela(); 15 16 canvas = document.createElement("myCanvas"); 17 canvas.width = alturaBrowser; 18 canvas.height = larguraBrowser; 19 20 document.body.appendChild(myCanvas);

21 /* Cria uma borda preta ao redor do Canvas */ 2 canvas.style.border = "1px solid #0";

O innerHeight retorna a altura da tela do browser em seu dispositivo 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 vamos 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 també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 <canvas id="myCanvas" width="600" height="480">O navegador nao suporta o Canvas.</canvas>

Contudo, se você abrir o seu navegador não verá absolutamente 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 colocalhe 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.

2.5 Desenho no Canvas

Para desenhar no Canvas usamos o método getContext. Esse método possui vários outros métodos que nos permitem desenhar várias formas como quadrados, círculos e etc..

Entretanto, esse método é um pouco complicado de se usar, assim, para facilitar o seu uso, é muito comum guardar suas configurações em uma variável veja como:

1 <script type="text/javascript"> 2 var canvas = document.getElementById(’myCanvas’); 3 var context = canvas.getContext("2d"); 4 </script>

Primeiro criamos a variável global canvas ("c" minusculo) e nela guardamos as configurações do elemento cuja id foi passada. No caso o Canvas.

Em seguida criamos outra variável global chamada ctx (context) que recebe o método getContext do canvas. Note que passamos como parâmetro ao método getContext, uma string identificando o contexto desejado. No caso o contexto 2d ("d" em minusculo).

Agora que temos as configurações do getContext na variável ctx podemos acessar os métodos do getContext como muita facilidade. Veja por exemplo como podemos usar os métodos fillStyle e fillRect para desenhar um quadrado vermelho.

1 <script type="text/javascript"> 2 var canvas = document.getElementById(’myCanvas’); 3 var ctx = canvas.getContext("2d"); 4

5 /* Muda a cor dos desenhos para vermelho */ 6 ctx.fillStyle = ’red’;

O resultado será o seguinte:

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.

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 desenhar um circulo de diâmetro igual a 14.

3 ctx.closePath(); /* Fim do Patch */ 4 ctx.fillStyle = ’red’;

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 responsável por desenhar o conteúdo do patch dentro do Canvas.

Como o Pong usa apenas barras e uma bola não irei explorar essa parte de desenho no Canvas mas, muita coisa legal pode ser desenhada usando patch. Basta procurar no Google para ver.

2.6 Final de Seção

No final de cada seção será dado o código completo desenvolvido 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 <!DOCTYPE html> 2 <html lang = "pt-br"> 3 <head> 4 <style type="text/css"> 5 canvas{ 6 position: absolute; 7 top: 0px; 8 bottom: 0px; 9 left: 0px; 10 right: 0px; 1 margin: auto; 12 background-color: black; 13 } 14 </style> 15 <title>Pong com HTML5 e JavaScript</title> 16 </head> 17 <body> 18 <canvas id="myCanvas" width="600" height="480">O navegador nao suporta o Canvas do HTML5.</canvas> 19 <script type="text/javascript"> 20 var canvas = document.getElementById(’myCanvas’); 21 var ctx = canvas.getContext("2d"); 2 </script> 23 </body> 24 </html>

3 OBJETOS NO JAVASCRIPT

Não é meu objetivo explicar detalhadamente o que são objetos 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 escrever.

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 };

A esse tipo de função damos o nome de classe. Em seguida guardamos essa classe dentro de uma variável, chamada playerR (R de right) e passamos a função Raquete os parâmetros solicitados. A esse processo damos o nome de instância.

Um objeto nada mais é do que uma classe instanciada. Assim o que acabamos de criar foi um objeto chamado playerR.

Agora ao invés de usar

Podemos usar

1 ctx.fillRect(playerR.x,playerR.y,playerR.largura,playerR. altura);

Ambos terão o mesmo efeito. Usar objetos deixa o código bem mais organizado e agiliza em certas ocasiões a escrita de seus scripts. Mesmo que você tenha que escrever um pouco mais vale a pena.

Outra coisa interessante sobre objetos é que podemos passar funções como atributos utilizando os chamados protótipos. Por exemplo, abaixo da função Raquete escreva o seguinte:

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 desenhada 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 }; 1

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 escrevendo 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 */

1 this.ctx.fillStyle = ’white’; 12 this.ctx.fillRect(this.x,this.y,this.largura,this.altura) ; 13 }; 14

Uma vez que criamos a raquete da direita criar a raquete da esquerda é fácil. Isso, porque podemos aproveitar a classe Raquete que criamos. Para desenhar a raquete esquerda escrevemos apena o seguinte.

3 /* Desenha o objeto no Canvas */ 4 playerL.draw();

Raquetes do jogo.

Viu como foi simples. A maior vantagem de se trabalhar com objetos, além da organização, é a possibilidade de aproveitar ao máximo o que já foi escrito.

3.1 O Objeto Bola

Vamos dar uma olhada no nosso script até agora.

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();

(Parte 1 de 3)

Comentários