Jump animation with requestAnimationFrame

entry.js

function update () {
  // draw methods
  requestAnimationFrame(update);
}

update()

window.onkeydown = function (e) {
  if (e.keyCode === 32) {
    if (!player.isJumping) {
      player.jump()
    }
  }
}

Player.js

class Player {
 
  constructor () {
    // ctx, positions, dimensions, isJumping, jumpSpeed, fallSpeed etc...
  }
  
  jumpUp () {
    this.isJumping = true
    this.position.y -= this.jumpSpeed
    this.jumpAnimationUp = requestAnimationFrame(this.jumpUp.bind(this)) // bind jumpUp to request animation frame
    if (this.position.y < this.ctx.canvas.clientHeight - this.dimension.height - this.jumpHeight) {
      // player is playerHeight + jumpHeight
      cancelAnimationFrame(this.jumpAnimationUp)
      this.jumpDown()
    }
  }

  jumpDown () {
    this.position.y += this.fallSpeed
    this.jumpAnimationDown = requestAnimationFrame(this.jumpDown.bind(this)) // bind jumpDown to request animation frame

    if (this.position.y + this.dimension.height > this.ctx.canvas.clientHeight -1) {
      // player is bottom of canvas
      this.isJumping = false
      cancelAnimationFrame(this.jumpAnimationDown)
    }
  }

  jump () {
    this.jumpUp()
  }
  
}

nice