JSFiddle - React, Tailwind, and code Playground

by DupontTD

HTML

<div id="oxilo">oxilo</div>
<button id="anim">testAnim</button>
<button id="stop">Stop</button>

CSS

div {
  padding: 10px;
}

#move {
  position: absolute;
  left: 120px;
  top: 100px;
  background: indianred;
  color: white
}

#repeat {
  position: absolute;
  left: 50px;
  top: 150px;
  background: crimson;
  color: white
}

#bouncing {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100px;
  top: 200px;
  background: blue;
  color: white;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.bouncing {
  font-size: 1em;
  border-radius: 50%;
  background-color: red;
}
#oxilo {
  position: absolute;
  left: 120px;
  top: 100px;
  background: indianred;
  color: red;
}

JavaScript

class AnimatedBloc {

  constructor(elt, {
    speed
  }) {

    this.elt = elt;

    // initial CSS

    this.initPosition(speed);

  }

  static construct(elt, {
    speed = 1
  } = {}) {
    console.log("construct element")
    return new AnimatedBloc(elt, {
      speed
    });
  }



  initPosition(speed) {
    //console.log("init");

    if (this.elt) {

      const {
        left,
        top
      } = this.elt.getBoundingClientRect();

      // mémorise pos de départ du CSS
      this.cssX = left;
      this.cssY = top;

      this.x = 0;
      this.y = 0;

      this.speedX = speed;
      this.speedY = 0;

    }

  }
  render() {
  
  console.log(this.y);
   // this.elt.style.cssText = `left:${this.x+this.cssX}px`;
    
     this.elt.style.cssText = `top:${this.y+this.cssY}px;left:${this.x+this.cssX}px`;
    //ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
  }
  update() {
    this.x += this.speedX;
    this.y += this.speedY;
  }

}

class BouncingBloc extends AnimatedBloc {

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

    this.boundary = at;
  }

  static construct(elt, {
    speed = 3,
    at = 300
  } = {}) {

    return new BouncingBloc(elt, {
      at,
      speed
    });
  }


  update() {

    super.update();

    if (this.x >= this.boundary || this.x == 0) {
      this.speed *= -1;
      this.elt.classList.toggle("bouncing");
    }


  }


}

class RepeatBloc extends AnimatedBloc {

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

    this.boundary = at;
  }

  static construct(elt, {
    speed = 1,
    at = 100
  } = {}) {

    return new RepeatBloc(elt, {
      at,
      speed
    });
  }




  update() {
    super.update();

    this.x = this.x % this.boundary;
  }

  // calcul surface

}

class Oxilo extends AnimatedBloc {

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

  static construct(elt, {
    speed = 1
  } = {}) {

   ...