var ball1;

​

function setup() {

  createCanvas(400, 400);

  player1 = new player(200, 300);

  ball1 = new ball(200, 280);

}

​

function draw() {

  background(220);

  noStroke();

  fill(100);

  rect(130, 0, 140, 20); // the goal area

  player1.body();

  player1.move();

  ball1.body();

  ball1.move();

  ball1.shoot();

​

}

​

​

​

class player {

  constructor(x, y) {

    this.x = x;

    this.y = y;

​

  }

  body() {

    noStroke();

    fill(50);

    circle(this.x, this.y, 20);

​

  }

  move() {

    if (keyIsDown(37)) {

      this.x -= 2;

    }

    if (keyIsDown(39)) {

      this.x += 2;

    }

    if (keyIsDown(38)) {

      this.y -= 2;

    }

    if (keyIsDown(40)) {

      this.y += 2;

    }

  }

}

class ball {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.isShot = false;

  }

  body() {

    noStroke();

    fill(100, 100, 200);

    circle(this.x, this.y, 10);

  }

  move() {

    if( this.isShot === false ){

      if (keyIsDown(37)) {

        this.x -= 2;

      }

      if (keyIsDown(39)) {

        this.x += 2;

      }

      if (keyIsDown(38)) {

        this.y -= 2;

      }

      if (keyIsDown(40)) {

        this.y += 2;

      }

    }

  }

  shoot() {

    let ballin = createVector(random(130, 270), 0);

    //console.log(ballin);

    if (keyIsDown(83) && this.isShot === false) {

      this.isShot = true;

      let d = dist(180, 0, this.x, this.y);

      console.log(d)

      for( let i = 0; i < 11; i++ ){

        this.x =  this.x - ( this.x - 180 ) / 10 ;

        this.y =  this.y - this.y / 10 ;

        this.body();

      }

      push();

      stroke('red');

      line(180, 0, this.x, this.y)

      pop();

    }else if( ( key === 'r' || key === 'R' ) && this.isShot === true ){

        this.x = player1.x;

        this.y = player1.y-20;

        this.isShot = false

    }

  }

}