Criando Ping Pong com JavaScript parte 3

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:

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