var canvas, ctx, w, h;

var laVideo;

​

window.onload = function init() {

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

​

    // ici programme principal

    // 1 - on récupère le canvas, sa largeur et sa hauteur

    // en pixels

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

    w = canvas.width;

    h = canvas.height;

​

    // 2 - on récupère le contexte qui permet de dessiner

    // dans le canvas

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

​

    // 3 - on va pouvoir commencer à dessiner ou à animer...

    // coordonnées du coin en haut à gauche, largeur, hauteur

    // fillRect = dessiner un rectangle plein

    // strokeRect = dessiner un rectangle en fil de fer

    /*ctx.fillStyle = 'red';

    ctx.fillRect(100, 100, 200, 200);

​

    ctx.strokeStyle = 'rgba(12, 134, 25, 0.5)'; // valeurs possible = couleur CSS

                             // dégradé, image/texture...

    ctx.lineWidth = 5;       // largeur du trait

    ctx.strokeRect(210, 210, 100, 100);

​

    drawLine(0, 0, 400, 400, "pink", 20);

    ctx.strokeRect(300, 300, 50, 50);

​

    drawCirclePlein(200, 200, 100, "purple");

    //drawEllipsePleine(200, 200, 100, 50, "purple");

    */

​

    //drawGabrielMopolo(200, 200);

    //mopolo.move(100, 150);

    //mopolo.changeCouleur("yellow");

    //mopolo.draw();

    // la video

  laVideo = document.querySelector("#myVideo");

  //laVideo.play();

​

    anime();  

}

​

function drawLine(x1, y1, x2, y2, couleur, largeurTrait) {

    // bonne pratique : quand on change quelque chose

    // au contexte graphique, il faut 1) le sauvegarder au début

    // de la fonction et 2) le restaurer à la fin

    ctx.save();

​

    ctx.beginPath(); // on remet à zéro le "chemin courant"

​

    ctx.moveTo(x1, y1);

    ctx.lineTo(x2, y2);

​

    ctx.strokeStyle = couleur;

    ctx.lineWidth = largeurTrait;

    ctx.stroke();   // dessine le "chemin courant"

​

    ctx.restore();

}

​

function drawCirclePlein(xc, yc, rayon, couleur) {

    // bonne pratique : quand on change quelque chose

    // au contexte graphique, il faut 1) le sauvegarder au début

    // de la fonction et 2) le restaurer à la fin

    ctx.save();

​

    ctx.beginPath(); // on remet à zéro le "chemin courant"

    ctx.arc(xc, yc, rayon, 0, 2*Math.PI);

    ctx.fillStyle = couleur;

    ctx.fill(); // dessine le "chemin courant" en plein

​

    ctx.restore();

}

​

​

// Exo 1) écrire une fonction drawCercleFilDeFer(xc, yc,

// rayon, couleur, largeurtrait)

// 

// Exo 2) Faire Gabriel Mopolo dans une fonction 

// dessineGabrielMopolo();

// et

// dessineSergeMiranda();

​

function drawGabrielMopolo(x, y) {

    // bonne pratique !

    var scaleFactor = 0.25;

​

    ctx.save();

    ctx.scale(scaleFactor, scaleFactor);

​

    ctx.translate(-200, -220);

    ctx.translate(x*(1/scaleFactor), y*(1/scaleFactor));

​

    // visage

    ctx.fillStyle = "#660000";

    ctx.fillRect(100, 100, 200, 220);

    // cheveux

    drawCirclePlein(100, 100, 30, "black");

    drawCirclePlein(150, 80, 30, "black");

    drawCirclePlein(200, 80, 30, "black");

    drawCirclePlein(250, 80, 30, "black");

    drawCirclePlein(300, 100, 30, "black");

​

    // oeil gauche

    ctx.fillStyle = "white";

    ctx.fillRect(140, 150, 30, 30);

    ctx.fillStyle = "black";

    ctx.fillRect(155, 165, 15, 15);

​

    // oeil droit

    ctx.fillStyle = "white";

    ctx.fillRect(230, 150, 30, 30);

    ctx.fillStyle = "black";

    ctx.fillRect(235, 165, 15, 15);

    // sourcils

    drawLine(130, 125, 180, 125, '#black', 15);

    drawLine(220, 125, 270, 125, '#black', 15);

​

​

    // lunettes

    ctx.lineWidth = 5;

    ctx.strokeRect(125, 140, 60, 50);

    ctx.lineWidth = 5;

    ctx.strokeRect(215, 140, 60, 50);

    drawLine(185, 165, 215, 165, 'black', 5);

​

    // nez

    drawLine(200, 190, 200, 250, 'black', 25);

    drawLine(180, 225, 220, 225, 'black', 25);

    drawLine(160, 240, 240, 240, 'black', 25);

    // bouche

    ctx.fillStyle = "red"

    ctx.fillRect(130, 240, 140, 60);

    ctx.fillStyle = "white"

    ctx.fillRect(150, 260, 100, 30);

    // dents

    drawLine(150, 275, 250, 275, "black", 3);

    drawLine(170, 260, 170, 290, "black", 3);

    drawLine(190, 260, 190, 290, "black", 3);

    drawLine(210, 260, 210, 290, "black", 3);

    drawLine(230, 260, 230, 290, "black", 3);

​

    ctx.restore();

}

