var canvas, ctx;

window.onload= init;

​

// une balle

var b1 = new Balle(50, 40, 30);

var tableauDesBalles = [];

​

// Objet singleton

// syntaxe à base de "propriétés", avec des :

// et des virgules

var monstre = {

  x:100,

  y:100,

  angle:0,

  speedX:0,

  speedY:0,

  couleur: 'black',

  l:50,

  h:50,

  resetPosition: function() {

    this.x = 0;

    this.y = 0;

  },

  draw: function (ctx, x, y) {

    // BONNE PRATIQUE : toute fonction qui change

    // quelque chose au contexte (couleur, repere

    // épaisseur du trait, ombre, etc.), doit "sauver"

    // le contexte au début et le restaurer à la fin

    // corps noir

    ctx.save();

    // On va pouvoir déplacer le repère

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

    ctx.rotate(this.angle);

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

    //console.log(this.couleur)

    ctx.fillStyle = this.couleur;

    ctx.fillRect(0, 0,

                 this.l, this.h);

​

    // oeil gauche

    ctx.fillStyle = "white";

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

    // oeil droit

    ctx.fillRect(35, 5, 10, 10);

    // nez rouge

    ctx.fillStyle = "red";

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

    // on restaure

    ctx.restore();

  },

  changeCouleur: function() {

    // attention au this ici !

    // si cette fonction est appelée

    // par setInterval, alors "this"

    // est le browser/la window,

    // pas le monstre. Donc on met

    // le monstre ici

    if (monstre.couleur === "black") {

      monstre.couleur = "green";

      //console.log("green")

    } else {

      monstre.couleur = "black";

      //console.log("black")

    }

  },

  move: function() {

    this.x += this.speedX;

    this.y += this.speedY;

  }

}

​

// window.addEventListener("load, init);

function init() {

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

​

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

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

  creeDesBalles(10);

​

  setInterval(monstre.changeCouleur, 1000);

  requestAnimationFrame(mainloop);

}

​

function dessineMonstre(m) {

  ctx.fillRect(m.x, m.y,

              m.l, m.h);

}

​

​

function mainloop(time) {

  // 1 On efface le canvas

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

  // 2 On dessine le rectangle

  //dessineMonstre(monstre);

  monstre.draw(ctx);

  //b1.draw(ctx);

  dessineLesBalles();

  // 3 on le déplace

  monstre.angle += 0.01;

  monstre.move();

  // 4 on rapelle la boucle

  requestAnimationFrame(mainloop);

}

​

// Autre manière de faire des objets

// pseudo classe 

// convention : on la nomme avec une majuscule

function Balle(x, y, rayon) {

  this.x = x || 10;

  this.y = y || 10;

  this.r = rayon || 30;

  this.draw = function(ctx) {

    // car les arcs de cercles sont toujours

    // dans un chemin, on remet à zero le

    // chemin pour ne pas connecter les

    // cercles

    ctx.beginPath();

    ctx.arc(this.x, this.y, this.r, 

           0, 2 * Math.PI);

    ctx.fill();

    // ctx.stroke(); // fil de fer

  }

}

​

function creeDesBalles(n) {

  for(var i = 0; i < n; i++) {

    var x = Math.random()*canvas.width;

    var y = Math.random()*canvas.height;

    var r = 3+ Math.random() * 10;

    var b = new Balle(x, y, r);

    tableauDesBalles.push(b);

  }

}

​

function dessineLesBalles() {

  for(var i = 0; i < tableauDesBalles.length; i++) {

    var b = tableauDesBalles[i];

    b.draw(ctx);

  }

}

​

// TROISIEME APPROCHE : on peut instancier

// mais y'a pas de this partout

// et on peut cacher des choses

// membres privés, api publice

function BalleBB(x1, y1, rayon1) {

  var x = x1 || 10;

  var y = y1 || 10;

  var r = rayon1 || 30;

  function draw(ctx) {

    // car les arcs de cercles sont toujours

    // dans un chemin, on remet à zero le

    // chemin pour ne pas connecter les

    // cercles

    ctx.beginPath();

    ctx.arc(x, y, r, 

           0, 2 * Math.PI);

    ctx.fill();

    // ctx.stroke(); // fil de fer

  }

  // DEFINITION DE l'API (interface)

  return {

    x: x,

    dessine:draw

  }

}

​

​

​

​