Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Meu projeto - com pequenas alterações do que foi apresentado em aula

Tentei realizar os próximos passos antes de assistir as aulas e acabei desenvolvendo soluções um pouco diferentes das que foram apresentadas na aula 4.

1 - Coloquei a contagem de pontos juntamente com a checagem de toque da borda, mas não sei se é desejável que uma função realize ações em diferentes componentes.

2 - Minha solução para que a raquete do oponente siga a posição da bolinha também foi diferente do apresentado na aula.

3 - Implementei um limite para a posição das raquetes, que nao ultrapassam área do jogo.

Uma outra alteração que eu fiz foi a possibilidade de jogar em fullscreen e também as cores dos componentes do jogo.

let hit = false;

var xBall = 300;
var yBall = 200;
let dBall = 40;
let radius = dBall/2;

let speed = 6

let speedXBall = speed;
let speedYBall = speed;

let xRacketOne = 5;
let yRacketOne = 150;
let wRacket = 15;
let hRacket = 120;

let xRacketTwo;
let yRacketTwo = 150;

let scorePlayerOne = 0;
let scorePlayerTwo = 0


function setup() {
  createCanvas(windowWidth, windowHeight)
}

function draw() {
  let xRacketTwo = windowWidth-windowHeight/35;
  background('#2577AB');
  fill(255);
  stroke(0);
  rect((windowWidth/2) - 4, 0, 8, windowHeight);
  stroke(255);
  line (0, windowHeight/2, windowWidth, windowHeight/2);
  showBall();
  moveBall();
  checkTouchBorder();
  showRackets(xRacketOne, yRacketOne);
  moveRacketOne();
  checkTouchRackets(xRacketOne, yRacketOne);
  checkTouchRackets(xRacketTwo, yRacketTwo);
  showRackets(xRacketTwo, yRacketTwo);
  moveRacketTwo();
  showScores();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function showBall (){
  fill('#FFD75D');
  stroke(0);
  circle(xBall,yBall,dBall)
}

function moveBall() {
  xBall += speedXBall;
  yBall += speedYBall
}

function moveRacketTwo () {
  if (yBall < height - hRacket/2) {
  yRacketTwo = yBall - 30
  }
}

function checkTouchBorder() {
    if (xBall + radius > width) {
    speedXBall *= -1;
    scorePlayerOne += 1;
    } 

    if (xBall + radius < 0 ){
    speedXBall *= -1;
    scorePlayerTwo += 1;

}
    if (yBall + radius > height ||
     yBall - radius<  0){
    speedYBall *= -1;
  }
}

function showRackets(x, y){
  fill('#FD6864');
  rect (x, y, wRacket, hRacket, 20);
}

function moveRacketOne(){
  if (keyIsDown (UP_ARROW)) {
    if (yRacketOne > 0){
    yRacketOne -= 10;
    }
  }
    if (keyIsDown (DOWN_ARROW)) {
      if (yRacketOne + hRacket < height){
      yRacketOne += 10;
    }
  }
}

function checkTouchRackets(x, y) {
  //   if (xBall - radius < xRacketOne + wRacket &&
  //     yBall - radius < yRacketOne + hRacket  &&
  //     yBall + radius > yRacketOne){
  //   speedXBall *= -1;
  // }

  hit = collideRectCircle(x, 
                          y, 
                          wRacket, 
                          hRacket, 
                          xBall, 
                          yBall, 
                          radius);

  if (hit){
    speedXBall *= -1;
  }
}

function showScores() {
  // rect(windowWidth/2 - windowWidth/17, windowHeight/34, windowHeight/15, windowHeight/20)
  fill(255)
  textSize(25)
  noStroke();
  text (scorePlayerOne, windowWidth/2 - windowWidth/20, windowHeight/15)
  text (scorePlayerTwo, windowWidth/2 + windowWidth/35, windowHeight/15)
}

Aqui o link pra quem quiser jogar. https://preview.p5js.org/regisncoelho/present/XKgMKxBHK

1 resposta
solução!

Olá novamente, Régis!

O jogo está incrivelmente bonito, funcional e com uma estética impecável! Gostei muito mesmo!!!

Seu código também está excelente, bastante fluido e legível! Vou utilizar essa ideia do fullscreen no meu projeto, adorei!!!

Sobre a questão de utilizar uma função para duas coisas diferentes, realmente não é visto como uma boa prática porque fere o princípio básico de construção de uma função que é,

desenvolver um processo para algo que poderá ser reutilizado no projeto, ou então chamar essa operação em outras partes do seu código apenas invocando seu nome. De maneira bem simples é como encapsular uma ideia de forma que permita modificá-la sem alterar o restante do código (o que já facilita muito para escalabilidade , correção de bugs e legibilidade do projeto).

Muito obrigada por compartilhar seu projeto e dúvidas conosco. Fique certo que você contribui muito com o aprofundamento de conhecimento e com suas soluções, parabéns mesmo, seu futuro na programação será brilhante!

Um forte abraço e já estou ansiosa por seus novos projetos!!