Programador Profissional: Criando jogos em HTML 5 utilizando canvas

O html5, principalmente com a funcionalidade de canvas, possibilita a criação de jogos interessantes.
Nesse post mostrarei um exemplo breve de um jogo feito em html 5.
Nesse jogo controlaremos uma nave viajando pelo espaço.

Primeiro precisaremos de 2 imagens: Uma da nave e outra do espaço.
Nesse post eu expliquei como gerar imagens 2d por meio do blender. Vou usar uma como exemplo.

É importante que ela possua fundo transparente (.png).

Agora precisamos da imagem background:

Com essas duas imagens a disposição, já podemos programar nosso jogo.

Vamos ao código.
Para não ter um código sujo, vamos separar o html do javascript em arquivos separados.

jogo.html

<html>
<head>
<title>Jogo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<center>
<h1>Meu Primeiro jogo em html 5</h1>
<br/>

<br/>
<canvas id="game" width="500" height="500" style="border: 1px solid #000000;">
<p>Seu navegador não suporta HTML5!</p>
</canvas>
<script src="codigo.js"></script>
</center>
</body>
</html>

Nesse código temos o elemento <canvas> onde desenharemos com javascript. Agora vamos ao arquivo codigo.js

codigo.js

// cria o contexto grafico no canvas
var drawingCanvas = document.getElementById('game');
var ctx = drawingCanvas.getContext('2d');

var framecount = 0;

// carrega imagens
// Criando Background e seus objetos
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};

bgImage.src = 'bg.jpg';

var naveReady = false;
var naveImage = new Image();
naveImage.onload = function () {
naveReady = true;
};
naveImage.src = 'nave.png';

//objetos do jogo
var nave = {
speed:256,
x:220,
y:440,
w:60,
h:60,
currentImage:null
};

//teclado
var keysDown = {};
addEventListener('keydown', function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener('keyup', function (e) {
delete keysDown[e.keyCode];
}, false);

// frame update
var update = function(modifier){
if (38 in keysDown) { // Jogador vai para cima
//verifica se já está no limite
if(nave.y >= 0){
nave.y -= nave.speed * modifier;
}
}
if (40 in keysDown) { // Jogador vai para baixo
if(nave.y <= 500-nave.h){
nave.y += nave.speed * modifier;
}
}
if (37 in keysDown) { // Jogador vai para esquerda
if(nave.x >= 0){
nave.x -= nave.speed * modifier;
}
}
if (39 in keysDown) { // Jogador vai para direita
if(nave.x <= 500 - nave.w){
nave.x += nave.speed * modifier;
}
}

framecount++;
}

//render game
var render = function(){
//clear no canvas
//ctx.fillStyle = 'rgb(1, 1, 1)';
//ctx.fillRect(0, 0, 500, 500);

if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (naveReady) {
ctx.drawImage(naveImage, nave.x, nave.y);
}
// pinta o framecount
ctx.fillStyle = 'rgb(250, 250, 250)';
ctx.font = '10px Verdana';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('Frame: ' + framecount, 390, 480);

}

//função que irá controlar o game loop
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
};

//iniciando o game
var then = Date.now();
setInterval(main, 1);

Não se assuste! Leia os comentários que está bem claro. Veja as explicações abaixo na ordem dos comentários:

1- Iniciamos o contexto do canvas.

2- Carregamos as imagens do jogo. Observe que coloquei 2 variáveis booleanas para saber quando as imagens foram carregadas e assim poder pintalas no canvas.

3- Criamos o objeto nave (sprite) com as propriedades de localização no canvas e suas dimensões.

4- Registramos as teclas pressionadas.

5- Entramos agora na função update. Ela será executada a cada frame. Se você não entende esse conceito de frame e game loop leia esse post. Dentro da função update atualizamos a posição da nave, verificando sempre se ela já atingiu o limite do cenário. A variavel framecont eu adicionei só para vocês observarem que durante um jogo o game loop acontece. Ela vai sendo incrementada e exibida a cada frame.

6- A função render é responsável por pintar na tela o estado atual do jogo, nesse caso a posição atual da nave. Observe que pintamos utilizando os métodos de ctx. Ele funciona como o graphics do java 2d.

7- A função main é o game loop. Ela será executada no intervalo definido na ultima linha setInterval();

Gustavo Marques