body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#game-area {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: black;
  background-image: url("https://i.imgur.com/biBD7p4.jpeg");
  background-repeat: no-repeat;

  background-position: center;
}

#character {
  position: absolute;
  width: 130px;
  height: 130px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background-image: url('https://i.imgur.com/CDXhYMe.gif');
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 0 0;
}

document.addEventListener('DOMContentLoaded', () => {
  const gameArea = document.getElementById('game-area');
  const character = document.getElementById('character');

  let isMoving = false;
  

  function moveCharacter(x, y) {
  const characterRect = character.getBoundingClientRect();
  const characterX = characterRect.left + characterRect.width / 2;
  const characterY = characterRect.top + characterRect.height / 2;

  const distance = Math.sqrt(Math.pow(x - characterX, 2) + Math.pow(y - characterY, 2));
  const speed = 2;
  const steps = distance / speed;

  const dx = (x - characterX) / steps;
  const dy = (y - characterY) / steps;

  // Update the target position and steps
  targetPosition.x = x;
  targetPosition.y = y;
  targetPosition.dx = dx; // Add dx to the targetPosition object
  targetPosition.dy = dy; // Add dy to the targetPosition object
  remainingSteps = steps;

  if (!isMoving) {
    isMoving = true;
    requestAnimationFrame(updatePosition);
  }
}

let remainingSteps = 0;
const targetPosition = { x: 0, y: 0 };

function updatePosition() {
  if (remainingSteps > 0) {
    character.style.left = `${character.offsetLeft + targetPosition.dx}px`;
    character.style.top = `${character.offsetTop + targetPosition.dy}px`;
    remainingSteps--;

    updateWalkingAnimation();
    requestAnimationFrame(updatePosition);
  } else {
    resetWalkingAnimation();
    isMoving = false;
  }
}


  gameArea.addEventListener('click', (event) => {
    const x = event.clientX;
    const y = event.clientY;

    moveCharacter(x, y);
  });

  let animationFrame = 0;
  const totalFrames = 4; // Change this to the number of frames in your sprite sheet

  function updateWalkingAnimation() {
    const frameWidth = 100 / totalFrames;
    const newBackgroundPosition = -(animationFrame * frameWidth) + '%';
    character.style.backgroundPosition = `${newBackgroundPosition} 0`;

    animationFrame = (animationFrame + 1) % totalFrames;
  }

  function resetWalkingAnimation() {
    character.style.backgroundPosition = '0 0';
    animationFrame = 0;
  }
});