Criando Ping Pong com JavaScript parte 1

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