Rebond : class

Animation : class

Pour obtenir un temps écoulé :

let startTime = new Date().getTime();

function main() {

 //pour avoir un temps de simu depuis le départ

   let currTime = new Date().getTime(),

       dt = ((currTime - startTime)/1000);

       

  update(dt);

  render();

  requestId = window.requestAnimationFrame(main);

}

temps quasi constant

function main() {

  let now = Date.now(),

    dt = (now - lastTime) / 1000.0;

       

  update(dt);

  render();

  lastTime = now;

  requestId = window.requestAnimationFrame(main);

}

on pourra écrire la classe suivante :

class Oxilo extends AnimatedBloc {

  constructor(elt, { speed }) {
    
    super(elt, {
      speed
    });
  }

  static construct(elt, { speed = 1 } = {}) {
    return new Oxilo(elt, { speed });
  }

  update(dt) {   
   this.x = Math.cos(2*Math.PI*(dt))*50;
   this.y = Math.sin(Math.PI*(dt))*50;
  }

}

animation : class

Élément de base

class AnimatedBloc {

  constructor(elt, {speed = 1} = {} ) {

    this.elt = elt;

    // initial CSS

    this.initPosition( speed );

  }

  initPosition( speed ) {

    if (this.elt) {

      const {

        left,

        top

      } = this.elt.getBoundingClientRect();

      // CSS

      this.cssX = left;

      this.cssY = top;

      this.x = 0;

      this.y = 0;

      

      this.speed = speed;

    }

  }

  render() {

    this.elt.style.cssText = `left:${this.x+this.cssX}px`;

    //ctx.drawImage(Resources.get(this.sprite), this.x, this.y);

  }

  

  update() {

    this.x = this.x + this.speed;

  }

}

Héritage

class BouncingBloc extends AnimatedBloc {

  constructor(elt, {speed = 3, at = 300 } = {} ) {

    super(elt, {speed});

    this.boundary = at;

  }

  update() {

    

    super.update();

    if (this.x >= this.boundary || this.x == 0) {

      this.speed *= -1;

      this.elt.classList.toggle("bouncing");

    }

  }

}

heritage : class