RPG em Javascript

Seu Primeiro jogo
com
JavaScript
GUIA PASSO A PASSO
Diego Oliveira
www.number.890m.com
INTRODUO
Se voc deseja entrar no mundo da programao de jogos 2D para web e no tem qualquer
experincia ento esse ebook foi escrito para voc. Ao longo deste pdf veremos como programar um jogo
bastante simples, baseado no exemplo apresentado por Matt Hackett em sua pgina pessoal
(http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/) usando o Canvas do
html5, onde basicamente temos um personagem que se move capturando monstros pelo campo. Vamos
refazer o mesmo exemplo, mas ao invs de capturas monstros coletaremos bas em quanto somos
perseguidos pelo monstro.
Evidentemente necessrio que se tenha pelo menos o bsico em javascript para continuar
Diego Oliveira | www.number.890m.com | nibblediego@gmail.com

1 COMEANDO
Como o jogo se executa atravs do Canvas que uma tecnologia do HTML5 ento,
obviamente, temos de escrever os nossos cdigos dentro de um arquivo html.
1 <!DOCTYPE html>
2 <head>
3 <meta charset="ISO-8859-1">
4 <title>Game Phaser</title>
5
6 </head>
7 <body>
8 <script type="text/javascript">
9 /* A maior parte do cdigo ser escrita aqui */
10 </script>
11 </body>
Usaremos quatro figuras para o jogo. Uma para compor o cenrio, outra para o monstro, outra
para o nosso heri e por fim uma para o bau.
.
Figura 1: Cena do Jogo
O link para baixar as imagens o seguinte:
https://drive.google.com/folderview?id=0BzHHa0H6iGgRaU92dXZ1UUpmVDg&usp=sharing
importante lembrar de que as imagens devem estar no mesmo diretrio que o arquivo html
ou pelo menos lincadas corretamente ao arquivo.
2 Criando a Tela
A primeira coisa que precisamos fazer criar o elemento Canvas. O elemento pode
ser criado usando tanto JavaScript como HTML. Neste caso vamos usar o mnimo de html. O que
uma abordagem mais vantajosa.
9 // Criando o Canvas
10 var canvas = document.createElement("canvas");
11 var ctx = canvas.getContext("2d");
12 canvas.width = 512;
13 canvas.height = 480;
14 document.body.appendChild(canvas);
A primeira linha (aps o comentrio), captura o elemento Canvas. A segunda captura

seu contexto grfico. Usaremos esse contexto para emitir comandos de desenho. O width
(largura) e height (altura), definem as dimenses do Canvas, sem eles o elemento no ir
aparecer na pgina.
3 Incluindo Imagens
Um jogo precisa de grficos, ento vamos carrega-las. Como mencionado
anteriormente vamos utilizar quatro imagens
caixa.png sprite.png background.png monster.png
Que neste exemplo esto situadas no mesmo diretrio que o arquivo html.
10 /* Imagem de fundo */
var fundo = new Image();
fundo.src = "background.png";
/* Bau */
var bau = new Image();
bau.src = "caixa.png";
/* Monstro */
var monstro = new Image();
monstro.src = "monster.png";
/* continua na prxima pgina... */

