JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="e1"></canvas>

JavaScript

(function(){
  var PI = Math.PI;
  var PI2 = PI * 2;
  var UNIT = 50;
  var PSIZE = 0.1 * UNIT;
  var PSIZEH = Math.round(PSIZE/2);
  var FOV = 60; // 30 left and right of bearing
  FOV = (FOV/180)*PI;
  var FOV_2 = FOV / 2;
  var DEGRAD = (1/180)*PI;

  var map = [
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
    0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
    0,1,1,1,0,0,0,0,1,0,0,0,0,0,0,
    0,1,1,1,1,0,1,1,1,0,0,0,0,0,0,
    0,1,1,0,0,0,1,0,1,0,0,0,0,0,0,
    0,1,1,1,1,1,1,1,1,0,0,0,0,0,0,
    0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
  ];
  var height = 7;
  var width = Math.round(map.length / 7);

  var px = 2.2;
  var py = 3;
  var ph = 0.2846 * PI; // pi, heading, right=0 (the direction you face). note: bearing is where you move to, right now it's the same.

  var canvas = document.querySelector('#e1');
  canvas.style.width = (canvas.width = width * UNIT) + 'px';
  canvas.style.height = (canvas.height = height * UNIT) + 'px';
  var ctx = canvas.getContext('2d');

  window.onkeydown = function(e){
    var c = e.keyCode;
    switch (c) {
      case 37: // left
        px -= 0.1;
        break;
      case 38: // up
        py -= 0.1;
        break;
      case 39: // right
        px += 0.1;
        break;
      case 40: // down
        py += 0.1;
        break;
      case 65: // a
        ph -= DEGRAD/2;
        break;
      case 68: // d
        ph += DEGRAD/2;
        break;
      default:
        console.log(c);
        return;
    }
    e.preventDefault();
  };

  window.requestAnimationFrame(paint);

  function paint() {
    ctx.clearRect(0, 0, width*UNIT, height*UNIT);
    var pxPosX = px * UNIT;
    var pxPosY = py * UNIT;

    // paint tiles
    for (var i = 0; i < map.length; ++i) {
      if (map[i]) {
        ctx.fillStyle = 'rgba(200, 200, 200, ' + (i % 2 ? .8 : 1) + ')';
      } else {
        ctx.fillStyle = 'rgba(0, 0, 0, ' + (i % 2 ? .8 : 1) + ')';
      }

      var x = i % width;
      var y = Math.floor(i / width);
      ctx.fillRect(x * UNIT, y * UNIT, UNIT, UNIT);
   ...