Como fazer um jogo em HTML5 e JavaScript – Motor de jogo







Aprenda a desenvolver um jogo utilizando apenas HTML 5 e JavaScript, nesse primeiro artigo vamos mostrar como funciona e como fazer um motor de jogo.


Acredito que o desejo de muitos programadores inciantes(não necessário) é desenvolver um jogo, logo no inicio da minha carreira profissional a minha vontade de transformar ideias de jogos em realidade era grande, hoje em dia, existe um material enorme sobre o assunto na internet, mas é um conteúdo tão bagunçado que as vezes eu me perdia nos meus estudos.

Graças ao Filipe Alves e de seu canal no YouTube, eu tive a oportunidade de aprender mais sobre o assunto de uma forma bem clara. Estarei postando a serie de vídeos que ele fez e explicando o passo a passo dele.

Iniciando o desenvolvimento do jogo

Um jogo funciona dentro de um loop infinito, chamamos esse loop de motor de jogo ou "game engine" esse loop nada mais é que algumas funções básicas chamando outras, vamos iniciar nosso código HTML e a criação das funções básicas do nosso jogo.

Temos no total 5 funções mas apenar 3 delas são necessárias para nosso game engine, um jogo fica renderizando gráficos em um canvas e a cada segundo ele atualiza esse gráficos, ou seja, é como se fizéssemos um "refresh" a cada segundo na pagina e a cada momento aparece algo novo, isso não vale apenas para os gráfico mas para todo o código, ou seja, as funções sempre serão chamadas a cada momento e se executando conforme suas condições.

Agora vamos fazer o canvas ser incluído no HTML dinamicamente, além disso nos vamos definir uma altura e largura conforme o tamanho do monitor do usuário.

a partir desse código, já temos um documento com canvas definido e o principal controlado (no caso o clique) funcionando corretamente, para ter certeza de que não há erros use o console do seu navegador para depurar o código.

Você pode abrir seu documento HTML no navegador e testar o código a vontade e ficar livre para editar, o próximo passo será a construção do loop que ficar chamando a função roda sempre, através do método "requeste animation frame".

A função roda será responsável por chamar a função atualiza e a função desenha, a função atualiza sera responsável por atualizar os status do jogo, status do personagem e novos valores para as variáveis, a função desenha fara a renderização a cada momento no canvas, apagando a anterior e refazendo o desenho em uma nova posição se necessário.

Nota: Quando se utiliza algum tipo de atualização apenas na posição X e Y de alguma elemento do canvas (no caso um retângulo que foi desenhado) o anterior não some, isso acontece por que na verdade só estamos mudando o elemento de posição, então teremos um rastro do elemento,  o método que estamos utilizando redesenha o elemento por completo apagando o anterior deixando a animação limpa.

Pronto, nosso primeira parte do código completo!

Ao ler o código é possível encontrar a função roda, atualiza e desenha completas, além disso já é possível desenhar no cavas como foi feito na função desenha renderizando um retângulo azulo que dar o efeito de fundo do nosso jogo.

No próximo artigo vamos começar a criar os objetos do jogo como personagem, além disso vamos aplicar gravidade e outras coisas mais !

One thought on “Como fazer um jogo em HTML5 e JavaScript – Motor de jogo

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *