Introdução
A criação de jogos de navegador é muito comum, mas nem tanto para os usuários do Game Maker. Agora que existe o Game Maker HTML5, isso pode mudar. Só que há um problema: nem todos podemos comprar a nova versão. Então, como fazer de forma gratuita, sem baixar nenhum programa? Você deve saber a resposta: Bloco de Notas.
Esse artigo vai mostrar como criar um jogo usando um software e duas linguagens, sendo uma não tão necessária no momento. Vamos precisar saber JavaScript.
Começando a fazer o primeiro jogo
Tudo o que precisaremos para iniciar é criar um arquivo de texto no bloco de notas. Vamos usar somente esse arquivo por enquanto.
Vamos começar. Primeiro, precisamos começar escrevendo:
- Código:
<html>
<head>
<script type="text/javascript">
O que isso faz? Diz que vamos começar a escrever em Javascript dentro da página html (você irá salvar como 'nome.html').
Depois, vamos adicionar nas linhas de baixo:
- Código:
var context;
var left;
var right;
var up;
var down;
var space;
var _x=0;
var _y=0;
O que isso faz? Cria as variaveis. É o mesmo esquema do Game Maker.
Agora vamos checar se pressionamos as setas, temos que colocar o código delas (uma tabela será fornecida em breve).
- Código:
//é o mesmo que keyboard_check
function keyDown(e) {
if (e.keyCode == 39) right = 1;
if (e.keyCode == 37) left = 1;
if (e.keyCode == 38) up = 1;
if (e.keyCode == 40) down = 1;
if (e.keyCode == 32) space = 1;
}
Agora vamos dizer que se soltarmos a tecla, então as variaveis respectivas serão falsas:
- Código:
function keyUp(e) {
if (e.keyCode == 39) right = 0;
if (e.keyCode == 37) left = 0;
if (e.keyCode == 38) up = 0;
if (e.keyCode == 40) down = 0;
if (e.keyCode == 32) space = 0;
}
Agora vamos desenhar o jogo, seria como criar a função Draw no game maker:
- Código:
function drawgame(){
context=game_area.getContext('2d');
if(left){
_x-=5;
}
if(right){
_x =5;
}
if(up){
_y-=5;
}
if(down){
_y =5;
}
context.clearRect(0,0,480,320);
context.fillRect(_x, _y,16, 16);
context.fillText(String(_x) ', ' String(_y),10,10)
}
Context é um 'pacote' de funções que usamos no jogo. As funções de imagem são dele.
Também checamos se as variaveis eram veradeiras e movimentamos.
As três ultimas linhas: apaga tudo o que está desenhado, desenha o player, escreve nossa posição.
Vamos adicionar os códigos que avisam as funções de teclado quando houver alguma tecla pressionada ou solta:
- Código:
document.addEventListener('keydown', keyDown, 0);
document.addEventListener('keyup', keyUp, 0);
setInterval(drawgame,30);
Estamos acabando com:
- Código:
</script>
</head>
<body>
<canvas id="game_area" width="480" height="320"></canvas>
</body>
</html>
Com isso, salve com extensão .html, clique no arquivo para abrir no navegador.
Mova-se com as teclas. Depois vamos fazer um jogo de plataforma.
Até mais!
Créditos:
Pedro Henrique