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.

Deixar uma resposta