var canvas, ctx;

var largeurCanvas, hauteurCanvas;

var video, video2;

var audioBoing;

​

var CALME = 0, EN_COLERE = 1;

​

var monstre = {

  x:10, 

  y:10,

  largeur: 100,

  hauteur:100,

  etat : CALME,

  vitesseX : 0,

  vitesseY : 0,

  vitesseMax: 5

};

​

// état des touches qu'on surveille, de la souris, etc.

var inputStates = {};

​

window.addEventListener('load', init);

​

function init() {

  console.log("page chargée");

  // On récupère un pointeur sur la vidéo

  video = document.querySelector("#vid1");

  video2 = document.querySelector("#skin");

  // Le boing audio

  audioBoing = document.querySelector("#boing");

  // On va récupérer un pointeur sur l'élément canvas

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

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

  largeurCanvas = canvas.width;

  hauteurCanvas = canvas.height;

  // Pour le compteur d'images / s

  fpsContainer = document.createElement('div');

  fpsContainer.id="toto";

document.body.appendChild(fpsContainer); 

  // Ici on définit des écouteurs pour le clavier et la souris (manette jeu etc.)

  definitLesEcouteurs();

  // maintenant on peut dessiner !

  animeMonstre();

}

​

function definitLesEcouteurs() {

  // Ecouteur de clavier pour les touches enfoncées

  document.addEventListener('keydown', traiteToucheEnfoncee);

  // Pour les touches relachées

  document.addEventListener('keyup', traiteToucheRelachee);

  // La souris

  canvas.addEventListener('mousedown', traiteMouseDown);

  canvas.addEventListener('mouseup', traiteMouseUp);

  canvas.addEventListener('mousemove', traiteMouseMove);

}

​

function traiteMouseDown(evt) {

  console.log("souris cliquée bouton No : " + evt.button);

  inputStates.mouseDown = true;

  inputStates.button = evt.button;

}

function traiteMouseUp(evt) {

  console.log("souris bouton relachee");

    inputStates.mouseDown = false;

}

function traiteMouseMove(evt) {

  // On v devoir enlever la valeur de la position du 

  // canvas dans la page.

  var rect = canvas.getBoundingClientRect();

  inputStates.mouseX = evt.clientX - rect.left;

  inputStates.mouseY = evt.clientY - rect.top;

  //console.log(" du canvas = " + rect.top);

  //console.log("mouse move x = " + inputStates.mouseX + " y = " + inputStates.mouseY);

}

​

function traiteToucheEnfoncee(evt) {

  console.log("touche enfoncée code = " + evt.keyCode);

  switch(evt.keyCode) {

    case 39:

      // flèche droite

      inputStates.droite = true;

      break;

    case 37:

      // flèche gauche

      inputStates.gauche = true;

      break;

    case 38:

      // flèche haut

      inputStates.haut = true;

      break;

    case 40:

      // flèche bas

      inputStates.bas = true;

      break;

    case 32:

      // space

      inputStates.space = true;

      break;

  }

}

function traiteToucheRelachee(evt) {

    console.log("touche relachee code = " + evt.keyCode);

  switch(evt.keyCode) {

    case 39:

      // flèche droite

      inputStates.droite = false;

      break;

    case 37:

      // flèche gauche

      inputStates.gauche = false;

      break;

    case 38:

      // flèche haut

      inputStates.haut = false;

      break;

    case 40:

      // flèche bas

      inputStates.bas = false;

      break;

    case 32:

      // space

      inputStates.space = false;

      break;

  }

}

​

function animeMonstre(time) {

  // 0 - affichage du nombre d'images / s

  measureFPS(time);

  // 1 On efface le canvas

  //ctx.clearRect(0, 0, largeurCanvas, hauteurCanvas);

  // Pour du blur à la place

  //ctx.fillStyle='rgba(0, 255, 255, 0.1)'

  // ctx.fillRect(0, 0, largeurCanvas, hauteurCanvas);

  ctx.clearRect(0, 0, largeurCanvas, hauteurCanvas);

  // 2 On dessine 

  drawMonstre(monstre.x, monstre.y);

  // 2 et demie : on regarde l'état des entrées (clavier, etc)

  // pour déplacer le monstre...

  deplaceMonstre();

  // 3 On revien au 1, mais à 60 images/s,

  // on demande au browser de rappeler cette 

  // fonction

  requestAnimationFrame(animeMonstre);

}

