JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c"></canvas>
<img id="dynoImg" style="display:none" src="https://qph.cf2.quoracdn.net/main-qimg-6cf7a60a02af7babbfec9187b0b6ba9e">
<script>
  var canvas = document.getElementById('c'), w = 600, h = 250
  canvas.width = w; canvas.height = h;
  var ctx = canvas.getContext('2d')
  ctx.line = function(x1, y1, x2, y2) {
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.stroke()
  }
  var Sprite = function(x, y, w, h, drawFn) {
    this.x = x; this.y = y; this.w = w; this.h = h; this.drawFn = drawFn;
    this.jumping = false; this.jumpTime = 0;
  }
  Sprite.prototype.getX = function() { return this.x }
  Sprite.prototype.getY = function() { return this.y + (this.jumping ? jumpDy(this.jumpTime) : 0) }
  function jumpDy(t) { return 50*t-9.8*t*t/2 }
  Sprite.prototype.draw = function(ctx, x, y, frame) {
    ctx.save()
    ctx.translate(this.getX()-x, y-this.h-this.getY())
    this.drawFn(ctx, this.w, this.h, frame)
    ctx.restore()
  }
  Sprite.prototype.move = function(dx) {
    this.x += dx
    if (this.jumping) {
      this.jumpTime += 0.5
      if (jumpDy(this.jumpTime) < 0) this.jumping = false
    }
  }
  Sprite.prototype.jump = function() {
    if (this.jumping) return
    this.jumping = true
    this.jumpTime = 0
  }
  Sprite.prototype.hits = function(other) {
    function between(v, min, max) {return min <= v && v <= max}
    return between(this.getX()+this.w/2, other.getX(), other.getX()+other.w) 
      && between(this.getY()+this.h/2, other.getY(), other.getY()+other.h)
  }
  function drawDyno(ctx, w, h, frame) {
    var img = document.getElementById('dynoImg')
    ctx.drawImage(img, w*(frame%6), 0, w, h, 0, 0, w, h)
  }
  function drawCactus(ctx, w, h, frame) {
    ctx.lineWidth = 12
    ctx.lineCap = 'round'
    ctx.line(w/2, 5, w/2, h)

    ctx.line(w/2, h*2/3, w/4, h*2/3)
    ctx.line(w/4, h*2/3, w/4, h/3)

    ctx.line(w/2, h/2, w*3/4, h/2)
    ctx.line(w*3/4, h/2, w*3/4, h/3)
  }

  var dynoW = 88, dynoH = 94
  var...