Documentação: Pong

[AndreySchemel]

Em nosso game usamos uma estrutura baseada em 2 containers, onde um ficará no topo, outro na lateral esquerda e um contendo o jogo em si.

container1 {

width: 100%;
margin-top: 25px;
height: 120px;
background-color: green;

}

Container do menu do topo, onde irá conter o menu.

container2 {

margin-top: 30px;
width: 250px;
height: 600px;
background-color: yellow;

}

Container da esquerda, onde irá conter outro menu, ou alguma animação, imagem, botões, etc..

---

GAME:

var animate = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000/60) };

Esta função diz para o navegador que irá realizar uma animação, fazendo com que ele chame uma função específica para quadros de animações, tendo uma callback.

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var width = 880; var height = 560; ctx.fillStyle = "black"; ctx.fillRect(0, 0, 880, 560);

Neste trecho ocorre a criação do canvas, usando os atributos da linguagem JS. Definimos um tamanho apropriado conforme o jogo.

window.onload = function() { document.body.appendChild(myCanvas); animate(step); (chamada step) };

Aqui ocorre o carregamento do canvas, usando-o como filho da função.

var step = function() { update(); render(); animate(step); };

Esta variavel tem a função de fazer a chamada para todos os elementos animados de maneira que depois possa se manipular, modificar os objetos.

var render = function() { context.fillStyle = "#000000"; context.fillRect(0, 0, width, height); };

Função que renderiza o canvas na tela.

---

function Paddle(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; this.x_speed = 0; this.y_speed = 0; }

Está função inicializa a criação da barra, utilizando altura, largura e os eixos X e Y para a inserção dos pontos referênciados. Por enquanto, a função de velocidade de X e Y é 0, onde não há nenhuma.

[RicardoAlvize]

Paddle.prototype.render = function() { context.fillStyle = "#00FF00"; context.fillRect(this.x, this.y, this.width, this.height); };

Na função acima vai ser renderizado as barras do game como cor, movimento e o contato com a esfera.

function Player1() { this.paddle = new Paddle(175, 580, 50, 10); } Na função acima tem as coordenadas onde vai se encontrar o Jogador 1, onde será reproduzido o movimento da barra pelas teclas arrow.

function Player2() { this.paddle = new Paddle(175, 10, 50, 10); } Na função acima tem as coordenadas onde vai se encontrar o Jogador 2, onde será reproduzido o movimento da barra pelas teclas A e D.

Player1.prototype.render = function() { this.paddle.render(); }; Na função acima será renderizado a barra para o jogador 1 onde ele poderá fazer movimentos na horizontal dentro do canvas.

Player2.prototype.render = function() { this.paddle.render(); };

Na função acima será renderizado a barra para o jogador 2 onde ele poderá fazer movimentos na horizontal dentro do canvas.

   var player1 = new Player1();
var player2 = new Player2();
var render = function() {

     context.fillStyle = "#000000";
  context.fillRect(0, 0, width, height);
  player1.render();
  player2.render();
};

[LeosBSI]

Player2.prototype.update = function() {

Variável Player2.prototype.update receberá function().

for(var key in keysDown) {

Nessa parte do código, se a tecla pressionada for A( para a esquerda), vai executar o código abaixo.

var value = Number(key); Variável value vai receber a tecla pressionada.

if(value == 65) { // tecla A esquerda this.paddle.move(-4, 0);

Se o valor for igual a 65, a barra será movida para a parte inferior esquerda da tela.

Caso a tecla pressionada for D( para a direita), será executado o if abaixo.

} else if (value == 68) { // tecla D direita this.paddle.move(4, 0);

Se o valor for igual a 68, a barra será movida para a parte superior esquerda da tela.

} else { this.paddle.move(0, 0); Se não for pressionada nenhuma tecla, a barra permanecera a esquerda, no centro da tela;

} } };

Paddle.prototype.move = function(x, y) { A variável Paddle.prototype.move receberá a function(x, y).

this.x += x; Variável this.x recebe x+1. this.y += y; Variável this.y recebe y+1. this.x_speed = x; Variável this.x.speed( de velocidade) recebe valor de x. this.y_speed = y; Variável this.y.speed( de velocidade) recebe valor de y.

Se o valor de " x " for menor que 0, executará o if abaixo. if(this.x < 0) { // maximo esquerdo

Nessa parte, está sendo executado o if que mostra o máximo que a barra poderá se mover para a inferior esquerda.

this.x = 0; this.x_speed = 0; Declaração dos valores de " x " e de " x.speed ".

Se o valor de " x + o tamanho da tela " for maior que 400, executará o if abaixo. } else if (this.x + this.width > 400) { // máximo direito

Nessa parte, está sendo executado o if que mostra o máximo que a barra poderá se mover para a superior direita da tela.

this.x = 400 - this.width; this.x_speed = 0; Declaração dos valores de " x " e de " x.speed ".

} }

[Henriquerueckert]

Os eventos a baixo, Libera para que o usuário possa dar inicio as barras, está fazendo com que as barras se movam constantemente, sem que o usuário possa fazer 2 ações, apenas ir para um lado (esquerda ou direita), e parar clickando no lado oposto em que está direcionado. Com os dois eventos e o Update, ele força a barra só se mover quando pressionado o botão, mas para isso precisa da função de movimento das barras, que está logo em baixo do Update(Player 1).

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

window.addEventListener("keyup", function(event) {
  delete keysDown[event.keyCode];
});
var update = function() {
  player1.update();
  player2.update();
};

A função abaixo, irá delimitar a funcionalidade das barras, para quando pressionar as teclas, a barra se mover, e conforme ela estiver pressionada, entrará dentro das condições e verifica qual a tecla em que o usuário está pressionando, seriam os controles do usuário para mover a barra.

Player1.prototype.update = function() {
  for(var key in keysDown) {
    var value = Number(key);
    if(value == 37) { // seta esquerda
      this.paddle.move(-4, 0);
    } else if (value == 39) { // seta direita
      this.paddle.move(4, 0);
    } else {
      this.paddle.move(0, 0);
    }
  }
};