Question

Please Use Javascript and P5

Pongish

Create a one player pong game. This should have:

1. A paddle/rectangle controlled by the player on the right of the screen (moves up/down)

2. A ball/circle that starts moving to the left of the screen.

3. This ball bounces off the TOP, BOTTOM, and LEFT of the screen.
4. This ball bounces off the paddle (use hitTestPoint)
5. If the ball goes beyond the right of the screen, place the ball back at the center of the screen and set its velocity to the left again.
7. (optional) Display a "score" number on the screen that ticks up by 1 every time the player catches the ball with the paddle. Resets to zero when the ball resets.

Ideally, this project would use objects for both paddle and ball.

Answer 1

var Ball_X = Math.floor(Math.random() * 300) + 50;
var Ball_Y = 50;
var diameter = 50;
var Ball_XChange = 5;
var Ball_YChange = 5;

var xPaddle;
var yPaddle;
var paddleWidth = 100;
var paddleHeight = 25;

var started = false;
var score = 0;

function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(0);
   Ball_X += Ball_XChange;
   Ball_Y += Ball_YChange;
   if (Ball_X < diameter/2 ||
Ball_X > windowWidth - 0.5*diameter) {
       Ball_XChange *= -1;
}
   if (Ball_Y < diameter/2 ||
Ball_Y > windowHeight - diameter) {
Ball_YChange *= -1;
   }
  
if ((Ball_X > xPaddle &&
Ball_X < xPaddle + paddleWidth) &&
(Ball_Y + (diameter/2) >= yPaddle)) {
Ball_XChange *= -1;
Ball_YChange *= -1;
score++;
}
   fill(255, 0, 255);
   noStroke();
   ellipse(Ball_X, Ball_Y, diameter, diameter);
  
if (!started) {
xPaddle = windowWidth / 2;
yPaddle = windowHeight - 100;
started = true;
}
  
fill(0, 255, 255);
noStroke();
rect(xPaddle, yPaddle, paddleWidth, paddleHeight);
  
fill(0, 255, 255);
textSize(24);
   text("Score: " + score, 10, 25);
}
function keyPressed() {
if (keyCode === LEFT_ARROW) {
xPaddle -= 50;
} else if (keyCode === RIGHT_ARROW) {
xPaddle += 50;
}
}