Como criar um jogo em HTML e Javascript – Parte 1

Como criar um jogo em HTML e JavascriptHoje decidi começar uma série de tutoriais onde irei ensinar passo a passo a criar um jogo em HTML e Javascript. O jogo irá ter como base o Javascript “puro” sem recurso a nenhuma biblioteca ou engine/framework, sendo esta a melhor forma para quem está a começar a entrar na área do desenvolvimento de jogos para a web adquirir algum conhecimento sólido. Este tutorial requer apenas conhecimentos básicos de HTML e Javascript. No fim de cada tutorial irei disponibilizar os ficheiros criados durante o mesmo para download.

Então, se queres aprender a tornar código HTML e Javascript neste jogo, acompanha-me nesta jornada!

Jogo em HTML e Javascript - Resultado

 

Como criar um jogo em HTML e Javascript – Introdução ao canvas.

Antes de começarmos a escrever o código do jogo, precisamos de criar uma estrutura onde possamos renderizar o jogo. A estrutura a que me refiro é o elemento canvas do HTML5. Vamos começar por criar uma pasta no ambiente de trabalho ou noutro local desejado onde iremos colocar todos os arquivos referentes ao nosso jogo e daremos a essa pasta o nome de “jogo”.

Dentro da referida pasta vamos criar um ficheiro index.html e mais três pastas com os nomes “css”, “js” e “imagens”.

pasta jogo

Dentro do ficheiro index.html iremos colocar o conteúdo base de uma folha de HTML e o nosso elemento canvas. Eu pessoalmente gosto de utilizar o Notepad++ para editar/criar código, contudo você pode utilizar um editor de texto qualquer ao seu gosto.

No código acima nós temos um  charset definido que no caso é o UTF-8, temos um <title> para o jogo e de seguida chamámos dois ficheiros importantes que vamos criar, o estilo.css onde irão ficar os códigos css do jogo. No body da página temos o nosso elemento canvas que é o local onde o jogo será desenhado. Também atribuímos ao canvas um id com o valor de canvas-jogo“. No final do body temos uma chamada a um ficheiro javascript com o nome de jogo.js onde irá ficar todo o “motor” do jogo.

Agora iremos criar dois ficheiros vazios, o estilo.css na pasta jogo/css e o jogo.js na pasta jogo/js.

Iremos agora abrir o ficheiro jogo/js/jogo.js.

ficheiro jogo.js

Será neste ficheiro que iremos começar a programar o nosso jogo. Para podermos criar conteúdo gráfico (ou desenhar) no nosso canvas, primeiro temos de criar uma referência a ele mesmo e para isso iremos utilizar as seguintes linhas de código.

Nestas linhas de código estamos a criar uma referência para o nosso elemento canvas que tem o id canvas-jogo e estamos a guardar essa referência na variável canvas. De seguida atribuímos um valor de largura e de altura ao nosso canvas, neste caso 480×320 e logo após criámos uma variável com o nome contexto onde guardámos o contexto de renderização 2D do canvas. O contexto é na realidade a ferramenta que podemos utilizar para desenhar no canvas, é como se fosse uma abstracção de um papel (o canvas) e um lápis (o contexto).

Para termos a certeza que o nosso papel (canvas) e o nosso lápis (contexto) estão a funcionar, vamos tentar desenhar um rectângulo. Adicione o código seguinte no final do ficheiro jogo.js e abre o seu ficheiro index.html no browser.

O seu ficheiro index.html deverá ter uma aparência parecida como esta abaixo:

index do jogo

Todas as instruções do código acima ficam entre os métodos beginpath() e closePath(). Nós definimos um rectângulo utilizando o método rect(). Os primeiros dois valores do método especificam as coordenadas do rectângulo relativamente ao topo esquerdo do canvas (o nosso papel). Neste caso o rectângulo encontra-se a 20 pixels do lado esquerdo do ecrã e a 40 pixels do topo. Os dois valores seguintes definem a largura e a altura respectivamente, neste caso temos 50 pixels de largura e 50 pixels de altura o que torna este rectângulo um quadrado. A propriedade fillStyle armazena a cor que irá ser utilizada pelo método fill() para pintar o quadrado, no nosso caso, #FF0000 corresponde ao vermelho.

Já que aprendemos a criar um rectângulo vamos aprender também a criar um circulo, estes dois novos conhecimentos vão ser fundamentais na criação do nosso jogo. Para criar um circulo adicione o seguinte código no final do ficheiro jogo.js.

Ao voltar a abrir o seu ficheiro index.html deverá visualizar algo parecido com isto.

circulo canvas

Como pode verificar pelo código acima, estamos a utilizar de novo os métodos beginPath() e closePath(). Também definimos um circulo através do método arc() que utilizou seis parâmetros que são respectivamente:

  1. Coordenada X do centro do arco;
  2. Coordenada Y do centro do arco;
  3. Raio do circulo;
  4. Ângulo onde inicia arco;
  5. Ângulo onde termina o arco;
  6. Sentido do desenho (false para utilizar o sentido dos ponteiros do relógio e true para utilizar o sentido contrário).

O sexto parâmetro, correspondente ao sentido do desenho é opcional, para desenharmos uma circunferência completa, começamos no ângulo 0 e terminamos no ângulo 2π (correspondente a 360º). Desta vez, na propriedade fillStyle() colocamos o nome de uma cor ao invés do seu valor hexadecimal, esta propriedade aceita todos os valores de cor do CSS que são hexadecimal, rgb e nomes de cores.

Para além do método fill() que temos vindo a utilizar para preencher os nossos objectos geométricos, existe outro método, o stroke() que desenha apenas a linha exterior do objecto e para definir a cor que queremos utilizar na nossa função stroke(), temos a propriedade strokeStyle(). Experimente adicionar o bloco de código abaixo e entenderá melhor o funcionamento da função stroke().

O código acima deverá mostrar um rectângulo azul vazio por dentro, como mostra a imagem abaixo.

stroke javascript

Bem está foi a primeira aula, muito simples, pois foi apenas uma introdução à manipulação do elemento canvas com javascript. Na próxima parte desta série de tutoriais já vamos complicar mais um pouco as coisas pois vamos começar a adicionar movimento aos objectos que desenhamos no canvas.

Clique no botão abaixo para fazer o download dos arquivos criados durante este tutorial.

Download

Se tiver dúvidas deixe um comentário abaixo!

Este tutorial está dividido em 10 partes.

Daniel Oliveira

Daniel Oliveira, 21 anos, vive em Lisboa e é estudante de engenharia informática no Instituto Superior Técnico. Adora desporto principalmente paintball, football, golf, kitesurfing, surfing, downhill mountain biking, rafting, zorbing e rock climbing. Apesar dos conteúdos do blog não joga nem gosta de jogar jogos de computador.

Deixar uma resposta