Quem não se lembra do famoso jogo do tele game, pong?

Bom, se você tem minha idade, talvez você nunca nem tenha ouvido falar em pong ou tele game, então veja a foto abaixo que talvez você reconheça, afinal já tem pong até pro iphone.

Baseado nisso, e tendo como inspiração a onda recente de jogos em javascript, decidi fazer desse, meu primeiro jogo em javascript, fiz do zero, e aqui vou mostrar passo a passo a evolução do script em 12 momentos.

Veja o resultado final:

Ainda deve ter bugs, mas a intenção é somente desenvolver um jogo simples e praticar lógica e conceitos em Javascript. Antes de começar a falar, devo dizer que quem quiser dar uma olhada em como foi feito, tem aqui todos os 12 passos para download.

Então vamos aos passos:

Passo 1 – Montando o HTML / CSS

No passo mais simples de todos, o html e css usado no jogo é montado:

Clique aqui para ver o passo 1.

Passo 2 – Movendo a bolinha

No passo dois é começo da movimentação do jogo, a bolinha começa a se movimentar pra uma direção, aleatóriamente e depois ela bate nas “paredes” e inverte sua direção.

Clique aqui para ver o passo 2.

Passo 3 – Calculando o ponto

Do passo 2 pro três, eu calculo na hora em que a parede passa pela posição da raquete, se ela “bate” na raquete, ou não, caso não bata, é marcado o ponto. (É necessário testar algumas vezes pra conseguir ver o efeito, já que a bolinha começa numa posição randômica).

Clique aqui para ver o passo 3.

Passo 4 – O placar

Agora, toda vez em que um ponto é marcado, o placar é atualizado.

Clique aqui para ver o passo 4.

Passo 5 – Reiniciando a partida

Após um ponto, não é mais necessário apertar F5 pra reiniciar a partida. Em 3 segundos a partida é reiniciada automaticamente. Agora o jogo não tem mais fim.

Clique aqui para ver o passo 5.

Passo 6 – Movendo as raquetes (2 players)

Nesse passo, é onde começa a mover a raquete, e este, é o único em que é possível mover as duas raquetes (o que parece legal, mas não é muito não, é impossível mover as duas raquetes ao mesmo tempo ).

Clique aqui para ver o passo 6.

Passo 7 – Jogando contra o computador

Aqui, a raquete da direita já está automática, qndo a raquete da esquerda rebate, é calculado a trajetória da raquete da direita, que se posiciona automaticamente.

Clique aqui para ver o passo 7.

Passo 8 – Aumentando a velocidade

Agora, a medida em que o jogo for rolando a velocidade da bola vai aumentando, até que o ponto seja efetuado. Depois quando o jogo é reiniciado, a velocidade é voltada ao normal.

Clique aqui para ver o passo 8.

Passo 9 – Batendo na ponta da raquete

Como a direção inicial da bolinha é sorteada, foi implementado o recurso de “bater na ponta da raquete”, que aumenta o angulo da rebatida da bola, e ajuda a enganar o adversário. Nesse passo, também foi implementado um recurso para as raquetes voltarem ao centro da mesa após um ponto for concluído.

Clique aqui para ver o passo 9 .

Passo 10 – Configurando a dificuldade

Pra não ficar muito banal, é possível definir a dificuldade do jogo, antes de começar a partida, a dificuldade interfere na velocidade inicial da bolinha e na velocidade da raquete adversária.

Clique aqui para ver o passo 10 .

Passo 11 – Game Over

Depois de tantos passos, finalmente o jogo tem um fim, vence que fizer 5 pontos primeiro. O jogo pode ser reiniciado depois e ter a dificuldade alterada.

Clique aqui para ver o passo 11 .

Passo 12 – Mouse Wheel

Para facilitar a movimentação da raquete, no passo 12, foi implementado o controle por mouse wheel, baseado naquela função de mouse wheel postada aqui a pouco tempo atrás.

Clique aqui para ver o passo 12 .

Depois do passo 12 alguns ajustes ainda foram (e talvez outros serão) feitos, como velocidade do jogo, e algumas melhorias de desempenho.

Exportando:

E se alguém quiser colocar o jogo em algum lugar, basta chamar o iframe com o código:

<iframe width="460" height="430" frameborder="0" scrolling="no" src="http://www.tidbits.com.br/download/pong/pong.html"></iframe>

Lembrando que deixei disponível todos os 12 passos para download.

E pra quem nunca ouviu falar de tele game, segue uma imagem do que foi um dos primeiros vídeogames:

Quando eu tiver tempo livre, vou fazer um jogo estilo arkanoid, com fases, records e tudo mais.

[]s