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