// Screen Size

let viewportWidth;

let viewportHeight;

​

// The ball is Pong is defined by 

let ballPositionX;

let ballPositionY;

let ballRadius;

​

let ballSpeedX;

let ballSpeedY;

​

// Paddle Info

let paddleSizeX;

let paddleSizeY;

​

let paddleSpeed;

​

// Left paddle

let leftPaddlePositionX;

let leftPaddlePositionY;

// Right Paddle

let rightPaddlePositionX;

let rightPaddlePositionY;

​

// Left player score

let leftScore;

// Right player score

let rightScore;

​

// Background Image

let backgroundImage;

​

​

function preload()

{

  backgroundImage = loadImage("PongBg.png");

}

​

​

function setup()

{

  // Initialize Pong game objects

  // Screen Size

  viewportWidth = 600;

  viewportHeight = 400;

  // The ball

  ballPositionX = viewportWidth / 2;

  ballPositionY = viewportHeight / 2;

  ballRadius = 10;

  // Negative X goes left, positive goes right

  ballSpeedX = 2;

  // Negative Y goes up, positive Y goes down

  ballSpeedY = 2;

  // Paddle Info

  paddleSizeX = 10;

  paddleSizeY = 80;

  paddleSpeed = 4;

  // Left paddle 

  leftPaddlePositionX = 50;

  leftPaddlePositionY = viewportHeight / 2;

  // Right Paddle 

  rightPaddlePositionX = viewportWidth - leftPaddlePositionX;

  rightPaddlePositionY = leftPaddlePositionY;

  // Left player score

  leftScore = 0;

  // Right player score

  rightScore = 0;

  createCanvas(viewportWidth, viewportHeight);

}

​

​

function draw()

{

  // Draw the background image so that it starts in the top-left

  // corner of the canvas and covers the full width and height

  image(backgroundImage, 0, 0, viewportWidth, viewportHeight);

  //////////// Update Ball ////////////

  //

  // Change the direction of the ball if exiting from the top or bottom

  if (ballPositionY - ballRadius < 0 ||

      ballPositionY + ballRadius > viewportHeight)

    ballSpeedY = ballSpeedY * (-1);

  // If the ball touches either paddle, change its direction

  if (ballPositionX - ballRadius < leftPaddlePositionX &&

      ballPositionY > leftPaddlePositionY - paddleSizeY / 2 &&

      ballPositionY < leftPaddlePositionY + paddleSizeY / 2 ||  // OR

      ballPositionX + ballRadius > rightPaddlePositionX &&

      ballPositionY > rightPaddlePositionY - paddleSizeY / 2 &&

      ballPositionY < rightPaddlePositionY + paddleSizeY / 2)

    ballSpeedX = ballSpeedX * (-1); // Switch X direction

​

  // Update the values of position x and y

  ballPositionX = ballPositionX + ballSpeedX;

  ballPositionY = ballPositionY + ballSpeedY;

  //

  ////////////////////////

  //////////// Update Left Paddle ////////////

  //

  // Updating the left paddle Y position to subtract

  // the paddle speed when the W key is pressed

  if (keyIsDown(87))  // key code for the W key

  {

    leftPaddlePositionY = leftPaddlePositionY - paddleSpeed;

    // Don't allow the paddle to move too far up

    if (leftPaddlePositionY < paddleSizeY / 2)

      leftPaddlePositionY = paddleSizeY / 2;

  }

  // Updating left paddle Y position to add

  // the paddle speed when the S key is pressed

  if (keyIsDown(83))  // key code for the S key

  {

    leftPaddlePositionY = leftPaddlePositionY + paddleSpeed;

    // Don't allow the paddle to move too far down

    if (leftPaddlePositionY > viewportHeight - paddleSizeY / 2)

      leftPaddlePositionY = viewportHeight - paddleSizeY / 2;

  }

  //

  ////////////////////////

  //////////// Update Right Paddle ////////////

  //

  // Updating the right paddle Y position to subtract

  // the paddle speed when the up arrow key is pressed

  if (keyIsDown(UP_ARROW))

  {

    rightPaddlePositionY = rightPaddlePositionY - paddleSpeed;

    // Don't allow the paddle to move too far up

    if (rightPaddlePositionY < paddleSizeY / 2)

      rightPaddlePositionY = paddleSizeY / 2;

  }

  // Updating right paddle Y position to add

  // the paddle speed when the down arrow key is pressed

  if (keyIsDown(DOWN_ARROW))

  {

    rightPaddlePositionY = rightPaddlePositionY + paddleSpeed;

    // Don't allow the paddle to move too far down

    if (rightPaddlePositionY > viewportHeight - paddleSizeY / 2)

      rightPaddlePositionY = viewportHeight - paddleSizeY / 2;

  }

  //

  ////////////////////////

  //////////// Left Score Check ////////////

  //

  // If the ball moves past the right paddle...

  if (ballPositionX > rightPaddlePositionX)

  {

    // ...the left player scores a point

    leftScore = leftScore + 1;

    // Move the ball to the center of the canvas

    ballPositionX = viewportWidth / 2;

    ballPositionY = viewportHeight / 2;

    // Flip its X direction

    ballSpeedX = ballSpeedX * (-1);

  }

  //

  ////////////////////////

  //////////// Right Score Check ////////////

  //

  // If the ball moves past the left paddle...

  if (ballPositionX < leftPaddlePositionX)

  {

    // ...the right player scores a point

    rightScore = rightScore + 1;

    // Move the ball to the center of the canvas

    ballPositionX = viewportWidth / 2;

    ballPositionY = viewportHeight / 2;

    // Flip its X direction

    ballSpeedX = ballSpeedX * (-1); // Switch X direction

  }

  //

  ////////////////////////

  //////////// Print Scores ////////////

  //

  // Make the text big, bold, and center-aligned

  textSize(100);

  textStyle(BOLD);

  textAlign(CENTER, CENTER);

  // Print the left score one quarter of the way across the width

  text(leftScore, viewportWidth / 4, 80);

  // Print the right score three quarters of the way across

  text(rightScore, viewportWidth * 3 / 4, 80);

  //

  ////////////////////////

  //////////// Display Scene ////////////

  //

  // Draw the ball

  circle(ballPositionX, ballPositionY, ballRadius * 2);

  // Draw the left paddle

  rect(leftPaddlePositionX - paddleSizeX / 2,

       leftPaddlePositionY - paddleSizeY / 2,

       paddleSizeX,

       paddleSizeY);

  // Draw the right paddle

  rect(rightPaddlePositionX - paddleSizeX / 2,

       rightPaddlePositionY - paddleSizeY / 2,

       paddleSizeX,

       paddleSizeY);

  //

  ////////////////////////

}

​

​

function BallHitWall()

{

  if (ballPositionY - ballRadius <= 0)

}

​