Gravity BOuncing

rebond

by DupontTD

HTML

<div id="gravityB">
  G</div>
<div id="gravityBB">
  G</div>
<div id="gravityBBB">
  G</div>
<button id="anim">testAnim</button>
<button id="stop">Stop</button>
<div id="B"></div>

CSS

div,
button {
  display: block;
}

div {
  width: 40px;
  height: 40px;
  position: absolute;
  background: black;
  background-position: center;
  background-repeat: no-repeat;
  color: red;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
}

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

#gravityB {
  left: 120px;
  top: 0px;
}

#gravityBB {
  left: 200px;
  top: 0px;
}

#gravityBBB {
  left: 280px;
  top: 50px;
}

#B {
  border-top: 1px solid red;
  position: absolute;
  left: 0px;
  top: 150px;
  width: 100%;
}

.scaled {
  transition: transform 0.1s;
  background-color: transparent !important;
  width: 40px;
  height: 40px;
  transform: scale(2, 0.7);
  /* Equal to scaleX(2) scaleY(0.5) */
  transform-origin: bottom;
  background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif") !important;
  background-position: bottom;
  background: repeat;
  //background-size: cover;
  height: 60px;
  z-index : 1;
}

JavaScript

let frame = 0;
class AnimatedBloc {

  constructor(elt, {
    speed
  }) {

    this.elt = elt;

    // initial CSS

    this.init(speed);

  }

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



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

    if (this.elt) {

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

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

      this.height = height;
      console.log(this.height);
      this.width = width;

      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,
    bounce,
  }) {
    super(elt, {
      speed
    });

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

    this.boundary = at;
    this.bounce = bounce;
  }

  static construct(elt, {
    speed = 0,
    at = 150,
    bounce = 0.6,
  } = {}) {

    return new GravityBoundcingBloc(elt, {
      at,
      speed,
     ...