Como fazer um Jogo em HTML
662 palavras
3 páginas
Jogo em HTML1. Criação da tagAntes de tudo, crie uma página HTML e adicione a seu corpo, entre as tags <body> e </body>, o código <canvas id=”canvas” width=”300” height=”300”></ canvas>. Note que esse código cria uma tela com 300 pixels de altura e largura, mas não mostra elemento algum caso o browser não seja capaz de exibir o jogo. Para mostrar alguma mensagem, basta colocar o texto antes de </canvas>. Com isso, já podemos adicionar os comandos de animação, que ficarão num arquivo separado, com extensão JS.
2. Os primeiros desenhos Com o canvas definido, vamos criar algumas funções auxiliares para facilitar os desenhos. Antes de tudo, criamos uma variável para acesso ao recurso de desenho 2D no canvas, com o código: var canv2D = $(‘#canvas’)[0]. getContext(“2d”);
Depois, usamos o seguinte código para desenhar um objeto em forma de círculo: function circle(x,y,r)
{canv2D.beginPath();
canv2D.arc(x, y, r, 0, Math.PI*2, true); canv2D.closePath(); canv2D.fill();}
Não há muito segredo, a função apenas cria uma circunferência fechada e a preenche com uma cor.
3. Criando movimentos
A regra geral para movimento, em jogos simples e em duas dimensões, é criar um loop de desenho, que refaz a área do game, atualizando as posições dos itens. Aqui, faremos a mesma coisa: a função draw() recriará todos os elementos. Para criar o loop, devemos definir a função init(), que é executada na inicialização do canvas. Nela, coloque o comando intervaloId = setInterval(draw, 10). Isso garante que a cada 10 milissegundos a função de desenho será executada.
4. Hora de integrar o mouse
O jogo precisa de tratamento para as ações do teclado e do mouse. Para o primeiro caso, devemos implementar a função onKeyDown(evt). Ela recebe, na váriavel evt, a tecla pressionada pelo usuário, que pode ser tratada no código.
Se quisermos interromper o movimento quando a tecla é solta, devemos também implementar onKeyUp(evt). Para as setas esquerda e direita, o