let aimX;

let aimY;

​

//varaible that changes the state once clicked and reach the time

let ballMove = false;

​

//instant mouse position when clicked

let mouseClickX;

let mouseClickY;

​

//this variable represent the goal sound

let song;

​

//variables from ball

let ball = {

  x:windowWidth/2,

  y:(3/4)*400,

  r:50,

  velX:1,

  velY:5,

};

​

//variables from goal

let gol = {

  x:(1/4)*400,

  y:10,

  w:200,

  h:100,

};

​

function setup() {

  //create canvas

  createCanvas(windowWidth, windowHeight);

}

​

//function that only works if I click the

function mousePressed(){

  //if the ball has the inicial position will turn the ballMoviment true and activates the sound

 if(ball.y == (3/4)*400 && ball.r == 50){

  ballMove = true

 }

//gets the instant clicked position of the mouse

 mouseClickX = aimX

 mouseClickY = aimY

}

​

//

function moveBall(){

  //if ballMove is true the ball will decrease on its y and radius values.

  if(ballMove){

    ball.y -= ball.velY;

    ball.r -= 0.5

    //depending on the position in the gol, the ball will float for each side.

    if(mouseClickX >> 200){

      ball.x += ball.velX

    } else if(mouseClickX << 200) {

      ball.x -= ball.velX

    } else {

      ball.x = 200 

    }

  }

  //if the ball reaches a limit, in this case reaches the aim height, the positions will reset and the ball moviment and the sound will be false.

  if(ball.y <= mouseClickY) {

    ball.y = (3/4)*400 

    ball.r = 50

    ball.x = 200

    ballMove = false

  }

  //let bool;

  //if(millis() >= timer * 1000){

    //timer++

  //}

  //if(timer % 10 === 0){

    //bool = 1

  //} else {

    //bool = 0

  //}

  //ballMove = boolean(bool)

  //console.log(bool);

}

​

// function to limit the aim inside the gol

function aimLim(){

  //aim left side

   if(aimX-25 <= gol.x){

      aimX = gol.x+25 

   }

  //aim top side

   if(aimY-25 <= gol.y){

      aimY = gol.y+25 

   }

  //aim right side 

   if(aimX+25/2 >= gol.x+gol.w){

      aimX = gol.x+gol.w-25/2

   }

  //aim bottom side

   if(aimY+25/2 >= gol.y+gol.h){

      aimY = gol.y+gol.h-25/2

   }

}

​

function draw() {

  background(0,255,0);

  //execute the move function

  moveBall();

  //declares the aim as the mouse, and refreshes constantly

  aimX = mouseX;

  aimY = mouseY;

  //executes the limit function

  aimLim();

  //draw gol

  fill(255,255,255);

  noStroke();

  rect(gol.x,gol.y,gol.w,gol.h);

  //draw post

  fill(0);

  rect(gol.x,gol.y,25/2,gol.h);

  rect(gol.x,gol.y,gol.w,25/2);

  rect(gol.x+gol.w,gol.y,25/2,gol.h);

  //draw ball

  fill(0,0,0);

  noStroke();

  ellipse(ball.x,ball.y,ball.r);

  //draw aim

  fill(255,0,0,80);

  noStroke();

  ellipse(aimX, aimY, 25);

}