// Set up canvas and context
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Set up initial position and velocity for ball
let x = 50;
let y = 50;
let vx = 5;
let vy = 2;

// Set up constants for ball size and bounce
const ballRadius = 10;
const bounceFactor = 0.8;

// Set up drawing functions for ball and person
const drawBall = () => {
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.closePath();
}

const drawPerson = () => {
  // Draw the body of the person
  ctx.beginPath();
  ctx.moveTo(75, 250);
  ctx.lineTo(75, 75);
  ctx.lineTo(225, 75);
  ctx.lineTo(225, 250);
  ctx.stroke();

  // Draw the head of the person
  ctx.beginPath();
  ctx.arc(150, 50, 25, 0, Math.PI * 2);
  ctx.stroke();

  // Draw the arms of the person
  ctx.beginPath();
  ctx.moveTo(75, 100);
  ctx.lineTo(50, 150);
  ctx.moveTo(225, 100);
  ctx.lineTo(250, 150);
  ctx.stroke();
}

// Set up animation function
const animate = () => {
  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw the person and ball
  drawPerson();
  drawBall();

  // Update the position of the ball
  x += vx;
  y += vy;

  // Check if ball has hit the left or right wall
  if (x + vx > canvas.width - ballRadius || x + vx < ballRadius) {
    vx = -vx * bounceFactor;
  }

  // Check if ball has hit the top or bottom wall
  if (y + vy > canvas.height - ballRadius || y + vy < ballRadius) {
    vy = -vy * bounceFactor;
  }

  // Continue the animation
  requestAnimationFrame(animate);
}

// Start the animation
animate();