​

function deplaceMonstre() {

  // on regarde l'état du clavier

  monstre.vitesseX = monstre.vitesseY = 0;

  if(inputStates.droite) {

    monstre.vitesseX = monstre.vitesseMax;

  }

  if(inputStates.gauche) {

    monstre.vitesseX = -monstre.vitesseMax;

  }

    if(inputStates.haut) {

    monstre.vitesseY = -monstre.vitesseMax;

  }

    if(inputStates.bas) {

    monstre.vitesseY = monstre.vitesseMax;

  }

  if(inputStates.space) {

    ctx.fillText("SPACE APPUYEE",10, 10);

  } 

  if(inputStates.mouseDown) {

    monstre.etat = EN_COLERE;

    monstre.x = inputStates.mouseX-monstre.largeur/2;

    monstre.y = inputStates.mouseY-monstre.hauteur/2;

  } else {

    monstre.etat = CALME;

  }

  // test si on touche à droite

  if((monstre.x + monstre.largeur) > largeurCanvas) {

     // je déclenche le son

     audioBoing.play();

    monstre.vitesseX = 0;

    monstre.x = largeurCanvas - monstre.largeur;

  }

   if(monstre.x < 0) {

     // je déclenche le son

     audioBoing.play();

    monstre.vitesseX = 0;

    monstre.x = 0;

  }

  monstre.x += monstre.vitesseX;

  monstre.y += monstre.vitesseY;

}

​

​

function drawMonstre(x, y) {

  ctx.save();

  ctx.translate(x, y);

  if(monstre.etat == CALME)

      ctx.fillStyle = 'green';

  if(monstre.etat == EN_COLERE)

      ctx.fillStyle = 'red';

  //ctx.drawImage(video, 0, 0, monstre.largeur, monstre.hauteur);

​

  ctx.fillRect(0, 0, monstre.largeur, monstre.hauteur);

​

  ctx.fillStyle = 'yellow';

  ctx.fillRect(20, 20, 10, 10);

  ctx.fillRect(70, 20, 10, 10);

  //ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';

  //ctx.fillRect(80, 80, 100, 120);

  drawNez();

  ctx.restore();

}

​

function drawNez() {

  ctx.save();

  //ctx.translate(20, 0);

  ctx.fillStyle= 'blue';

  ctx.fillRect(45, 50, 5, 30);

  if(monstre.etat == EN_COLERE)

    drawCercleVideo(48, 80, 30, 'green', true);

  if(monstre.etat == CALME)

    drawCercleVideo(48, 80, 10, 'green', true);

  ctx.restore();

}

​

function drawCercle(cx, cy, r, couleur, rempli) {

  ctx.save();

  // on démarre un nouveau chemin/path

  ctx.beginPath();

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

  if(rempli) {

    ctx.fillStyle = couleur;

    ctx.fill();

  } else {

    ctx.strokeStyle = couleur;

    ctx.stroke();

  }

  ctx.restore();

}

​

function drawCercleVideo(cx, cy, r, couleur) {

  ctx.save();

  // on démarre un nouveau chemin/path

  ctx.beginPath();

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

  ctx.clip();

  ctx.drawImage(video, 0, 0, 300, 300);

  ctx.restore();

  /*

  ctx.save();

   ctx.beginPath();

  ctx.arc(cx+100, cy, 20, 0, 2*Math.PI);

  ctx.clip();

  ctx.drawImage(video2, 0, 0, 300, 300);

 */

  ctx.restore();

}

​

// ------- Pour le compteur d'images/s

    // vars for counting frames/s, used by the measureFPS function

    var frameCount = 0;

    var lastTime;

    var fpsContainer;

    var fps; 

    var measureFPS = function(newTime){

         // test for the very first invocation

         if(lastTime === undefined) {

           lastTime = newTime; 

           return;

         }

        //calculate the difference between last & current frame

        var diffTime = newTime - lastTime; 

        if (diffTime >= 1000) {

            fps = frameCount;    

            frameCount = 0;

            lastTime = newTime;

        }

        //and display it in an element we appended to the 

        // document in the start() function

       fpsContainer.innerHTML = 'FPS: ' + fps; 

       frameCount++;

    };