RPG em JavaScript, Notas de estudo de Informática

Baixe RPG em JavaScript e outras Notas de estudo em PDF para Informática, somente na Docsity!

Seu Primeiro jogo

com

JavaScript

GUIA PASSO A PASSO

Diego Oliveira

www.number.890m.com

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 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/) 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

Diego Oliveira | www.number.890m.com | [email protected]

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.

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

Que neste exemplo estão situadas no mesmo diretório que o arquivo html.

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);

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 próxima página... */

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

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, // 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 baús coletados */ var caught = 0;

/* ...continuação da página 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(); }; };

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.

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.

// Atualizações 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; } };

8 Desenhando Objetos

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.

function 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("Baus coletados: " + caught, 32, 32); };

var then = Date.now();

// A função 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); };

13 Movendo o Monstro

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

O código acima deve ser colocado dentro da função update. Abrindo o jogo no navegador já podemos ver o monstro correndo atrás do player.

14 Matando o Player

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

A chamada da função coliderMonstro() é feita dentro da função main(). Agora quando o player colidir com o monstro a seguinte tela irá aparecer.

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; }

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); } };

Você perdeu!

Se você não conseguiu chegar ao resultado desejado pode solicitar o código por e-mail escrevendo para: [email protected]

www.number.890m.com

TNT