JSFiddle - React, Tailwind, and code Playground

HTML

<!-- doing this one from scratch because i am NOT making the levels by changing the arrays like that -->
<!-- completely AI-less, because AI is for bums. I may be a bum, but I'm no bm. -->


<style>
    html,
    body,
    canvas {
        margin: 0px;
        padding: 0px;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
    }
</style>

<canvas id="screen" style="width: 100%; height: 100%" />


<script>
    const canvas = document.getElementById('screen');
    const context = canvas.getContext('2d');

    const WIDTH = 320, HALF_WIDTH = WIDTH / 2;
    const HEIGHT = 200, HALF_HEIGHT = HEIGHT / 2;

    const FPS = 60;
    const cycleDelay = Math.floor(1000 / FPS);
    var oldCycleTime = 0;
    var cycleCount = 0;
    var fpsRate = '...';

    const MAP_SIZE = 16; //how many tiles we have per map

    var map = [
        2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
        2, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1,
        2, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1,
        2, 2, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
        2, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1,
        2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1,
        2, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1,
        2, 0, 0, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1,
        2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2,
        2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2,
        2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2,
        2, 2, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2,
        2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2,
        2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2,
        2, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2,
        2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2,
    ]

    var mapOffsetX = canvas.width;
    var mapOffsetY = canvas.height;

    const WALLS = [];

    // load wall textures
    for (var filename = 0; filename < 3;...