JSFiddle - React, Tailwind, and code Playground

by DupontTD

HTML

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

CSS

div,
button {
  padding: 10px;
  display: block;
}

#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;
}

#gravity {
  width : 20px;
  height : 20px;
  position: absolute;
  left: 120px;
  top: 0px;
  background: black;
  color: red;
  border-radius: 50%;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

JavaScript

let frame = 0;
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(Math.ceil(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 GravityBloc extends AnimatedBloc {

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

    this.gravity = 0.1;
    this.gravitySpeed = 0;
  }

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

    return new GravityBloc( elt, speed );
  }


  update() {

    super.update();
    
     console.log(`Frame ${frame++} : y = ${this.y}, gravitySeed = ${this.gravitySpeed}`);
    this.gravitySpeed +=this.gravity;
    this.y += this.gravitySpeed;
   

  }

}


class GravityBoundcingBloc extends AnimatedBloc {

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

    this.boundary = at;

    this.gravity = 0.05;
    this.gravitySpeed = 0;
  }

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

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


  update() {

    super.update();
    
    this.gravitySpeed +=this.gravity;
    this.y += this.gravitySpeed;


  }


}


let players = [
 ...