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.
<! DOCTYPE html>
<html lang = "pt-br">
<head>
<meta charset = "utf-8">
<title> Jogo HTML5 </ title>
</ head>
<body>
<script type = "text / javascript">
//VARIÁVEIS GLOBAIS DO JOGO
var canvas, ctx, ALTURA, LARGURA, frame = 0;
//funções do jogo
// responsável pelo controle do jogo, toda vez que clicar o personagem pula
function clique(){}
// função principal, o construtor do jogo
function main () {}
//responsável por criar o loop do jogo
function roda() {}
// responsável por atualizar os status do jogo
function atualiza(){}
// responsável por renderizar os gráficos
function desenha(){}
// incia o jogo
main();
</ script>
</ body>
</ html>
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.
<! DOCTYPE html>
<html lang = "pt-br">
<head>
<meta charset = "utf-8">
<title> Jogo HTML5 </ title>
<style type = "text / css">
/*RESPONSÁVEL POR ALINHAR O CANVAS NO CENTRO DA PAGINA*/
canvas{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
direito: 0px;
margin: auto;
border: 1px solid # 000;
}
</ style>
</ head>
<body>
<script type = "text / javascript">
//VARIÁVEIS GLOBAIS DO JOGO
var canvas, ctx, ALTURA, LARGURA, frame = 0;
// Irá contar o cliks e fazer o personagem pular
function clique(event){
// para testarmos se o clique funciona será exibiro um alert para toda vez que o clique for acionado !
alert("testando clique!");
}
// função principal onde será chamada as outras funções (contrutor)
function main () {
// pega a largura total da tela
LARGURA = window.innerHeight;
// pega a altura total da tela
ALTURA = window.innerWidth;
//se a largura for mair que 500px a largura é redefinida para 600 px
//obs, essa condição sempre será verdadeira para desktops, portanto a largura e altura sempre sera 600px
if (LARGURA >= 500){
LARGURA = 600;
ALTURA = 600;
}
// criação de um novo elemento do tipo canvas, é como se eu escrevesse a tag canvas no html
canvas = document.createElement ("canvas");
//define a largura do canvas
canvas.width = LARGURA;
//define a altura do canvas
canvas.height = ALTURA;
// pegar o contexto 2D para o canvas, isso quer dizer que tudo quer for renderizado será do contexto 2D
ctx = canvas.getContext ("2d");
// adiciona o canvas ao nosso documento HTML
document.body.appendChild (canvas);
// adiciona o evento de clique, toda vez que alguém cliar na pagina será executado a função "clique" que criamos anteriormente, o evento será pasado por parametro
document.addEventListener("mousedown", clique);
//chama a função roda
roda();
}
//responsável por fazer a
function roda() {
atualiza();
desenha();
}
function atualiza(){}
function desenha(){}
// incia o jogo
main();
</ script>
</ body>
</ html>
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!
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Game HTML5</title>
<style type="text/css">
/*RESPONSÁVEL POR ALINHAR O CANVAS NO CENTRO DA PAGINA*/
canvas{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
border: 1px solid #000;
}
</style>
</head>
<body>
<script type="text/javascript">
//VARIÁVEIS GLOBAIS DO JOGO
var canvas, ctx, ALTURA, LARGURA, frame = 0;
// Irá contar o cliks e fazer o personagem pular
function clique(event){
// para testarmos se o clique funciona será exibiro um alert para toda vez que o clique for acionado !
alert("testando clique!")
}
// função principal onde será chamada as outras funções (contrutor)
function main(){
// pega a largura total da tela
LARGURA = window.innerHeight;
// pega a altura total da tela
ALTURA = window.innerWidth;
//se a largura for mair que 500px a largura é redefinida para 600 px
//obs, essa condição sempre será verdadeira para desktops, portanto a largura e altura sempre sera 600px
if (LARGURA >= 500){
LARGURA = 600;
ALTURA = 600;
}
// criação de um novo elemento do tipo canvas, é como se eu escrevesse a tag canvas no html
canvas = document.createElement("canvas");
//define a largura do canvas
canvas.width = LARGURA;
//define a altura do canvas
canvas.height = ALTURA;
// pegar o contexto 2D para o canvas, isso quer dizer que tudo quer for renderizado será do contexto 2D
ctx = canvas.getContext("2d");
// adiciona o canvas ao nosso documento HTML
document.body.appendChild(canvas);
// adiciona o evento de clique, toda vez que alguém cliar na pagina será executado a função "clique" que criamos anteriormente, o evento será pasado por parametro
document.addEventListener("mousedown", clique);
//chama a função roda
roda();
}
//responsável por fazer a
function roda() {
//chama a função atualiza
atualiza();
//chama a função desenha
desenha();
// a cada segundo a função roda sera chamada
window.requestAnimationFrame(roda);
}
function atualiza(){
//incrementa mais 1 ao nosso frame
frame ++;
}
function desenha(){
// define a cor do retangulo que queremos dezenhar
ctx.fillStyle = "#50BEff";
// desenha um retangulo da x = 0 até o tamanho total da largura
//e de y = 0 até o tamanho total da altura
ctx.fillRect(0,0, LARGURA, ALTURA)
}
// incia o jogo
main();
</script>
</body>
</html>
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 !