Autor: Alexandre Machado

Na nossa sequência de artigos sobre como criar um jogo Ping Pong utilizando JavaScript puro, já conseguimos renderizar nossa tela de fundo de jogo e adicionar os objetos referentes ao Jogador, ao Computador e à bolinha que serão utilizados para dar vida ao jogo. Caso você não tenha visto as partes 1 e 2 referentes a continuação deste artigo, poderá acessá-las em:

• Parte 1: https://www.mundojs.com.br/2020/06/15/criando-ping-pong-com-javascript-parte-1/
• Parte 2: https://www.mundojs.com.br/2020/06/15/criando-ping-pong-com-javascript-parte-2/

Na última parte desta nossa sequência de artigos, criaremos as animações e adicionaremos os controles, tanto do jogador quanto à IA referente ao computador.

Animação:

Começaremos adicionando o movimento. A animação da bola precisa se direcionar à raquete do jogador. Fazendo isso, alteraremos a função atualizar e adicionar essa atualização na nossa bola, com um incremento:

function atualizar(){
    bolinha.atualizar();
};

Bolinha.prototype.atualizar = function(){
    this.x += this.velocidade_x;
    this.y += this.velocidade_y;
}

As nossas pás estão paradas e precisamos verificar a existência de colisão da bola com as raquetes do jogador e computador. Também precisamos verificar se a bola atingirá as extremidades esquerda e direita do nosso campo de jogo. Também precisamos colocar as raquetes de ambos os jogadores no nosso método de atualização:

let top_x = this.x - 5;
    let top_y = this.y - 5;
    let bottom_x = this.x + 5;
    let bottom_y = this.y + 5;

    // Se bate na extremidade esquerda
    if (this.x - 5 < 0){
        this.x = 5;
        this.velocidade_x = -this.velocidade_x;
    } else if (this.x + 5 > 400){ //Se bate na extremidade direita
        this.x=395;
        this.velocidade_x = -this.velocidade_x;
    }

    //Se tocar no fim do jogo ou no início, ocorre um ponto
    if (this.y < 0 || this.y > 600){
        this.velocidade_x = 0;
        this.velocidade_y = 3;
        // E centralizamos a bolinha novamente
        this.x = 200;
        this.y = 300;
    }

    if (top_y > 300){
        if (top_y < (raquete1.y + raquete1.height) && bottom_y > raquete1.y && top_x < (raquete1.x + raquete1.width) && bottom_x > raquete1.x){
            // Acerta a raquete do jogador
            this.velocidade_y = -3;
            this.velocidade_x += (raquete1.velocidade_x /2);
            this.y += this.velocidade_y;
        }
    }else{
        if(top_y < (raquete2.y + raquete2.height) && bottom_y > raquete2.y && top_x < (raquete2.x + raquete2.width) && bottom_x > raquete2.x){
            // Acerta a raquete do computador
            this.velocidade_y = 3;
            this.velocidade_x += (raquete2.velocidade_x / 2);
            this.y += this.velocidade_y;
        }
    }

Controles:

Agora, criaremos o controle para que o jogador possa mover sua raquete, utilizando um keyDown e um addEventListener para adicionar um evento de pressionar tecla:

let keysDown = {};

window.addEventListener("keydown", function(event){
    keysDown[event.keyCode] = true;
});

window.addEventListener("keyup", function(event){
    delete keysDown[event.keyCode];
})

Agora, podemos atualizar a posição da raquete conforme a tecla for pressionada. Precisamos agora criar um código para mover a raquete ao ser pressionada a tecla:

Jogador.prototype.atualizar = function(){
    for (let key in keysDown) {
        //Captura e pega o número da tecla pressionada
        let valor = Number(key);
        // Tecla seta para esquerda (37)
        if (valor == 37) {
            this.raquete.mover(-4, 0);
        }
        // Tecla seta para direita (39)
          else if (valor == 39) {
            this.raquete.mover(4, 0);
        } else{
            this.raquete.mover(0, 0);
        }
    }
};

Raquete.prototype.mover = function(x, y){
    this.x += x;
    this.y += y;
    this.velocidade_x = x;
    this.velocidade_y = y;
    // Mover tudo para a esquerda
    if(this.x < 0){
        this.x = 0;
        this.velocidade_x = 0;
    }
    // Mover tudo para a direita
      else if (this.x + this.width > 400){
        this.x = 400 - this.width;
        this.velocidade_x = 0;
    }
}

E precisamos atualizar a nossa função atualizar:

function atualizar(){
    jogador.atualizar();
    bolinha.atualizar(jogador.raquete, computador.raquete);
};

Inteligência do Computador:

