​

let ballX = 220;

let ballY = 525;

let ballSpeedX = 1; 

let ballSpeedY = 0; 

let isJumping = false;

let jumpHeight = 100; 

let eyeColor = '#FFFFFF'; 

let pupilcolour = '#E4DDDD';

let x = random(width);

let y = random(height);

​

function setup() {

  createCanvas(600, 550);

}

​

​

function draw(){

  background(200);

// sky

  fill("#E5F7FA");

// gorund

  rect(0,0,599,450);

  fill("rgb(21,144,21)");

​

  rect(0,442,599,600);

  noStroke();

  fill("#C3ECF1")

// clouds

//   circle(70+x,70+y,50);

//   circle(90+x,60+y,50);

//   circle(110+x,55+y,50);

//   circle(130+x,70+y,50);

  circle(300,100,50);

  circle(320,90,50);

  circle(340,85,50);

  circle(360,100,50);

  //   Thumbs of both the hands

  fill('#E8BEAC')

  ellipse(263,255,8,20);

  ellipse(504,231,8,15);

//   bat

  fill('#C29C65')

  ellipse(157,266,10,25);

  // cylinder(20, 50);

  rect(160,255,180,22);

  quad(317,256,326,241,326,288,317,276);

  rect(326,241,250,46);

  ellipse(575,260,20,55)

  stroke('#D5B78B')

  strokeWeight(3);

  quad(327,234,326,241,575,243,573,234)

//   face 

  noStroke();

  fill('#252423')

  ellipse(390,200,100,110);

  ellipse(410,200,100,110);

  fill('#E8BEAC')

  ellipse(400,200,95,105);

  // print(mouseX+ ","+ mouseY);

//   halmet

  rect(389,245,25,40)

// hair and head

  fill('#252423')

  arc(400, 190, 100, 100, PI, 0);

//   hair

  stroke(50);

  strokeWeight(2);

  line(360,166,360,189);

  line(366,166,366,189);

  line(372,166,372,189);

  line(380,166,380,189);

  line(386,166,386,189);

  line(392,166,392,189);

  line(400,166,400,189);

  line(406,166,406,189);

  line(412,166,412,189);

  line(418,166,418,189);

  line(424,166,424,189);

  line(430,166,430,189);

  line(436,166,436,189);

  line(442,166,442,189);

  // eyes

  if (frameCount % 120 == 0) { 

    eyeColor = (eyeColor === '#FFFFFF') ? '#000000' : '#FFFFFF'; 

  }

  if (frameCount % 120 == 0) { 

​

    pupilcolour=(pupilcolour === '#E4DDDD') ? '#000000' : '#E4DDDDF'; 

  }

  fill(eyeColor);

  circle(377, 195, 15); 

  circle(422, 195, 15); 

  fill(pupilcolour); 

  circle(377, 195, 5); 

  circle(422, 195, 5); 

//   lips

  noStroke(197,55,80);

  fill('rgb(228,10,48)')

  arc(400,223,30,15,0,PI)

//   body

  // rect(348,270,110,150);

  quad(388,270,344,276,458,276,415,270);

  rect(350,276,105,120);

//   left arm

  quad(350,274,350,309,287,330,287,300);

  quad(287,300,287,330, 232,279,260,278);

//   right aarm

  quad(455,277,455,308,515,330,510,302);

  quad(505,302,512,286,534,286,515,331);

//   skirt

  fill('#721781')

  quad(350,396,350,506,455,506,455,396);

  // fill('black')

  // arc(350, 396, 50, 200, 0, PI + QUARTER_PI, CHORD);

  // arc(350, 396,50, 100,  0, PI + QUARTER_PI, PIE);

  ellipse(350, 450,30,110);

  ellipse(454, 450,30,110);

  // ellipse(403, 490,115,30);

  ellipse(403, 400,115,30);

  fill('#E8BEAC')

  quad(359,505,368,550,397,550,390,505);

  quad(415,505,415,550,444,550,445,505);

//   fingers

  quad(264,282,269,277,224,277,239,286);

  // ellipse(263,255,8,20);

  quad(262,245,251,254,253,261,262,253);

  ellipse(252,257,7,7);

  rect(244,246,7,20);

  ellipse(247.5,266,7,7);

  ellipse(247.5,245,7,7);

  quad(247,241,260,247,253,253,249,248);

  rect(236,248,7,20);

  ellipse(239.5,249,7,7);

  ellipse(239.5,269,7,7);

  rect(228,249,7,18);

  ellipse(231.5,251,7,7);

  ellipse(231.5,267,7,7);

  rect(220,251,6,15);

  ellipse(223,254,7,7);

  ellipse(223,264,7,7);

  // right hand fingers

  rect(532,228,6,15);

  ellipse(535,228,6,6);

  ellipse(535,242,6,6);

  rect(524,227,6,20);

  ellipse(527,229,7,7);

  ellipse(527,247,7,7);

  rect(516,224,6,25);

  ellipse(519,225,7,7);

  ellipse(519,247,7,7);

  rect(509,220,6,25);

  ellipse(512,223,7,7);

  ellipse(512,246,7,7);

  quad(221,259,221,249,248,249,248,241);

  quad(536,226,535,235,512,230,512,220);

 // Check if mouse is pressed

  if (mouseIsPressed && !isJumping) {

    isJumping = true;

    ballSpeedY = -5; 

  }

​

  // Move the ball

  ballX += ballSpeedX;

  ballY += ballSpeedY;

​

  // apply gravity if not jumping

  if (!mouseIsPressed && ballY < 525) {

    ballSpeedY += 0.5; 

  } else if (ballY >= 525) {

    ballY = 525; 

    ballSpeedY = 0;

    isJumping = false;

  }

​

  if (ballX + 25 >= width || ballX - 25 <= 0) { 

    ballSpeedX *= -1; 

  }

​

  // Ball

  fill('#FFEB3B');

  circle(constrain(ballX, 25, width - 25), ballY, 50); 

  fill('#E91E63');

  ellipse(constrain(ballX, 25, width - 25), ballY, 20, 50);

  ellipse(constrain(ballX, 25, width - 25), ballY, 50, 20);

}

​