1
resposta

Criei uma linhaCentral (Um meio de campo) mas a function ficou grande de mais alguma dica?

//Variáveis da bolinha;
let xBolinha = 300;
let yBolinha = 200;
let diametro = 10;
let raio = diametro /2;

//Variáveis da raquete oponente;
let xRaqueteOponente = 588;
let yRaqueteOponente = 155;
let comprimentoRaqueteOponente = 10;
let alturaRaqueteOponente = 70;
let velocidadeYRaqueteOponente = 0;

//Variáveis da raquete;

let xRaquete = 2;
let yRaquete = 155;
let comprimentoRaquete = 10;
let alturaRaquete = 70;
let colodiu = false;

//Velocidade da bolinha;
let velocidadeYBolinha = 6
let velocidadeXBolinha = 6

//Placar do jogo;

let meusPontos = 0;
let pontosOponente = 0;

//Linha central;

let xLinha = 300;
let yLinha = 200;
let yLinha2 = 220;


function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  mostraBolinha();
  movimentaBolinha();
  verificaColisaoBordas();
  mostraRaquete(xRaquete, yRaquete);
  mostraRaquete(xRaqueteOponente, yRaqueteOponente);
  movimentaMinhaRaquete();
  movimentaRaqueteOponente();
  verificaColisaoRaquete(xRaquete, yRaquete);
  verificaColisaoRaquete(xRaqueteOponente, yRaqueteOponente);
  incluiPlacar();
  marcaPonto();
  linhaCentral();


}

function mostraBolinha(){
  circle(xBolinha, yBolinha, diametro);
}
function mostraRaquete(x, y){
  rect(x, y, comprimentoRaquete, alturaRaquete, 70, 70);

}


function movimentaBolinha(){
  xBolinha += velocidadeXBolinha;
  yBolinha += velocidadeYBolinha;
}
function movimentaMinhaRaquete(){
   if(keyIsDown(UP_ARROW)){
     yRaquete -= 10;

   }
  if(keyIsDown(DOWN_ARROW)){
    yRaquete += 10;
  }
}
function movimentaRaqueteOponente(){
  velocidadeYOponente = yBolinha - yRaqueteOponente - comprimentoRaqueteOponente / 2 - 10;
  yRaqueteOponente += velocidadeYOponente

}


function verificaColisaoBordas(){
   if(xBolinha + raio > width || xBolinha - raio < 0){
    velocidadeXBolinha *= -1;
  }
  if(yBolinha + raio > height || yBolinha - raio < 0){
    velocidadeYBolinha *= -1 
  } 
}


function verificaColisaoRaquete(x, y){
  colidiu = 
  collideRectCircle(x, y, comprimentoRaquete, alturaRaquete, xBolinha, yBolinha, raio);
  if(colidiu){
    velocidadeXBolinha *= -1;
  }

}
function incluiPlacar(){

    fill(255);
    text(meusPontos, 278, 26);
    text(pontosOponente, 321, 26);

}
function marcaPonto() {
    if (xBolinha > 599) {
        meusPontos += 1;
    }
    if (xBolinha < 2) {
        pontosOponente += 1;
    }
}

function linhaCentral(){
  rect(300, 0, 5, 10);
  rect(300, 20, 5, 10);
  rect(300, 40, 5, 10);
  rect(300, 60, 5, 10);
  rect(300, 80, 5, 10);
  rect(300, 100, 5, 10);
  rect(300, 120, 5, 10);
  rect(300, 140, 5, 10);
  rect(300, 160, 5, 10);
  rect(300, 180, 5, 10);
  rect(300, 200, 5, 10);
  rect(300, 220, 5, 10);
  rect(300, 240, 5, 10);
  rect(300, 260, 5, 10);
  rect(300, 280, 5, 10);
  rect(300, 300, 5, 10);
  rect(300, 320, 5, 10);
  rect(300, 340, 5, 10);
  rect(300, 360, 5, 10);
  rect(300, 380, 5, 10);
  rect(300, 400, 5, 10);

}








1 resposta

Olá Paulo, tudo bem?

Então na parte 2 do curso iremos entrar justamente nessa questão de coisas repetidas com padrões :)

Neste caso o que poderíamos fazer é criar um laço, isto é, uma instrução que queremos repetir algumas vezes, no caso seria dessa maneira:

function linhaCentral(){
    for( let y = 0; y <= 400; y = y + 20){
        ....
    }

Aqui eu estou definindo um laço que tem 3 partes separadas por ;, no caso:

  • Variável de inicialização: No caso chamei de y e disse que ela começa com 0

  • Condição de Parada: Aqui temos uma condição booleana, enquanto essa condição for atendida iremos continuar o laço:

Neste exemplo, enquanto a variável y for menor, ou igual, a 400, iremos continuar executando o laço

  • Atualização da Variável: Para não ter um loop infinito, precisamos fazer algo com a variável, para algum momento a condição de parada seja executada

Como você pode perceber no seu código, está aumentando de 20 em 20, e é isso que eu estou fazendo, então após cada iteração do laço iremos fazer essa atualização

Agora dentro do laço podemos escrever o que queremos que seja executado:

function linhaCentral(){
    for( let y = 0; y <= 400; y = y + 20){
          rect(300, y, 5, 10);
    }

Dessa forma o que teremos é idêntico:

  • rect(300, 0, 5, 10); na primeira iteração

Aumenta em 20 o valor de y

  • `rect(300, 20, 5, 10);

E assim até chegar em

  • `rect(300, 400, 5, 10);

Ai a variável y irá valer 420 que é maior que 400 e o laço é interrompido :)

Conseguiu Compreender?

Eu dei apenas uma introduzida, mas na segunda parte o instrutor irá falar com mais calma sobre isso :)

Abraços e Bons Estudos!