var canvas, ctx, width, height;

var ennemi = {x:140, y:140, l: 20, h:20, angle:0, v:2};

var mousePos = {x:0, y:0};

​

function init() {

  canvas = document.querySelector("#myCanvas");

  ctx = canvas.getContext('2d');

  width = canvas.width;

  height = canvas.height; 

  canvas.onmousemove = (event) => {

        getMousePos(event);

  }

  requestAnimationFrame(anime);

}

​

function anime() {

    // 1) On efface l'écran

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 2) On déplace la balle 

    var dx = ennemi.x - mousePos.x;

    var dy = ennemi.y - mousePos.y;

    ennemi.angle = Math.atan2(dy, dx);

    //ball.v = 0;

    ennemi.x -= ennemi.v*Math.cos(ennemi.angle);   

    ennemi.y -= ennemi.v*Math.sin(ennemi.angle); 

    // 3) On dessine la balle

    drawEnnemiQuiSuitSouris();

    // On demande une nouvelle frame d'animation

     window.requestAnimationFrame(anime);

}

​

​

function drawEnnemiQuiSuitSouris() {

  ctx.save();

  ctx.translate(ennemi.x, ennemi.y);

  ctx.rotate(ennemi.angle);

  // On recentre le point de rotation au milieu du rectangle

  ctx.translate(-ennemi.l/2, -ennemi.h/2);

  ctx.fillRect(0, 0, ennemi.l, ennemi.h);

  ctx.restore();

}

​

function getMousePos(event) {

        // on récupère la positon de la souris et on

        // la stocke dans une variable globale mousePos

        // adjust mouse position relative to the canvas

        var rect = event.target.getBoundingClientRect()

        mousePos.x = event.clientX - rect.left;

        mousePos.y = event.clientY - rect.top;

}