var xPos = 200;
var yPos = 200;

var radius = 10;

var xSpeed = 0;
var ySpeed = .1;
var gravity = 0.2;

var paddleX = 175;
var paddleY = 390;
var paddleSpeed = 0;

var paddleX2 = 175;
var paddleY2 = 10;
var paddleSpeed2 = 0;

function setup() {
  createCanvas(400, 400);
  xSpeed = random(-1, 1);
  ySpeed = 5;
}

function draw() {
  background(220);
  circle(xPos, yPos, 10);
  xPos = xPos + xSpeed;
  yPos = yPos + ySpeed;
  ySpeed += gravity;
  paddleX += paddleSpeed;
  paddleX2 += paddleSpeed2;
  if(collide()){
    console.log("collided");
    ySpeed = -ySpeed;
  }
  rect(paddleX, paddleY, 50, 10);
  rect(paddleX2, paddleY2, 50, 0);
}

function keyPressed(){
  if(keyCode ===LEFT_ARROW){
   console.log("left");
    paddleSpeed = -1;
  }
  if(keyCode ===RIGHT_ARROW){
    console.log("right");
    paddleSpeed = 1;
  }
  if(key === A){
    console.log("left");
     paddleSpeed2 = -1;
  }
  if(key === D){
    cosole.log("right");
     paddleSpeed2 = 1;
}

function keyReleased(){
  paddleSpeed = 0;
  paddleSpeed2 = 0;
}

function collide(){
  if(xPos > paddleX && xPos < paddleX + 50 && yPos + radius > paddleY){
    return true;
  }
  return false;
}
function collide2(){
  ifcollide2(xPos > paddleX2 && xPos < paddleX2 + 50 && yPos + radius > paddleY2){
     return true;
     }
  return false;
}