JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

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

CSS

canvas{
  background:skyblue;
}

JavaScript

(function () {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();
var coinsCollected = 0;
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 = 2000,
  height = 200,
  player = {
    x:  130,
    y: height - 100,
    width: 12,
    height: 16,
    speed: 3,
    velX: 0,
    velY: 0,
    jumping: false,
    grounded: false,
    matrix:[
    [0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0],
    [0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
    [0, 0, 2, 2, 2, 3, 3, 2, 3, 0, 0, 0],
    [0, 2, 3, 2, 3, 3, 3, 2, 3, 3, 3, 0],
    [0, 2, 3, 2, 2, 3, 3, 3, 2, 3, 3, 3],
    [0, 2, 2, 3, 3, 3, 3, 2, 2, 2, 2, 0],
    [0, 0, 0, 3, 3, 3, 3, 3, 3, 3, 0, 0],
    [0, 0, 2, 2, 1, 2, 2, 1, 0, 0, 0, 0],
    [0, 2, 2, 2, 1, 2, 2, 1, 2, 2, 2, 0],
    [2, 2, 2, 2, 1, 1, 1, 1, 2, 2, 2, 2],
    [3, 3, 2, 1, 3, 1, 1, 3, 1, 2, 3, 3],
    [3, 3, 3, 1, 1, 1, 1, 1, 1, 3, 3, 3],
    [3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3],
    [0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0],
    [0, 2, 2, 2, 0, 0, 0, 0, 2, 2, 2, 0],
    [2, 2, 2, 2, 0, 0, 0, 0, 2, 2, 2, 2]
    
    ],

    
    
    
  },
  lava = {
  
x:340,
y:100,
width:20,
height:20,
min:60,
max:140
  }
 var itemBox = {
  x:100,
  y:100,
  width:16,
  height:16,
  matrix:[
  [0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  [1, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2],
  [1, 3, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 3, 2],
  [1, 3, 3, 3, 3, 1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 2],
  [1, 3, 3, 3, 1, 1, 2, 2, 2, 1, 1, 3, 3, 3, 3, 2],
  [1, 3, 3, 3, 1, 1, 2, 3, 3, 1, 1, 2, 3, 3, 3, 2],
  [1, 3, 3, 3, 1, 1, 2, 3, 3, 1, 1, 2, 3, 3, 3, 2],
  []
  ]
  }
  
  keys = [],
  friction = 0.9,
  gravity = 0.20;

var boxes = [];
var coins =...