HTML5 Game - Calculate distance between mouse cursor and a point

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Following the mouse

Description

Calculate distance between mouse cursor and a point

Demo

ResultView the demo in separate window 

<!doctype html>  
   <html>  

 <body>  
  <canvas id="canvas" width="400" height="400"></canvas>  
  <script>  
  function captureMouse(element) {
  let mouse = {x: 0, y: 0, event: null},
      body_scrollLeft = document.body.scrollLeft,
      element_scrollLeft = document.documentElement.scrollLeft,
      body_scrollTop = document.body.scrollTop,
      element_scrollTop = document.documentElement.scrollTop,
      offsetLeft = element.offsetLeft,/*from  w  ww .ja  v a  2s .  co  m*/
      offsetTop = element.offsetTop;
  
  element.addEventListener('mousemove', function (event) {
    let x, y;
    
    if (event.pageX || event.pageY) {
      x = event.pageX;
      y = event.pageY;
    } else {
      x = event.clientX + body_scrollLeft + element_scrollLeft;
      y = event.clientY + body_scrollTop + element_scrollTop;
    }
    x -= offsetLeft;
    y -= offsetTop;
    
    mouse.x = x;
    mouse.y = y;
    mouse.event = event;
  }, false);
  
  return mouse;
}   
  window.onload = function () {  
    let canvas = document.getElementById('canvas'),  
        context = canvas.getContext('2d'),  
        mouse = captureMouse(canvas),  
        rect = {x: canvas.width / 2, y: canvas.height / 2};  
  
    (function drawFrame () {  
      window.requestAnimationFrame(drawFrame, canvas);  
      context.clearRect(0, 0, canvas.width, canvas.height);  
  
      let dx = rect.x - mouse.x,  
          dy = rect.y - mouse.y,  
          dist = Math.sqrt(dx * dx + dy * dy);  
  
      //draw square  
      context.fillStyle = "#000000";  
      context.fillRect(rect.x - 2, rect.y - 2, 4, 4);  
      //draw line  
      context.beginPath();  
      context.moveTo(rect.x, rect.y);  
      context.lineTo(mouse.x, mouse.y);  
      context.closePath();  
      context.stroke();  
  
      //log output of distance value
      console.log("distance: " + dist);  
    }());  
  };  
  </script>  
 </body>  
</html>

Related Topic