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:
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