Já podemos controlar nossa raquete e a bolinha vai ricochetear de acordo com o movimento da raquete, mas ainda não temos movimento no nosso adversário, o computador. Vamos fazer a raquete do computador sempre se posicionar conforme o centro da bolinha. O computador terá velocidade máxima para ele pontuar ocasionalmente:

Computador.prototype.atualizar = function (bolinha){
    let posicao_x = bolinha.x;
    let diferenca = -((this.raquete.x + (this.raquete.width / 2)) - posicao_x);
    // Máxima velocidade para a esquerda
    if (diferenca < 0 && diferenca < -4) {
        diferenca = -5;
    } 
    // Máxima velocidade para a direita  
      else if (diferenca > 0 && diferenca > 4){
        diferenca = 5;
    }
    this.raquete.mover(diferenca, 0);
    if (this.raquete.x < 0){
        this.raquete.x = 0;
    } else if (this.raquete.x + this.raquete.width > 400){
        this.raquete.x = 400 - this.raquete.width;
    }
}

E atualizamos a nossa função atualizar:

function atualizar(){
    jogador.atualizar();
    computador.atualizar(bolinha)
    bolinha.atualizar(jogador.raquete, computador.raquete);
};

Com isso, temos uma réplica do jogo de Ping Pong funcional! Teste no seu navegador!

Gostou desta sequência de artigos? Comente abaixo!

Referências: https://thoughtbot.com/blog/pong-clone-in-javascript

Na parte 1 do nosso jogo, criamos a tela renderizada onde nosso jogo irá acontecer. Também criamos uma função que renderiza essa tela assim que a nossa página HTML é carregada. Você pode conferir os nossos códigos em:

• https://www.mundojs.com.br/2020/06/15/criando-ping-pong-com-javascript-parte-1/

Na nossa continuação, criaremos as nossas raquetes e a bola a ser utilizada no nosso jogo de Ping Pong. Como sabemos, temos dois jogadores, o Player 1 e o Player 2 (que no nosso jogo, será uma pequena inteligência artificial).

Nossos objetos deverão ser renderizados em tela. Precisamos fornecer uma posição x, y, uma altura e uma largura. Também precisamos criar velocidades para nossa bolinha. Essas velocidades atuarão no eixo X e no eixo Y:

function Raquete(x, y, width, height){
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.velocidade_x = 0;
    this.velocidade_y = 0;
}

Com nossa função Raquete criada, precisamos renderizar as raquetes agora. Criaremos um objeto protótipo de nossa raquete, utilizando o Prototype. A cor da nossa raquete será preta.

function Raquete(x, y, width, height){
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.velocidade_x = 0;
    this.velocidade_y = 0;
}

Raquete.prototype.renderizar = function(){
    contexto.fillStyle = "black";
    contexto.fillRect(this.x, this.y, this.width, this.height);
};

Já que cada raquete será controlada de forma independente, vamos criar objetos para representá-las. As coordenadas X e Y são escolhidas para colocar o Jogador na parte inferior, e o Computador na parte superior:

function Jogador(){
    this.raquete = new Raquete(175, 580, 50, 10);
}

function Computador(){
    this.raquete = new Raquete(175, 10, 50, 10);
}

E precisamos criar a função para renderizar o jogador e o computador:

Jogador.prototype.renderizar = function(){
    this.raquete.renderizar();
}

Computador.prototype.renderizar = function(){
    this.raquete.renderizar();
}

E precisamos também criar a bola. Ela será um círculo, com coordenadas x e y que representarão o centro do círculo. Também forneceremos um raio de 5, ou seja, a nossa bolinha terá 10 de diâmetro:

function Bolinha(x, y){
    this.x = x;
    this.y = y;
    this.velocidade_x = 0;
    this.velocidade_y = 3;
    this.radius = 5;
}

Bolinha.prototype.renderizar = function() {
    contexto.beginPath();
    contexto.arc(this.x, this.y, this.radius, 2 * Math.PI, false);
    contexto.fillStyle="white";
    contexto.fill();
};

E agora, vamos construir nossos objetos Jogador, Computador e Bolinha e atualizar a nossa função renderizar():

let jogador = new Jogador();

let computador = new Computador();

//A bolinha será renderizada no centro da tela
let bolinha = new Bolinha(200,300);

let renderizar = function(){
    contexto.fillStyle = "#836FFF";
    contexto.fillRect(0, 0, width, height);
    //Atualizar a partir daqui
    jogador.renderizar();
    computador.renderizar();
    bolinha.renderizar();
}

E a nossa saída será:

Gostou deste artigo? Comente abaixo e acompanhe a sequência!

Referência: https://thoughtbot.com/blog/pong-clone-in-javascript

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