www.indiegamerbrasil.

com Tutorial bsico de games Lio 4

IndieGamerBrasil.com
Tutorial bsico de games
(c) 2013 by Cleuton Sampaio
Lio 4: Finalizando

Voc tem a liberdade de:

Compartilhar copiar, distribuir e transmitir a obra.

Com as seguintes condies:

Atribuio Voc deve creditar a obra da forma especificada pelo autor ou licenciante
(mas no de maneira que sugira que estes concedem qualquer aval a voc ou ao seu uso da
obra).

Uso no comercial Voc no pode usar esta obra para fins comerciais.

Vedada a criao de obras derivadas Voc no pode alterar, transformar ou criar em

cima desta obra.

Leia mais sobre esta licena em: http://creativecommons.org/licenses/by-nc-nd/3.0/br/legalcode.

www.indiegamerbrasil.com Tutorial bsico de games Pgina: 1 de: 5

www.indiegamerbrasil.com Tutorial bsico de games Lio 4

Lio 4: Finalizando
Bem, o que falta para concluirmos nosso game? Sim! Faltam duas coisas:
1. Verificar se um carro atropelou a pessoa;
2. Verificar se a pessoa conseguiu atravessar a rua.
Antes de continuarmos, quero repetir mais uma vez que este tutorial muito bsico, apenas para
introduzir os conceitos de game e sua implementao em Javascript e HTML 5. Com base nesse
tutorial, voc poder criar games muito melhores, sem necessidade de coisa alguma.
E, se quer criar games para ambiente mvel (Android, iOS e Windows Phone), pode usar o mesmo
HTML 5 e Javascript, alm de um framework HTML mvel, como o Apache Cordova
(http://cordova.apache.org/).
O meu livro Mobile Game Jam (http://www.mobilegamejam.com/) explica melhor as tcnicas de
construo de games, alm de mostrar como criar games para Android, iOS e Windows Phone.
Porm, com esse tutorial, voc j tem uma boa base para comear.

Verificar se atropelou a pessoa

Vamos introduzir um conceito novo, que a interseo de retngulos. A funo intersecao(),
dentro de gameloop.js, verifica se dois retngulos se intersetam:
function
var r1
var r2
return

intersecao(go1, go2) {
= toPixels(go1);
= toPixels(go2);
!(r2.esquerda > r1.direita ||
r2.direita < r1.esquerda ||
r2.topo > r1.baixo ||
r2.baixo < r1.topo);

E criamos uma funo verificarSeAtropelou() para testar isso. Ela chamada dentro da funo
updateGO():
else {
var deslocamentoX = go.velocidadeX * intervalo;
go.centroX += deslocamentoX;
if (verificarSeAtropelou(go)) {
alert("FIM");

www.indiegamerbrasil.com Tutorial bsico de games Pgina: 2 de: 5

www.indiegamerbrasil.com Tutorial bsico de games Lio 4

parar();
}
else {
verificarSeSaiuDeCena(go);
verificarSeVaiColidir(go);
verificarSeCriaNovoCarro(go);
}

Fizemos algumas mudanas na funo parar():

function parar() {
window.clearInterval(idGameLoop);
for (var x=0; x < gameObjects.length; x++) {
delete gameObjects[x];
}
delete gameObjects;
gameObjects = null;
resetarVariaveis();
}

Eu ODEIO Garbage Collector! Sou programador C, logo, entendo que nossa responsabilidade
liberar a memria alocada. Porm, no adianta lutar... O Javascript, assim como muitas linguagens
recentes, usa essa aberrao!
O problema : Como deletar objetos alocados? No tem... O GC do Javascript reclama a memria
de objetos, quando no temos mais variveis apontando para eles. O comando delete remove
referncias. Ento, para esvaziar o vetor de gameObjects, eu deleto cada GO armazenado.

Verificar se atravessou a rua

simples! s verificar se o centro do gameobject da pessoa chegou no topo:
if (go.centroY <= 0.75) {
alert("VENCEU!");
parar();
}

O centro vertical da primeira calada 0,75m.

Porm, tem uma pequena correo a ser feita: E se a pessoa atropelar um carro? Isso no pode
acontecer! Ento, eu modifiquei a funo caminhoLivre() para testar isso:
// Agora, vamos verificar se tem um carro nossa frente:

www.indiegamerbrasil.com Tutorial bsico de games Pgina: 3 de: 5

www.indiegamerbrasil.com Tutorial bsico de games Lio 4

if (retorno) {
for (var x=1; x < gameObjects.length; x++) {
if (gameObjects[x] == null) {
continue;
}
var inter = gameObjects[x];
if (intersecao(go, gameObjects[x])) {
retorno = false;
}
}
}

Movimento com teclas

Bem, apesar do game estar pronto, difcil control-lo s clicando em botes. Isto afeta a sua
jogabilidade (ou gameplay). Usar as teclas de setas melhor. Ento, eu criei uma funo para
receber estes eventos. Dentro da funo inicializa() (inicializacao.js) eu associo o meu tratador
de eventos (event handler) pgina:
document.onkeydown = verificarTecla;
E, dentro de gameloop.js, criei uma funo para isso:
function verificarTecla(evento) {
evento = evento || window.event;
if (evento.keyCode == '38') {
frente();
}
else if (evento.keyCode == '40') {
tras();

}
else if (evento.keyCode == '39') {
direita();
}
else if (evento.leyCode == '37') {
esquerda();
}

Pronto!

Concluso
Ta um game completo e pronto. claro que falta muita coisa, para comear, tem que ter um
www.indiegamerbrasil.com Tutorial bsico de games Pgina: 4 de: 5

www.indiegamerbrasil.com Tutorial bsico de games Lio 4

objetivo, por exemplo: atravessar no menor tempo possvel. E, como todos os games modernos,
tem que ter algo de social gaming, tipo, publicar os melhores tempos no Facebook.
Nada impossvel, agora que voc j sabe o bsico.
Sugiro que voc incremente o jogo e me mande para avaliao. Vou publicar os melhores.

www.indiegamerbrasil.com Tutorial bsico de games Pgina: 5 de: 5