window.onload = init;

let canvas, ctx;

​

let fpsContainer;

​

function init() {

    fpsContainer = document.querySelector('#fps');

    fpsContainer.innerHTML = 'FPS:' + 0;

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

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

    let game = new Game(ctx);

    game.start(fpsContainer);

}

​

// Dans game.js

class Game {

     ctx;

     joueur;

    // Pour compter les FPS

    fpsContainer;

    frameCount=0;

    lastTime;

    fpsContainer;

    fps=0; 

​

    constructor(ctx) {

      this.ctx = ctx;

      this.joueur = new Joueur(10, 10);

    }

​

    measureFPS(newTime){

         // Pour la première invocation

         if(this.lastTime === undefined) {

           this.lastTime = newTime; 

           return;

         } 

        //temps écoulé depuis la dernière seconde écoulée

        const diffTime = newTime - this.lastTime; 

​

        if (diffTime >= 1000) {

            this.fps = this.frameCount;    

            this.frameCount = 0;

            this.lastTime = newTime;

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

            // document in the start() function

            this.fpsContainer.innerHTML = 'FPS: ' + this.fps; 

        }

​

       this.frameCount++;

    };

​

  drawAll() {

    this.joueur.draw(this.ctx);

  }

​

  updateAll() {

    this.joueur.move();

  }

​

  mainLoop(time) {

    this.measureFPS(time);

    // 1 - on efface le canvas

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

    // 2 - je dessine

    this.drawAll();

    // 3 - j'update les états

    this.updateAll();

    // call the animation loop every 1/60th of second

    requestAnimationFrame(this.mainLoop.bind(this));

  }

  start(fpsContainer) {

    this.fpsContainer = fpsContainer;

    requestAnimationFrame(this.mainLoop.bind(this));

  }

}

​

class Joueur {

  x;

  y;

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

  draw(ctx) {

    ctx.save();

    ctx.fillStyle = 'red'

    ctx.fillRect(this.x, this.y, 100, 100);

    ctx.restore();

  }

  move() {

    this.x+=0.1;

  }

}

/* Ici pour scheduler

let seconds=0;

​

function scheduler() {

  fpsContainer.innerHTML = seconds;

  seconds++;

  // ici faire des choses quand le temps écoulé est égal

  // à n secondes, ou toutes les n secondes avec un modulo

}

​

setInterval(scheduler, 1000);

​

*/

​

​

​