ypos = 200

dx = 6;

dy = 4;

​

let photo;

​

function preload() {

  photo = loadImage("racket.jpeg");

  font = loadFont ("JetBrainsMono-ExtraBold.ttf")

}

​

// background

function setup(){

  createCanvas(450, 600);

  background(255);

  angleMode(DEGREES);

  colorMode(RGB, 255);

  rectMode(CENTER);

  noStroke();

  textFont(font);

  textSize(30);

}

​

//drawing the actual gradient background

function linearGradient(sX, sY, eX, eY, colorS, colorE){

  let gradient = drawingContext.createLinearGradient(

    sX, sY, eX, eY

  );

  gradient.addColorStop(0, colorS);

  gradient.addColorStop(1, colorE);

  drawingContext.fillStyle = gradient;

}

​

function draw() {

  //gradient background

  linearGradient(

    width/2-200, height/2-200, //Start point (sX, sY)

    width/2+200, height/2+200, //End point (eX, eY)

    color(30, 23, 166), //Start color

    color(255, 109, 31), //End color

  );

  rect(width/2, height/2, 450, 600, 0);

    //wall

    fill('white');

    rect(xpos,80,170,30);

​

      //tennis racket

    image(photo, mouseX,470,130,130);

  //tennis ball

      fill('yellow')

  ellipse(xpos,ypos,30,30);

  if (xpos>=width-20 || xpos==20||xpos>=image)

        {

      dx = -dx

    }

  if (ypos>=height-20|| ypos==20||ypos>=image)

    {

      dy = -dy

    }

  fill('white');

  text('TENNIS GAME',128,40);

  for (var i=0; i < 400; i+=20) {

     line(200,i,200,i+10);

  } 

  xpos = xpos +dx;

  ypos = ypos +dy;

}