​

// ICI une version objet singleton de Gabriel Mopolo

var mopolo = {

  x:100,

  y:200,

  angle:0,

  vitesseX: 2,

  vitesseY: 3,

  w:100,

  h:100,

  scaleFactor:0.25,

  couleur:"#660000",

  draw: function drawGabrielMopolo() {

    // bonne pratique !

​

​

    ctx.save();

    ctx.scale(this.scaleFactor, this.scaleFactor);

​

    // on translate de -200,-220 car on a 

    // dessiné le rectangle du visage

    // en 200, 220, initialement.

    //Cette translation le remet en 0, 0

    ctx.translate(-200, -220);

    // Ensuite on le déplace de x, y

    // mais ont tient compte du fait qu'on

    // a changé le scale pour le rendre plus

    // petit

    ctx.translate(this.x*(1/this.scaleFactor), this.y*(1/this.scaleFactor));

​

    // Pour pouvoir le faire tourner autour

    // du centre du rectangle

    // rotation, par défaut le point de controle

    // est le coin en haut à gauche

    ctx.translate(200, 220);

    ctx.rotate(this.angle);

    ctx.translate(-200, -220);

​

    // visage

    ctx.fillStyle = this.couleur;

    ctx.fillRect(this.w, this.h, 200, 220);

    // cheveux

    drawCirclePlein(100, 100, 30, "black");

    drawCirclePlein(150, 80, 30, "black");

    drawCirclePlein(200, 80, 30, "black");

    drawCirclePlein(250, 80, 30, "black");

    drawCirclePlein(300, 100, 30, "black");

​

    // oeil gauche

    ctx.fillStyle = "white";

    ctx.fillRect(140, 150, 30, 30);

    ctx.fillStyle = "black";

    ctx.fillRect(155, 165, 15, 15);

​

    // oeil droit

    ctx.fillStyle = "white";

    ctx.fillRect(230, 150, 30, 30);

    ctx.fillStyle = "black";

    ctx.fillRect(235, 165, 15, 15);

    // sourcils

    drawLine(130, 125, 180, 125, '#black', 15);

    drawLine(220, 125, 270, 125, '#black', 15);

​

​

    // lunettes

    ctx.lineWidth = 5;

    ctx.strokeRect(125, 140, 60, 50);

    ctx.lineWidth = 5;

    ctx.strokeRect(215, 140, 60, 50);

    drawLine(185, 165, 215, 165, 'black', 5);

​

    // nez

    drawLine(200, 190, 200, 250, 'black', 25);

    drawLine(180, 225, 220, 225, 'black', 25);

    drawLine(160, 240, 240, 240, 'black', 25);

    // bouche

    ctx.fillStyle = "red"

    ctx.fillRect(130, 240, 140, 60);

    ctx.fillStyle = "white"

    ctx.fillRect(150, 260, 100, 30);

    // dents

    drawLine(150, 275, 250, 275, "black", 3);

    drawLine(170, 260, 170, 290, "black", 3);

    drawLine(190, 260, 190, 290, "black", 3);

    drawLine(210, 260, 210, 290, "black", 3);

    drawLine(230, 260, 230, 290, "black", 3);

    ctx.restore();

  },

  moveToPosition:function(x, y) {

    this.x = x;

    this.y = y;

  },

  deplaceToi: function() {

    this.x += this.vitesseX;

    this.y += this.vitesseY;

  },

  changeCouleur:function(color) {

    this.couleur = color;

  },

  getWidth: function() {

    return this.w*this.scaleFactor;

  },

  getHeight: function() {

    return this.h*this.scaleFactor;

  }

}

​

function anime() {

  // 1 - on efface le contenu du canvas

  ctx.clearRect(0, 0, w, h);

  // Je dessine la video

  //ctx.drawImage(laVideo, 0, 0, w, h);

  // 2 - on dessine Gabriel Mopolo

  mopolo.draw();

  // 3 - on va déplacer mopolo  

  // collisions avec murs gauche et droite

  gereCollisionsAvecMurs();

  mopolo.deplaceToi();

  mopolo.angle += 0.01;

  // 4 - On rappelle l'animation 60 fois par seconde

  requestAnimationFrame(anime);

}

​

function gereCollisionsAvecMurs() {

    if((mopolo.x+mopolo.getWidth() > w) || 

    (mopolo.x-mopolo.getWidth() < 0)) {

     // on touche le mur de droite ou de gauche

    mopolo.vitesseX = -mopolo.vitesseX;

  } 

  // collisions avec mur haut et bas

    if((mopolo.y+mopolo.getHeight() > h) || 

    (mopolo.y-mopolo.getHeight() < 0)) {

     // on touche le mur de droite ou de gauche

    mopolo.vitesseY = -mopolo.vitesseY;

  } 

​

}