RPG em javascript

Seu Primeiro jogo com

JavaScript GUIA PASSO A PASSO

Diego Oliveira www.number.890m.com

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

INTRODUÇÃO Se você deseja entrar no mundo da programação de jogos 2D para web e não tem qualquer experiência então esse ebook foi escrito para par a você. Ao longo deste pdf veremos como programar um jogo bastante simples, baseado no exemplo apresentado por Matt Hackett  em sua página pessoal (http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/ 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 invés de capturas monstros coletaremos baús em quanto somos perseguidos pelo monstro. Evidentemente é necessário que se tenha pelo menos o básico em javascript para continuar

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

1 COMEÇANDO Como o jogo se executa através do Canvas que é uma tecnologia do HTML5 então, obviamente, temos de escrever os nossos códigos dentro de um arquivo html. 1 2 3 4 5 6 7 8 9 10 11

> Game >Game Phaser > > /* A maior parte do código será escrita aqui */

Usaremos quatro figuras para o jogo. Uma para compor o cenário, outra para o monstro, outra para o nosso herói 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 diretório que o arquivo html ou pelo menos lincadas corretamente co rretamente ao arquivo.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

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 mínimo de html. O que é uma abordagem mais vantajosa. 9 10 11 12   12 13   13 14   14

// Criando o Canvas var canvas = document.createElement createElement("canvas" ("canvas"); ); var ctx = canvas.getContext( getContext("2d" "2d"); ); canvas.width = 512 512;; canvas.height = 480 480;; document.body.appendChild(canvas);

A primeira linha (após o comentário), captura o elemento Canvas. A segunda captura seu contexto gráfico. Usaremos esse contexto para emitir comandos de desenho. O width (largura) e height  (altura), definem as dimensões do Canvas, sem eles o elemento não irá aparecer na página.

3 Incluindo Imagens Um jogo precisa de gráficos, então vamos carrega-las. Como mencionado anteriormente vamos utilizar quatro imagens

caixa.png

sprite.png

background.png

monster.png

Que neste exemplo estão situadas no mesmo diretório que o arquivo html. 10 /* Imagem de fundo */ var fundo = new Image(); fundo.src = "background.png" "background.png";; /* Bau */ var bau = new Image(); bau.src = "caixa.png" "caixa.png";; /* Monstro */

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

/* ...continuação da página anterior */

/* Heroi */ var heroi = new Image(); heroi..src = "sprite.png" heroi "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 carregando(){ (){ carregadas++ carregadas ++;; if (carregadas (carregadas == total){ reset(); main(); }; };

Antes que um jogo comece é necessário que todas as imagens sejam carregadas, por isso muitos jogos possuem tela de load. O script acima não só carrega as imagens do jogo no browser como ao final do carregamento chama a função reset() e main(). Que serão 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, speed 256, // movimento em pixels por segundo x: 0 , y: 0 }; var monster = { speed:: 100 speed 100,, x: 0, 0, y: 0 };

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Agora vamos definir algumas variáveis que necessitaremos para mais tarde. O nosso herói (objeto hero) possuirá os atributos "x" e "y", que serão as coordenadas de sua posição inicial na tela e "speed", que é a velocidade em pixels por segundo que o nosso herói irá se mover. O objeto monster segue a mesma lógica. O baú do jogo (objeto trunk) vai ficar sempre parado, assim só tem como atributos as coordenadas "x" e "y". Por último, criamos a variável caught. Ela irá armazenar o número de baús coletados pelo jogador.

5 Controle de Teclado A interação entre o Canvas e o teclado do seu PC é possível através dos chamados Listener (ouvintes) do JavaScript.

/* Controle do teclado */ var keysDown = {}; document.addEventListener( addEventListener('keydown' 'keydown',, keydownHandle, false false); ); function keydownHandle keydownHandle((evt evt){ ){ keysDown[evt.keyCode] = true true;; }; document.addEventListener( addEventListener('keyup' 'keyup',, keyupHandler, false false); ); function keyupHandler keyupHandler((evt evt){ ){ delete keysDown[evt.keyCode]; };

O script acima é bem simples. Quando uma tecla do teclado é pressionada ele armazenada o código da tecla no array keysDown. Se um código de tecla está no array, o usuário está pressionando essa tecla. Simples assim! Quando a tecla é liberada então seu código é retirado do array.

6 Novo Jogo function reset reset(){ (){ /* Posiciona o jogador no centro da tela */ hero.x = canvas.width width//2; hero.y = canvas.height height//2; /* Coloca o baú em posição aleatória */ trunk.x = 32 + (  (Math Math.random() random()**(canvas.width - 100 100)); )); trunk.y = 32 + (  (Math Math.random() random()**(canvas.height height  - 100 100)); )); /* Coloca o monstro em posição aleatória */ monster.x = 32 32 +  + (  (Math Math.random()*(canvas.width - 64 64)); )); monster.y = 32 32 +  + (  (Math Math.random()*(canvas.height - 64 64)); )); };

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

7 Atualização Criamos dois objetos, o objeto hero e trunk. A posição de cada um desses objetos precisa ser constantemente atualizada na tela. Em outras palavras precisamos realizar um update dos objetos.

// Atualizações dos objetos function update update((mod mod){ ){ if (38 in in keysDown){  keysDown){ // Jogador vai para cima hero.y -= -= hero  hero.speed * mod; } if (40 40 in  in keysDown){ // Jogador vai para baixo hero.y += += hero  hero.speed * mod; } if (37 in in keysDown){  keysDown){ // Jogador vai para esquerda hero.x -= -= hero  hero.speed * mod; } if (39 39 in  in keysDown){  keysDown){ // Jogador vai para direita hero.x += += hero  hero.speed * mod; } };

A função 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 herói é movido na direção correspondente. O que pode parecer estranho é o argumento mod passado para função update. O mod (modificador) é um número baseado no tempo. Se exatamente um segundo se passou desde a última chamada da função update, então o valor que será passado a ela é igual a 1 e a velocidade do herói 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 herói vai se mover apenas a metade de sua velocidade e assim por diante. Esse controle é necessário pois a função update será chamada rapidamente em intervalos de tempos pouco precisos. O que faria o nosso herói andar ora muito rapidamente ora muito devagar. Usando esse padrão garantiremos que o herói se mova sempre na mesma velocidade, não importa o quão rápido (ou lentamente) o script está sendo executado. Mais tarde voltaremos a mexer na função update para implementar o movimento do monstro.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

8 Desenhando Objetos function render render(){ (){ // Desenha o fundo ctx.drawImage(fundo, 0, 0); //Desenha o herói 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 fillText("Baus ("Baus coletados: " + caught, 32 32,, 32 32); ); };

A função render terá a finalidade de desenhar nosso herói, baú, monstro e imagem de fundo na tela. Essa função também escreve na tela o número de baús já coletados através da variável caught e do método fillText.

9 O Loop de Animação Todo jogo é um loop infinito. O que na prática significa que existe em todo caso uma função sendo chamada em loop infinito.

var then var  then = Date Date.now(); .now(); // A função Game loop function main main(){ (){ var now = Date.now();

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

Trusted by over 1 million members

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.

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 função update. Em seguida capturamos novamente a data atual. A função requestAnimationFrame é uma função específica para animação. Ela é quem coloca a função game em loop.

11 Colisões function colisao colisao(){ (){ if ( hero.x