RPG em javascript

7/25/2019 RPG em javascript

1/12

Seu Primeiro jogo

comJavaScript

GUIA PASSO A PASSO

Diego Oliveirawww.number.890m.com


2/12

INTRODUO

Se voc deseja entrar no mundo da programao de jogos 2D para web e no tem qualquerexperincia ento esse ebook foi escrito para voc. Ao longo deste pdf veremos como programar um jogobastante 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 dohtml5, onde basicamente temos um personagem que se move capturando monstros pelo campo. Vamosrefazer o mesmo exemplo, mas ao invs de capturas monstros coletaremos bas em quanto somosperseguidos pelo monstro.

Evidentemente necessrio que se tenha pelo menos o bsico em javascript para continuar

Diego Oliveira | www.number.890m.com | [email protected]
http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/


3/12

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.

Usaremos quatro figuras para o jogo. Uma para compor o cenrio, outra para o monstro, outrapara 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 htmlou pelo menos lincadas corretamente ao arquivo.

1 2 3 4 Game Phaser56 7 8 9 /* A maior parte do cdigo ser escrita aqui */

10

11


4/12

2 Criando a Tela

A primeira coisa que precisamos fazer criar o elemento Canvas. O elemento podeser criado usando tanto JavaScript como HTML. Neste caso vamos usar o mnimo de html. O que uma abordagem mais vantajosa.

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 iraparecer na pgina.

3 Incluindo Imagens

Um jogo precisa de grficos, ento vamos carrega-las. Como mencionadoanteriormente vamos utilizar quatro imagens

Que neste exemplo esto situadas no mesmo diretrio que o arquivo html.

9 // Criando o Canvas

10 varcanvas=document.createElement("canvas");11 varctx=canvas.getContext("2d");12 canvas.width=512;13 canvas.height =480;14 document.body.appendChild(canvas);

10 /* Imagem de fundo */varfundo=newImage();

fundo.src="background.png";

/* Bau */varbau=newImage();

bau.src="caixa.png";

/* Monstro */varmonstro=newImage();

monstro.src="monster.png";

/* continua na prxima pgina... */

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


5/12

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 comoao 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 aforma mais simples, conhecida como literal.

// Objetos do jogo

varhero={speed: 256,// movimento em pixels por segundox:0,y:0

};varmonster= {

speed:100,x: 0,y:0

};vartrunk ={

x:0,

y:0};/* contador de bas coletados */varcaught=0;

/* ...continuao da pgina anterior */

/* Heroi */varheroi=newImage();heroi.src="sprite.png";

varcarregadas=0;var total=4;// total de imagens do jogo

varcarregadas=0;var total=4;// total de imagens do jogo

fundo.onload =carregando;caixa.onload=carregando;monstro.onload=carregando;heroi.onload=carregando;

functioncarregando(){carregadas++;if(carregadas ==total){

reset();main();

};};


6/12

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 avelocidade 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.

O script acima bem simples. Quando uma tecla do teclado pressionada ele armazenada o cdigo datecla 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

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.

/* Controle do teclado */varkeysDown={};

document.addEventListener('keydown',keydownHandle,false);functionkeydownHandle(evt){

keysDown[evt.keyCode]=true;};

document.addEventListener('keyup',keyupHandler,false);functionkeyupHandler(evt){

deletekeysDown[evt.keyCode];};

functionreset(){/* 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));

};


7/12

7 Atualizao

Criamos dois objetos, o objeto heroe trunk. A posio de cada um desses objetos precisa serconstantemente atualizada na tela. Em outras palavras precisamos realizar um update dos objetos.

A funo update ser chamada diversas vezes no jogo. A primeira coisa que ela faz verificarse alguma das teclas UP, DOWN, LEFT ou RIGHT do seu teclado est sendo pressionada. E se assim for, oheri 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 ltimachamada da funo update, ento o valor que ser passado a ela igual a 1 e a velocidade do heri sermultiplicado por 1. O que far com que o jogador se mova 256 pixels. Assim, se se passou a metade deum segundo, o valor ser de 0.5 e o heri vai se mover apenas a metade de sua velocidade e assim pordiante. Esse controle necessrio pois a funo update ser chamada rapidamente em intervalos detempos 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 quorpido (ou lentamente) o script est sendo executado. Mais tarde voltaremos a mexer na funo updatepara implementar o movimento do monstro.

// Atualizaes dos objetosfunctionupdate(mod){

if(38inkeysDown){ // Jogador vai para cima

hero.y -=hero.speed *mod;}if(40in keysDown){ // Jogador vai para baixo

hero.y +=hero.speed *mod;}if(37 inkeysDown){ // Jogador vai para esquerda

hero.x -=hero.speed *mod;}

if(39inkeysDown){ // Jogador vai para direita

hero.x +=hero.speed *mod;}

};


8/12

8 Desenhando Objetos

A funo render ter a finalidade de desenhar nosso heri, ba, monstro e imagem de fundona tela. Essa funo tambm escreve na tela o nmero de bas j coletados atravs da varivel caughtedo mtodo fillText.

9 O Loop de Animao

Todo jogo um loop infinito. O que na prtica significa que existe em todo caso uma funo sendochamada em loop infinito.

functionrender(){// 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);

};

varthen =Date.now();

// A funo Game loopfunctionmain(){

var now =Date.now();var delta =now - then;

// Limpa o canvasctx.clearRect(0, 0, canvas.width, canvas.height);update(delta/1000);render();colisao();then =now;requestAnimationFrame(main);

};


9/12

O loop principal do jogo o que controla o fluxo do jogo. Primeiro queremos checar a horaatual 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 colocaa funo game em loop.

11 Colises

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 emalgum navegador e verifique se est tudo ok.

Imagem do jogo atualmente.

functioncolisao(){if(

hero.x


10/12

13 Movendo o Monstro

Vamos dar alguma ao ao monstro. A partir de agora ele vai perseguir o player.

O cdigo acima deve ser colocado dentro da funo update. Abrindo o jogo no navegador j podemos vero monstro correndo atrs do player.

14 Matando o Player

Quando o monstro tocar o personagem exibiremos uma mensagem escrito "perdeu"!.

A chamada da funo coliderMonstro() feita dentro da funo main(). Agora quando o player colidircom o monstro a seguinte tela ir aparecer.

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;

}

functioncoliderMonstro(){

if(hero.x


11/12

Voc perdeu!

Se voc no conseguiu chegar ao resultado desejado pode solicitar o cdigo por e-mail escrevendo para:[email protected]

www.number.890m.com

TNT


12/12

Documents

RPG em javascript