Olá, neste artigo replicaremos o jogo Ping Pong usando JavaScript, utilizando o elemento canvas do HTML.
Mostraremos a facilidade de criar um jogo simples e que utiliza uma certa inteligência artificial para replicar o jogo Ping Pong, utilizando a máquina como adversário. Para isso, utilizaremos JavaScript puro para criar os elementos do jogo e suas ações. O canvas renderizará o jogo.
Vamos começar!
Para começar, precisamos de um arquivo chamado index.html, e chamaremos o arquivo scripts.js que será o responsável pelas ações do jogo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ping Pong</title>
<script src="scripts.js"></script>
</head>
<body>
</body>
</html>
E no nosso scripts.js, começaremos adicionando o método requestAnimationFrame. Ele funciona de maneira semelhante ao método setTimeout, trazendo uma chamada de retorno a aproximadamente 60 frames por segundo. Ele torna-se melhor que o método setTimeout pois o navegador pode realizar otimizações na chamada. Mas, caso não haja suporte, utilizaremos o método setTimeout para realizar este retorno de 60 fps.
let animacao = window.requestAnimationFrame || function(callback){
window.setTimeout(callback, 1000/60);
}
Renderizando:
Agora, criaremos nosso elemento canvas dinamicamente com JavaScipt. Utilizaremos uma altura de 600 e largura de 400. Este será o tamanho de nossa tela de jogo. Também utilizaremos o contexto, que será “2d”:
let canvas = document.createElement("canvas");
let width = 400;
let height = 600;
canvas.width = width;
canvas.height = height;
let contexto = canvas.getContext("2d");
E quando a página for carregada, anexaremos o nosso elemento canvas ao body do HTML e usaremos o método animacao, criado anteriormente, chamando uma função chamada step.
window.onload = function(){
document.body.appendChild(canvas);
animacao(step);
};
A função step será responsável por realizar três coisas:
- Atualizar todos os objetos;
- Renderizar os objetos;
- Utilizar a recursão, chamando a função step novamente.
let step = function(){
atualizar();
renderizar();
animacao(step);
};
Para começar exibindo algo na tela, vamos implementar a função atualizar como não operacional, e na nossa função renderizar, vamos definir o plano de fundo do nosso jogo, e utilizaremos os métodos fillStyle e fillRect que são fornecidos pelo contexto. A cor definida é o SlateBlue, com código hexadecimal #836FFF.
let renderizar = function(){
contexto.fillStyle = "#836FFF";
contexto.fillRect(0, 0, width, height);
}
E nossa saída será algo assim:
Gostou deste artigo? Comente abaixo e aguarde a sequência!
Referências: https://thoughtbot.com/blog/pong-clone-in-javascript