/* ...continuao da pgina anterior */
/* Heroi */
var heroi = new Image();
heroi.src = "sprite.png";
var carregadas = 0;
var total = 4; // total de imagens do jogo
var carregadas = 0;
var total = 4; // total de imagens do jogo
fundo.onload = carregando;
caixa.onload = carregando;
monstro.onload = carregando;
heroi.onload = carregando;
function carregando(){
carregadas++;
if(carregadas == total){
reset();
main();
};
};
Antes que um jogo comece necessrio que todas as imagens sejam carregadas, por isso
muitos jogos possuem tela de load. O script acima no s carrega as imagens do jogo no browser como
ao final do carregamento chama a funo reset() e main(). Que sero escritas mais adiante.
4 Objetos do Jogo
Existe mais de uma forma de se declarar um objeto em JavaScript aqui est sendo usada a
forma mais simples, conhecida como literal.
// Objetos do jogo
var hero = {
speed: 256, // movimento em pixels por segundo
x: 0,
y: 0
};
var monster = {
speed: 100,
x: 0,
y: 0
};
var trunk = {
x: 0,
y: 0
};
/* contador de bas coletados */
var caught = 0;
Agora vamos definir algumas variveis que necessitaremos para mais tarde. O nosso heri (objeto hero)
possuir os atributos "x" e "y", que sero as coordenadas de sua posio inicial na tela e "speed", que a
velocidade em pixels por segundo que o nosso heri ir se mover. O objeto monster segue a mesma lgica.
O ba do jogo (objeto trunk) vai ficar sempre parado, assim s tem como atributos as coordenadas "x" e
"y". Por ltimo, criamos a varivel caught. Ela ir armazenar o nmero de bas coletados pelo jogador.
5 Controle de Teclado
A interao entre o Canvas e o teclado do seu PC possvel atravs dos chamados Listener
(ouvintes) do JavaScript.
/* Controle do teclado */
var keysDown = {};
document.addEventListener('keydown', keydownHandle, false);

function keydownHandle(evt){
keysDown[evt.keyCode] = true;
};
document.addEventListener('keyup', keyupHandler, false);
function keyupHandler(evt){
delete keysDown[evt.keyCode];
};
O script acima bem simples. Quando uma tecla do teclado pressionada ele armazenada o cdigo da
tecla no array keysDown. Se um cdigo de tecla est no array, o usurio est pressionando essa tecla.
Simples assim! Quando a tecla liberada ento seu cdigo retirado do array.
6 Novo Jogo
function reset(){
/* Posiciona o jogador no centro da tela */
hero.x = canvas.width/2;
hero.y = canvas.height/2;
/* Coloca o ba em posio aleatria */

trunk.x = 32 + (Math.random()*(canvas.width - 100));
trunk.y = 32 + (Math.random()*(canvas.height - 100));
/* Coloca o monstro em posio aleatria */

monster.x = 32 + (Math.random()*(canvas.width - 64));
monster.y = 32 + (Math.random()*(canvas.height - 64));
};
A funo reset chamada para comear um novo jogo, ou nvel. Ele coloca o heri (jogador)
no centro da tela e o ba em algum lugar aleatrio no campo.
7 Atualizao
Criamos dois objetos, o objeto hero e trunk. A posio de cada um desses objetos precisa ser
constantemente atualizada na tela. Em outras palavras precisamos realizar um update dos objetos.
// Atualizaes dos objetos

function update(mod){
if(38 in keysDown){ // Jogador vai para cima
hero.y -= hero.speed * mod;
}
if(40 in keysDown){ // Jogador vai para baixo
hero.y += hero.speed * mod;
}
if(37 in keysDown){ // Jogador vai para esquerda
hero.x -= hero.speed * mod;
}
if(39 in keysDown){ // Jogador vai para direita
hero.x += hero.speed * mod;
}
};
A funo update ser chamada diversas vezes no jogo. A primeira coisa que ela faz verificar
se alguma das teclas UP, DOWN, LEFT ou RIGHT do seu teclado est sendo pressionada. E se assim for, o
heri movido na direo correspondente.
O que pode parecer estranho o argumento mod passado para funo update. O mod
(modificador) um nmero baseado no tempo. Se exatamente um segundo se passou desde a ltima
chamada da funo update, ento o valor que ser passado a ela igual a 1 e a velocidade do heri ser
multiplicado por 1. O que far com que o jogador se mova 256 pixels. Assim, se se passou a metade de
um segundo, o valor ser de 0.5 e o heri vai se mover apenas a metade de sua velocidade e assim por
diante. Esse controle necessrio pois a funo update ser chamada rapidamente em intervalos de
tempos pouco precisos. O que faria o nosso heri andar ora muito rapidamente ora muito devagar.
Usando esse padro garantiremos que o heri se mova sempre na mesma velocidade, no importa o quo
rpido (ou lentamente) o script est sendo executado. Mais tarde voltaremos a mexer na funo update
para implementar o movimento do monstro.
8 Desenhando Objetos
function render(){
// Desenha o fundo
ctx.drawImage(fundo, 0, 0);
//Desenha o heri
ctx.drawImage(heroi, hero.x, hero.y);
// Desenha o ba
ctx.drawImage(bau, trunk.x, trunk.y);
// Desenha o monstro
ctx.drawImage(monstro, monster.x, monster.y);
// Desenha o placar
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Baus coletados: " + caught, 32, 32);
};
A funo render ter a finalidade de desenhar nosso heri, ba, monstro e imagem de fundo
na tela. Essa funo tambm escreve na tela o nmero de bas j coletados atravs da varivel caught e
do mtodo fillText.
9 O Loop de Animao
Todo jogo um loop infinito. O que na prtica significa que existe em todo caso uma funo sendo
chamada em loop infinito.
var then = Date.now();
// A funo Game loop

