window.addEventListener("load", init);

​

// window.onload = init;

/*

   window.onload = function() {

      ...

   }

*/

​

var canvas, ctx, w, h;

​

// objet singleton

var monstre = {

  x:100,

  y:10,

  v:0,

  angle: 0,

  color: "red",

  w: 100,

  h:100,

  move: function() {

    this.x += this.v;

  },

  draw: function(ctx) {

     // Bonne pratique : on sauve le contexte au début

     // on le restaure 

     ctx.save();

     // bonne pratique

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

     ctx.rotate(this.angle);

     // couleur en CSS3

     ctx.fillStyle = this.color;

     ctx.fillRect(0, 0, this.w, this.h);

​

    // yeux 

    ctx.fillStyle = "yellow";

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

    ctx.beginPath();

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

    ctx.fillStyle = "lightgreen";

    ctx.fill();    

    // nez

    // 

    // che

     ctx.restore();

  }

}

​

function init() {

  // appelée quand la page est chargée

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

  // On récupère le canvas avec l'API du DOM ou

  // la selector API (recommandée)

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

  // syntaxe : selecteur CSS3

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

  // On récupère le contexte graphique

  ctx = canvas.getContext("2d"); // autre possibilité webgl

  w = canvas.width;

  h = canvas.height;

  //drawSomething(r1);

  anime();

  //ctx.fillRect(0, 0, 20, 20)

  //ctx.strokeRect(150, 150, 50, 100);

  document.addEventListener("keydown", traiteToucheEnfoncee);

  document.addEventListener("keyup", traiteToucheRelachee);

​

}

​

// ECOUTEURS

function traiteToucheEnfoncee(evt) {

   console.log("touche enfoncee code = " + event.keyCode);

  switch(evt.keyCode) {

    case 39:

      // fleche à droite

      monstre.x += monstre.v;

      break;

    case 37:

      // fleche à gauche

      monstre.x -= monstre.v;

      break;

  }

}

​

function traiteToucheRelachee(evt) {

   console.log("touche relachee");

}

​

// BOUCLE D'ANIMATION

​

function anime(time) {

  // 1 - on efface le canvas

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

  // 2 - je dessine mes objets

    drawCercle(100, 100, 50, "blue");

​

  monstre.draw(ctx);

​

  // 3 - je regarde l'état du clavier, de la souris

  // de la manette de jeu, etc...

  // 4 - je teste les collisions, etc.

  if(((monstre.x + monstre.w) >= w) || (monstre.x <= 0)) {

    monstre.v = -monstre.v;

  } 

  // 5 - Je déplace les objets etc.

  monstre.move();

  // A LA FIN : je relance l'animation si possible

  // dans 1/60ème de seconde (16.6ms)

  requestAnimationFrame(anime);

}

​

function drawCercle(x, y, r, color) {

  ctx.save();

  ctx.translate(x, y);

  ctx.beginPath();

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

  ctx.fillStyle = color;

  ctx.fill();

  ctx.restore();

}