JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id=c width=300 height=300></canvas>
<canvas id=c2 width=300 height=300></canvas>

<br>
<br>

CSS

canvas {
  border: 6px double #00ff00;
  position: absolute;
  top: 0px;
  left: 0px;
}

JavaScript

/* end of live coding live stream */

var ctx = c.getContext('2d');
var screen = 'splash';
var levelBGImg = new Image();
var carSprite = new Image();
var camx = -100;
var camy = -100;
var caroffsetx = 0;
var caroffsety = 0;
var carx = 0; // its x pos on map
var cary = 0; // its y pos on map
var carr = 0; // car angle in radians
var carwidth = 30;
var carheight = 50;
var carspeed = 0;
var topspeedf = 1;
var topspeedr = -0.8;
//
var mX = 0; // mouse X position 
var mY = 0; // mouse Y position
//
var mM = 0; // mouse distance from center of screen
var mR = 0; // mouse angle in radians
//
var screenContext = document.getElementById('c2').getContext('2d');
//
var kb = {
  l: 0,
  r: 0,
  u: 0,
  d: 0
};
//
var imageObj = {
  red: 255,
  green: 255,
  blue: 255
};

document.getElementById('c2').addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(document.getElementById('c2'), evt);
  mX = mousePos.x;
  mY = mousePos.y;
  mR = Math.atan2(150 - mY, 150 - mX) + Math.PI;
  a = 150 - mX;
  b = 150 - mY;
  mM = Math.sqrt(a * a + b * b);
  var PI = Math.PI;
  if ((mR < (PI - PI / 4)) && (mR > PI / 4)) {
    imageObj = {
      red: 25,
      green: 25,
      blue: 255
    };
  } else {
    imageObj = {
      red: 255,
      green: 255,
      blue: 255
    };


  }
  carr = ((mR - PI) / 10);
}, false);

function getMousePos(c2, evt) {
  var rect = document.getElementById('c2').getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}
window.onkeydown = function(e) {
  switch (e.keyCode) {
    case 81:
      kb.u = 1;
      e.preventDefault();
      break;
    case 65:
      kb.d = 1;
      e.preventDefault();
      break;
    case 37:
      kb.l = 1;
      e.preventDefault();
      break;
    case 39:
      kb.r = 1;
      e.preventDefault();
      break;
  }
};
window.onkeyup = function(e) {
  switch (e.keyCode) {
    case 81:
      kb.u = 0;
      e.preventDefault();
      break;
    case 65:
      kb.d =...