???? ??? ??? ?? ?????. ??? Google ??? ???? ??? ????? ??? ? ?? ??? ??? ? ???? ???? ?? ??? ? ?? ??? ?? ???? ?????.

TL;DR
?? ? ??? ??? ?? ?? ???? ???? ??????.

HTML

??? ?????. ??:

• ???? ??? ?? #map(?? ??? ??).
• ??? ??? ??? #??? ????.
• ??? ??? ???? ?? #pegman ?? ?????.

<div>



<h2>
  
  
  CSS
</h2>

<p>Positioning everything is simple, as you can see in the source code above, but the most important part is the rotate property. This is dynamically updated using JavaScript:<br>
</p>

<pre class="brush:php;toolbar:false">#pegman {
  /* other styles */
  rotate: var(--r);
}

?? ?? ??? ????? ?? ???? ?? ???? ??? ??? ???????.

??????

??? ?? ?? ??? ????? ???? ??????. JavaScript ??:

• ??? ???? ?????.
• ???? ??? ??? ???? ???????.
• ? ?? UX? ?? ???? ?????? ?????.

const pegman = document.querySelector('#pegman');
let isDragging = false;
let initialX = 0;
let initialY = 0;
let inactivityTimeout;
let lastX = 0;
const timeout = 25;
const maxDegrees = 50;

// Event listeners
pegman.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);

? ??? ???? ?????.

onMouseDown

?? ??? ??? ???? isDragged ???? ???? ???? ?????.

const onMouseDown = (e) => {
  isDragging = true;
  initialX = e.clientX;
  initialY = e.clientY;
};

onMouseMove

??? ? ???? ???? ??? ?????. ??? ?????:

• ??? ?? ?? ??? ?????(???? ????? ??? ???? ??? ??? ??).
• ?? ?? --r? ???? ???? ???????.

const onMouseMove = (e) => {
  if (!isDragging) return;

  const dy = e.clientY - initialY;
  const dx = e.clientX - initialX;

  // Limit rotation range
  let rx = Math.max(-maxDegrees, Math.min(maxDegrees, dx - lastX));
  pegman.setAttribute('style', `--r: ${rx}deg`);

  // Animate Pegman's position
  pegman.animate({ translate: `${dx}px ${dy}px` }, {
    duration: 100,
    fill: 'forwards',
  });

  // Reset rotation after inactivity
  clearTimeout(inactivityTimeout);
  inactivityTimeout = setTimeout(() => {
    lastX = dx;
    pegman.setAttribute('style', `--r: 0deg`);
  }, timeout);
};

onMouseUp

???? ???? ???? Pegman? ??? ??????.

• ??? 0?? ??????.
• ???? ???? ?? ??? ?????.

const onMouseUp = () => {
  isDragging = false;

  // Reset rotation
  pegman.setAttribute('style', `--r: 0`);

  // Animate Pegman back to its original position
  pegman.animate({ translate: `0px 0px` }, {
    duration: 500,
    fill: 'forwards',
    easing: 'ease',
  });

  // Clear residual state
  inactivityTimeout = setTimeout(() => {
    lastX = 0;
  }, timeout);
};

?? ??

? ???? ??? ?????? ????? ??? ???? ??? ??? ??? ? ??? ?????. ?? ??:

• CSS ??? ?? ??(?: --r)? ???? ???? ???? ???? ???? ?? ? ? ????.
• ?? ??? ??? ?? ??? ???? ????? ??? ?????.
• ????? ????? ??? ??? ???? ?????.

CodePen? ???? ???? ???? ???? ??? ?????! ???

???...

???? ?? ??? ? ? ?? Google? ?? ?????? ???? ????.

• ??? ??
• ?? ??
• ??? ??

????? ? ?? ??? ??? ??? ?? ????? ?????!
??? ??: ??? ??? ??? Joulupukki?? ?? ??? ????? ???

? ??? Google ???? ???? ???? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!