HTML5 Game - Rotate an object to always points to the mouse

Description

Rotate an object to always points to the mouse
Demo

<!doctype html>  
<html>  
 <head>  
  <meta charset="utf-8">  
  <title>Rotate to Mouse</title>  
 </head>  /*from w  ww  .j a  v a  2  s .  co m*/
 <body>  
  <canvas id="canvas" width="400" height="400"></canvas> 
  <script>  
        class Arrow {
            constructor() {
                this.x = 0;
                this.y = 0;
                this.rotation = 0;
            }

            draw(context) {
                context.save();
                context.translate(this.x, this.y);
                context.rotate(this.rotation);
                context.lineWidth = 2;
                context.beginPath();
                context.moveTo(30, 0);
                context.lineTo(-20, -25);
                context.moveTo(30, 0);
                context.lineTo(-20, 25);
                context.closePath();
                context.stroke();
                context.restore();
            }
        }
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,
      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);

    (function drawFrame () {  
          window.requestAnimationFrame(drawFrame, canvas);  
          context.clearRect(0, 0, canvas.width, canvas.height);  

     let   arrow = new Arrow();  

    arrow.x = canvas.width / 2;  
    arrow.y = canvas.height / 2;  
      
          let dx = mouse.x- arrow.x;
          let dy = mouse.y- arrow.y;  
      
          arrow.rotation = Math.atan2(dy, dx); //radians  
          arrow.draw(context);  
        }());  
      };  
      </script>  
     </body>  
    </html>
HTML5 Game - Rotate an object to always points to the mouse

Description

Demo

Related Topic
