JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

<canvas id="canvas" style="border: solid 5px black">
</canvas>

CSS

canvas{
  background:black;
}

JavaScript

(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();

function drawScore() {
      ctx.font = '16px Arial'
      ctx.fillStyle = 'green'
      ctx.fillText("Coins:" + coinsCollected, 8, 20)
    }

var canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d"),
  width = 500,
  height = 200,
  player = {
    x:  130,
    y: height - 100,
    width: 10,
    height: 8,
    speed: 3,
    velX: 0,
    velY: 0,
    jumping: false,
    grounded: false,
    matrix:[
  [0, 1, 1, 0, 0, 0, 1, 1, 0],
  [1, 1, 1, 1, 0, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1],
  [0, 1, 1, 1, 1, 1, 1, 1, 0],
  [0, 0, 1, 1, 1, 1, 1, 0, 0],
  [0, 0, 0, 1, 1, 1, 0, 0, 0],
  [0, 0, 0, 0, 1, 0, 0, 0, 0]
    
    ],

    
    
    
  },

flowey = {
matrix:[
[0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 1, 2, 2, 2, 1, 1, 1, 2, 2, 2, 1, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 2, 2, 1, 1, 3, 3, 3, 1, 1, 2, 2, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 3, 3, 1, 1, 1, 1, 1, 0, 0],
[0, 1, 2, 2, 2, 1, 3, 3, 3, 1, 3, 1, 3, 3, 3, 1, 2, 2, 2, 1, 0],
[1, 2, 2, 2, 2, 1, 3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 2, 2, 2, 2, 1],
[0, 1, 2, 2, 2, 1, 3, 3, 1, 3, 3, 3, 1, 3, 3, 1, 2, 2, 2, 1, 0],
[0, 0, 1, 1, 1, 2, 1, 3, 3, 1, 1, 1, 3, 3, 1, 2, 1, 1, 1, 0, 0],
[0, 0, 0, 1, 2, 2, 2, 1, 3, 3, 3, 3, 3, 1, 2, 2, 2, 1, 0, 0, 0],
[0, 0, 1, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 1, 0, 0],
[0, 0, 1, 2, 2, 2, 2, 2, 2, 1, 4, 1, 2, 2, 2, 2, 2, 2, 1, 0, 0],
[0, 0, 0, 1, 2, 2, 2, 1, 1, 1, 4, 4, 1, 1, 2, 2, 2, 1, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 4, 4, 1, 0, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 4, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0,...