function main(){
var now = Date.now();
var delta = now - then;
// Limpa o canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
update(delta/1000);
render();
colisao();
then = now;
requestAnimationFrame(main);
};
O loop principal do jogo o que controla o fluxo do jogo. Primeiro queremos checar a hora
atual para que possamos calcular o delta (quantos milissegundos se passaram desde o ltimo intervalo).
O valor de delta divido por 1000 (quantidade de milissegundos num segundo) ser o valor passado para
a funo update. Em seguida capturamos novamente a data atual.
A funo requestAnimationFrame uma funo especfica para animao. Ela quem coloca
a funo game em loop.
11 Colises
function colisao(){
if(
hero.x <= (trunk.x + 32)
&& trunk.x <= (hero.x + 32)
&& hero.y <= (trunk.y + 32)
&& trunk.y <= (hero.y + 32)
){
++caught;
reset();
}
};
Quando o heri colide com o ba ento o contador caught sofre um incremento em uma unidade,
indicando que o ba foi coletado.
12 Experimentando!
J temos a maior parte do jogo finalizada. E j podemos testar o resultado. Ento abra seu trabalho em
algum navegador e verifique se est tudo ok.
Imagem do jogo atualmente.

13 Movendo o Monstro
Vamos dar alguma ao ao monstro. A partir de agora ele vai perseguir o player.
if(monster.y < hero.y -2){

monster.y += monster.speed * mod;
}else if(monster.y > hero.y+2){
monster.y -= monster.speed * mod;
}else{
if(monster.x < hero.x)
monster.x += monster.speed * mod;
if(monster.x > hero.x)
monster.x -= monster.speed * mod;
}
O cdigo acima deve ser colocado dentro da funo update. Abrindo o jogo no navegador j podemos ver
o monstro correndo atrs do player.
14 Matando o Player
Quando o monstro tocar o personagem exibiremos uma mensagem escrito "perdeu"!.
function coliderMonstro(){
if(
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
){
ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
ctx.fillRect(75, 105, 362, 245);
ctx.fillStyle = "white";
ctx.font = "24px Helvetica";
ctx.fillText("Perdeu!", 210, 220);
}
};
A chamada da funo coliderMonstro() feita dentro da funo main(). Agora quando o player colidir
com o monstro a seguinte tela ir aparecer.
Voc perdeu!
Se voc no conseguiu chegar ao resultado desejado pode solicitar o cdigo por e-mail escrevendo para:
nibblediego@gmail.com
TNT
www.number.890m.com

RPG em Javascript

Enviado por

Dados do documento

Descrição:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Descrição:

Direitos autorais:

Formatos disponíveis

RPG em Javascript

Título original:

Enviado por

Descrição:

Direitos autorais:

Formatos disponíveis

Seu Primeiro jogo

Diego Oliveira | www.number.890m.com | nibblediego@gmail.com

O link para baixar as imagens o seguinte:

A primeira linha (aps o comentrio), captura o elemento Canvas. A segunda captura

caixa.png sprite.png background.png monster.png

/* continua na prxima pgina... */

document.addEventListener('keydown', keydownHandle, false);

/* Coloca o ba em posio aleatria */

/* Coloca o monstro em posio aleatria */

// Atualizaes dos objetos

var then = Date.now();

// A funo Game loop

Imagem do jogo atualmente.

if(monster.y < hero.y -2){

Você também pode gostar