let ballimg

let ballX

let ballY

let gkx

let gkSpd

let playerwidth

let playerX

let playerY

let ballSpdX

let ballSpdY

​

​

function setup() {

  bg = loadImage('Footballf.PNG');

  createCanvas(500, 550);

  ballX = width / 5;

  ballY = height / 5;

  ballSpdX = 5

  ballSpdY = 5

  gkx = 200

  gkSpd = 1

  playerwidth = 30 

}

​

function draw() {

  background(bg);

  ball()

  field();

  ballMove();

  player();

  goal();

}

 //the white lines, not the bg image

function field() {

  fill(255)

  noStroke();

  rect(0, 0, width * 5 / 5, 16);

  rect(width * 3 / 5, 0, width * 3 / 5, 16);

  rect(0, 0, 24, height)

  rect(width - 15, 15, 30, height)

  rect(0, height - 10, width * 2 / 5, 10)

  rect(width * 3 / 5, height - 10, width * 2 / 5, 10);

  rect(20, height / 2, width, 10);

  noFill();

  stroke(255);

  strokeWeight(10);

  rect(width / 2.8, -150, 150, 200)

  rect(width / 2.8, 500, 150, 200)

  rect(gkx, 20, 30, 10)

}

​

function ball() {

 fill(0)

  circle(ballX, ballY, 10);

  ballX += ballSpdX;

  ballY += ballSpdY;

}

​

​

function ballMove() {

​

  //if the ball offside

  if (ballX > width || ballX <= 0) {

    ballSpdX = -ballSpdX

  }

  if (ballY > height || ballY <= 0) {

    ballSpdY = -ballSpdY

  }

​

  //if ball hit goalkeepers

  if (gkx > 250 || gkx < 120) {

    gkSpd = -gkSpd

  }

  gkx = gkx + gkSpd

​

  //if ball hit platyer

  if (ballX >= mouseX - 30 && ballX < mouseX + 30 && ballY >= mouseY - 10 && ballY <= mouseY + 20 ||

    ballX >= gkx - 30 && ballX < gkx + 30 && ballY >= 10 && ballY <= 40

  ) {

    ballSpdY = -ballSpdY

  }

}

​

 function player() {

  fill(0);

  noStroke();

  rect(playerX, playerY, playerwidth, 10);

  playerX = mouseX - playerwidth / 2

   playerY = mouseY

 }

​

 function goal() {

   if (ballX > width * 2 / 5 && ballX < width * 3 / 5 && ballY < 10) {

     fill(0);

     textSize(50);

     textAlign(CENTER);

     text('GOAL!!!!', width / 2, height / 2);

     text('GOAL!!!!', width / 2, height / 2);

     text('GOAL!!!!', width / 2, height / 2);

     text('GOAL!!!!', width / 2, height / 2);

     text('GOAL!!!!', width / 2, height / 2);

     text('GOAL!!!!', width / 2, height / 2);

     text('GOAL!!!!', width / 2, height / 2);

  }

}