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
Danilo gosta de novas tecnologias é focado em HTML5 / Javascript.
February 26th, 2009 at 12:08 pm
Eu tenho um Telejogo Philco em casa que ainda funciona! hehe
Mas, cara, mto boa a implementação! Só não consegui ganhar da máquina! hehe
February 26th, 2009 at 9:33 pm
Bem legal mas nada que vc já não tivesse postado .. mas achei super 10 cara .. como disse o Benseler, boa a implementação.
-
Minha avó tem um atari e eu aqui em casa tenho um nintendo \o/ pedaços dele hehe .
-
flw guri .. abração
February 28th, 2009 at 6:38 pm
ehehhe! legal, achei um novo passatempo. Só preciso aprender a ganhar pq tá difícil!!!
abraços!
March 1st, 2009 at 12:28 pm
Nossa parabéns Danilão!
Você ta ficando muito bom nesses efeitos de animação, muito bom mesmo!
Não é nada fácil fazer um jogo assim.
Grande.
March 1st, 2009 at 9:14 pm
Olá Danilo, a paz de Deus entre nos! Estou visitando, parabéns por tão maravilhoso trabalho. Seu Post está magnífico gostei. Excelente. Votos de muito sucesso e muita proteção. Encontraremos-nos sempre por aqui. Estou esperando sua visita. Quero desejar um ótimo final de semana para você, amigos e familiares. Fique com Deus, muito brilho. Forte abraço.
Valdemir Reis
August 28th, 2009 at 6:43 pm
cara kd os codigo
e a explicação?
April 24th, 2011 at 7:42 pm
Pensei que você fosse expicar como fez o jogo. :(