p5.js Pong game - distance

Question

I am really sorry for this stupid question but i don't know what i should do.
I tried so many things nothing works.
I try to calculate the distance between playerx and the width of playerx.
Can someone just correct my code so i can understand it please try not to explain it.
var playerx = 0;
var z = 0;
var playery = 750;
var ball = {
x: 400,
y: 400,
speedx: 2,
speedy: 3,
};
function setup() {
createCanvas(800,800);}
function draw(){
background(0);
ball1();
player();
click();
wall();
bounce();
hit();
}
function hit(){
var AA = dist(playerx,playery,player.x + 200,playery)
var BB = dist(ball.x,ball.y,AA,).
if (BB <= 20){
ball.speedy = -7;
}
}
function ball1(){
fill(255);
rect(ball.x,ball.y,20,20);
}
function bounce(){
ball.x += ball.speedx;
ball.y += ball.speedy;
if (ball.x>800){
ball.speedx = -2;
}else if (ball.x<0){
ball.speedx = 3;
}else if (ball.y>800){
ball.speedy = -3;
} else if(ball.y<0){
ball.speedy = 2;
}
}
function player(){
fill(255);
rect(playerx,playery,200,20);
}
function click(){
if(keyCode === RIGHT_ARROW) {
playerx += z;
z = 3;
} else if (keyCode === LEFT_ARROW){
playerx += z;
z = -3;
}
}
function wall(){
if (playerx > 600){
playerx = 600;
} else if (playerx < 1){
playerx = 1;
}
}

Answer 1

check this library, it contains the code for collision detection:
https://github.com/bmoren/p5.collide2D
var playerx = 400;
var z = 0;
var playery = 750;
var ball = {
x: 400,
y: 400,
speedx: 2,
speedy: 3,
};
function setup() {
createCanvas(800, 800);
}
function draw() {
background(0);
ball1();
player();
click();
wall();
bounce();
hit();
}
function hit() {
if(checkCollision(playerx, playery, 200, 20, ball.x, ball.y, 20)){
ball.speedy = -7;
console.log("colliding");
}
}
function ball1() {
fill(255);
ellipse(ball.x, ball.y, 20, 20);
}
function bounce() {
ball.x += ball.speedx;
ball.y += ball.speedy;
if (ball.x > 800) {
ball.speedx = -2;
} else if (ball.x < 0) {
ball.speedx = 3;
} else if (ball.y > 800) {
ball.speedy = -3;
} else if (ball.y < 0) {
ball.speedy = 2;
}
}
function player() {
fill(255);
rect(playerx, playery, 200, 20);
}
function click() {
if (keyCode === RIGHT_ARROW) {
playerx += z;
z = 3;
} else if (keyCode === LEFT_ARROW) {
playerx += z;
z = -3;
}
}
function wall() {
if (playerx > 600) {
playerx = 600;
} else if (playerx < 1) {
playerx = 1;
}
}
function checkCollision(rx, ry, rw, rh, cx, cy, diameter) {
//2d
// temporary variables to set edges for testing
var testX = cx;
var testY = cy;
// which edge is closest?
if (cx < rx){ testX = rx // left edge
}else if (cx > rx+rw){ testX = rx+rw } // right edge
if (cy < ry){ testY = ry // top edge
}else if (cy > ry+rh){ testY = ry+rh } // bottom edge
// // get distance from closest edges
var distance = dist(cx,cy,testX,testY)
// if the distance is less than the radius, collision!
if (distance <= diameter/2) {
return true;
}
return false;
};