/* 

 * To change this template, choose Tools | Templates

 * and open the template in the editor.

 */

var canvas, ctx;

var angle = 0;

var monstreX = 200, monstreY = 270;

var mouse;

var vitesse = 1;

var audio;

var enColere = false;

window.addEventListener("load", init);

​

// window.onload = function() {.....}

​

function init() {

    canvas = document.getElementById("mycanvas");

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

​

    // ecouteur de click sur le bouton

    var b = document.querySelector("#anime");

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

        console.log("mouse doxn");

        vitesse = 10;

        audio.currentTime =0;

        audio.play();

        enColere = true;

    });

​

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

        vitesse = 1;

        enColere = false;

    });

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

        mouse = getMousePos(canvas, evt);

        console.log("mouse move " + mouse.x + " " + mouse.y);

    });

​

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

​

    drawMonstre(monstreX, monstreY, 150, 0);

​

    animeMonstre();

}

​

function animeMonstre() {

    if (mouse !== undefined) {

        // 1 On efface le canvas

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

        ctx.fillStyle = "rgba(255, 255, 255, 0.05)";

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

        // 2 On change des propriétés : position, angle,

        // vitesse, couleur, etc..

        var dx = mouse.x - monstreX;

        var dy = mouse.y - monstreY;

        angle = Math.atan2(dy, dx);

​

        // Pour déplacer le monstre vers la souris

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

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

​

        // 3 On le dessine 

        drawMonstre(monstreX, monstreY, 150, angle + 3 * Math.PI / 2);

    }

    requestAnimationFrame(animeMonstre);

}

​

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 drawMonstre(x, y, r, angle) {

    ctx.save();

​

    ctx.translate(x, y);

    ctx.rotate(angle);

    //ctx.scale(0.5, 0.5);

    // On annule la liste des ordres en attente

    ctx.fillStyle='black';

    ctx.beginPath();

    ctx.arc(0, 0, r, 0, Math.PI, true);

    ctx.closePath();

    ctx.fill();

​

    ctx.strokeStyle = 'red';

    ctx.lineWidth = 10;

    ctx.stroke();

​

    drawOeil(0, -90, 40);

​

drawBouche();

​

    ctx.restore();

}

​

function drawBouche() {

    ctx.save();

    //ctx.translate(x, y);

    ctx.lineWidth = 10;

    if(enColere) 

        ctx.strokeStyle = 'green';

    else

        ctx.strokeStyle = 'white';

    ctx.beginPath();

    ctx.moveTo(-50, -20);

    ctx.lineTo(-50, -40)

    ctx.lineTo(50, -20);

    ctx.lineTo(50, -40);

    ctx.stroke();

    ctx.restore();

}

function drawOeil(x, y, r) {

    ctx.save();

    ctx.translate(x, y);

    ctx.beginPath();

    ctx.fillStyle = "yellow";

    ctx.arc(0, 0, r, 0, 2 * Math.PI);

    ctx.closePath();

    ctx.fill();

​

    drawIris();

​

    ctx.restore();

}

​

function drawIris() {

    ctx.save();

​

    ctx.beginPath();

    ctx.fillStyle = "black";

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

    ctx.closePath();

    ctx.fill();

​

    ctx.restore();

}