JSFiddle - React, Tailwind, and code Playground

by awesomespaceman

HTML

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

CSS

canvas{
  background:black;
}

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 = 500,
  height = 200,
  player = {
    x: width / 2,
    y: height - 100,
    width: 20,
    height: 20,
    speed: 3,
    velX: 0,
    velY: 0,
    jumping: false,
    grounded: false
  },
  lava = {
  
x:340,
y:100,
width:20,
height:20,
min:60,
max:140
  }
  var keys = [],
  friction = 0.8,
  gravity = 0.3;

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

var atk1 =[
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],

]


// dimensions
boxes.push({
  x: 0,
  y: 0,
  width: 10,
  height: height + 50
});

boxes.push({
  x: 0,
  y: height - 5,
  width: width,
  height: 50
});
boxes.push({
x:0,
y:-45,
width:width,
height:50
});
boxes.push({
x:350,
y:0,
width:10,
height:height
});
boxes.push({
  x: width - 10,
  y: 0,
  width: 50,
  height: height + 50
});
boxes.push({
x:350,
y:95,
width:150,
height:10
})






function update(){
canvas.width = width;
canvas.height = height;


  // check keys
  if (keys[38] || keys[32]) {
    // up arrow or space

     
      player.velY = -4;
    
  }
  if(keys[40]){
  player.velY = 4;
  }
  if (keys[39]) {
    // right arrow
    if...