Criando jogos em HTML 5 + Java script pelo bloco de notas

por FilipeJF Dom Out 16, 2011 10:42 am

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

A ultima linha faz a função drawgame se repetir a cada 30 milissecundos.

Estamos acabando com:

Código:: </script> </head> <body> <canvas id="game_area" width="480" height="320"></canvas> </body> </html>

Canvas serve para criar a tela do jogo. É com ele que desenhamos tudo.

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

por Nanzin Sáb Out 22, 2011 4:10 pm

bom cara tem uym jeito mais rapido e facil de criar um game com esse estilo e usa uma programaçao so com a mesma funcionalidade do RMXP ou VX,basta apenas a pessoa baixar o programa

Scirra Construct

ele utiliza a programaçao Phynton

abraços