const canvas = document.getElementById("gameCanvas");
const context = canvas.getContext("2d");
const slimeWidth = 100;
const slimeHeight = 10;
const slimeSpeed = 2;
const ballSize = 40;
let slimeX = (canvas.width - slimeWidth) / 2;
let slimeY = canvas.height - slimeHeight / 2;
let leftArrowDown = false;
let rightArrowDown = false;
let spaceBarDown = false;

const jumpStrength = -5; // The strength of the jump
const gravity = 0.001; // The strength of the gravity effect
const slimeGravity = gravity; // The strength of the gravity effect on the slime

document.addEventListener("keydown", handleKeyDown);
document.addEventListener("keyup", handleKeyUp);

function handleKeyDown(event) {
  if (event.key === "ArrowLeft") {
    leftArrowDown = true;
  } else if (event.key === "ArrowRight") {
    rightArrowDown = true;
  } else if (event.key === " ") {
    spaceBarDown = true;
  }
}

function handleKeyUp(event) {
  if (event.key === "ArrowLeft") {
    leftArrowDown = false;
  } else if (event.key === "ArrowRight") {
    rightArrowDown = false;
  } else if (event.key === " ") {
    spaceBarDown = false;
  }
}

function moveSlimeLeft() {
  if (slimeX > 0) {
    slimeX -= slimeSpeed;
  }
}

function moveSlimeRight() {
  if (slimeX < canvas.width - slimeWidth) {
    slimeX += slimeSpeed;
  }
}

function updateSlime() {
  if (leftArrowDown) {
    moveSlimeLeft();
  } else if (rightArrowDown) {
    moveSlimeRight();
  }

  // Apply gravity to the slime
  slimeY += slimeGravity;

  // Check if the slime is on the ground
  if (slimeY > canvas.height - slimeHeight / 2) {
    // Keep the slime on the ground
    slimeY = canvas.height - slimeHeight / 2;

    // Make the slime jump if the space bar is down
    if (spaceBarDown) {
      slimeY += jumpStrength;
    }
  }
}

function drawSlime() {
  context.beginPath();
  context.arc(slimeX + slimeWidth / 2, slimeY, slimeWidth / 2, Math.PI,0, true);
  context.fillStyle = "green";
  context.fill();
  context.closePath();
}

let ballX = (canvas.width - ballSize) / 2;
let ballY = (canvas.height - ballSize) / 2;
let ballVx = Math.random()*0.1+0.1; // Horizontal velocity
let ballVy = -Math.random()*0.1-0.1; // Vertical velocity

function updateBall() {
   // Move ball by adding velocity to position
   ballX+=ballVx; 
   ballY+=ballVy; 

   // Apply gravity by adding it to vertical velocity
   ballVy+=gravity; 

   // Check if ball hits left or right wall
   if(ballX<0 || ballX>canvas.width-ballSize){
       // Reverse horizontal velocity
       ballVx=-ballVx; 
   }

   // Check if ball hits top wall
   if(ballY<0){
       // Reverse vertical velocity to move ball downward
       ballVy=-ballVy; 
   }

   // Check if ball hits slime
   let distX=Math.abs(ballX-slimeX-slimeWidth/2);
   let distY=Math.abs(ballY-slimeY);

   if(distX<=(slimeWidth/2+ballSize/2)){
       if(distY<=(slimeHeight/2+ballSize/2)){
           // Reverse vertical velocity to make ball bounce off of slime
           ballVy*=-1; 
           let angle=Math.atan2(ballY-slimeY,ballX-(slimeX+slimeWidth/2));
           let speed=Math.sqrt(ballVx*ballVx+ballVy*ballVy);
           ballVx=speed*Math.cos(angle);
           ballVy=speed*Math.sin(angle);
       }
   }

   // Check if ball falls below bottom edge
   if(ballY>canvas.height){
       // Reset game by placing ball at center
       ballX=(canvas.width-ballSize)/2;
       ballY=(canvas.height-ballSize)/2;
       // Reset velocities to initial values
       ballVx=Math.random()*0.1+0.1; 
       ballVy=-Math.random()*0.1-0.1; 
   }
}

function drawBall() {
    context.beginPath();
    context.arc(ballX,ballY,ballSize/2,0,Math.PI*2);
    context.fillStyle="red";
    context.fill();
    context.closePath();
}

const goalPostWidth = 10;
const goalPostHeight = 80;
const goalPostY = canvas.height - goalPostHeight;
const leftGoalPostX = 0;
const rightGoalPostX = canvas.width - goalPostWidth;

function drawGoalPosts() {
  context.beginPath();
  // Draw the left goal post
  context.rect(leftGoalPostX, goalPostY, goalPostWidth, goalPostHeight);
  // Draw the right goal post
  context.rect(rightGoalPostX, goalPostY, goalPostWidth, goalPostHeight);
  context.fillStyle = "white";
  context.fill();
  context.closePath();
}

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  updateSlime();
  updateBall();

  drawSlime();
  drawBall();
  drawGoalPosts();

  requestAnimationFrame(draw);
}

draw();
can you make it so my slime can jump and return to the ground higher