​

    var canvas, ctx, angle=0, mousePos;

var xMonstre = 200, yMonstre = 200, vitesse = 1;

var audio;

​

  // on définit un écouteur pour l'événement "page chargée"

    window.addEventListener("load", init);

var button = document.querySelector("#boutonAnime");

button.addEventListener("click", anime);

​

​

​

​

 function init() {

   //canvas = document.getElementById("mycanvas");

   // canvas = $("#mycanvas");

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

​

   // On récupère un contexte graphique

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

   // Ecouteur de mouvement de la souris

   canvas.addEventListener("mousemove", function(evt) {

       mousePos = getMousePos(canvas, evt);

       //console.log("la souris a bougé " + mousePos.x + " " + mousePos.y);

​

    });

​

   // Ecouteur d'appui sur bouton souris, on augmente la vitesse de

   // déplacement du monstre

   canvas.addEventListener("mousedown", function(evt) {

      vitesse = 10;

      audio.play();

    });

   // Quand on relache le bouton on revient à la vitesse normale

    canvas.addEventListener("mouseup", function(evt) {

        vitesse = 1;

    });

​

   audio = document.querySelector("#audio");

   drawTete(200, 200, 100, 0.5);

}

​

function getMousePos(canvas, evt) {

            // get canvas position

            var obj = canvas;

            var top = 0;

            var left = 0;

            while (obj && obj.tagName != 'BODY') {

                top += obj.offsetTop;

                left += obj.offsetLeft;

                obj = obj.offsetParent;

            }

​

            // return relative mouse position

            var mouseX = evt.clientX - left + window.pageXOffset;

            var mouseY = evt.clientY - top + window.pageYOffset;

            return {

                x:mouseX,

                y:mouseY

            };

        }

​

function drawTete(x, y, rayon, angle) {

  ctx.save(); 

  ctx.translate(x, y);

  ctx.rotate(angle);

  //ctx.scale(0.5, 0.5);

   ctx.strokeStyle = 'red';

   ctx.lineWidth = 10;

  var angleDepart=0;

  var angleArrivee = 2*Math.PI;

  // Attention angles dans le sens des aiguilles d'une montre

  ctx.beginPath(); // on recommence un nouveau "chemin", une nouvelle liste de choses à dessiner

    ctx.arc(0, 0, rayon, angleDepart, angleArrivee);

  // Dessine tous les ordres en attentes

  ctx.fill();

  ctx.stroke();

  drawYeux(-50, -50);

  ctx.restore();

}

​

function drawYeux(x, y) {

  ctx.fillStyle = 'green';

  ctx.beginPath();

  ctx.arc(x, y,  20, 0, 2*Math.PI);

   ctx.fill();

  ctx.beginPath();

  ctx.fillStyle = 'yellow';

 ctx.arc(x, y,  10, 0, 2*Math.PI);

  ctx.fill();

  ctx.fillStyle = 'green';

  ctx.beginPath();

  ctx.arc(x+80, y,  20, 0, 2*Math.PI);

   ctx.fill();

  ctx.beginPath();

  ctx.fillStyle = 'yellow';

 ctx.arc(x+80, y,  10, 0, 2*Math.PI);

  ctx.fill(); 

}

​

​

function anime() {

  console.log("je suis dans la fonction anime()");

  // 1 on efface le contenu du canvas

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

  // 2 On change des valeurs de position, d'angle, de taille, etc des objets à dessiner

  // on calcule l'angle pour que ça regarde la souris

  var dx = mousePos.x - xMonstre;

  var dy = mousePos.y - yMonstre;

  angle = Math.atan2(dy, dx);

  // On se déplace vers la souris

  xMonstre += vitesse * Math.cos(angle);

  yMonstre += vitesse * Math.sin(angle);

  drawTete(xMonstre, yMonstre, 100, angle+Math.PI/2);

  requestAnimationFrame(anime);

}