JSFiddle - React, Tailwind, and code Playground

by YewtreeStudio

HTML

<html>
    <head>
        <title>HW 11 JSON</title>
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
              <link rel="stylesheet" href="style.css" text="text/css">

    </head>

    <header>

<center><h1>Null</h1></center>
    </header>
    <body>
      <center><p>Move with <b> Arrow Keys</b> and interact with <b>Space.</b></p></center>
<center>
        <canvas id="myCanvas" width="480" height="320"></canvas>
</center>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');


html {

  background-color: white;
  background-position: center;
  position: relative;

}
body {
  width: auto;
  font-family: 'Open Sans', sans-serif;
  margin: auto;
  }

canvas {
  border: 1px solid black;
  background-color: cyan;
  background-image: url('image/bg.png');
  }

JavaScript

const SCALE = 1;
const WIDTH = 16;
const HEIGHT = 18;
const SCALED_WIDTH = SCALE * WIDTH;
const SCALED_HEIGHT = SCALE * HEIGHT;
const CYCLE_LOOP = [0, 1, 0, 2];
const FACING_DOWN = 0;
const FACING_UP = 1;
const FACING_LEFT = 2;
const FACING_RIGHT = 3;
const FRAME_LIMIT = 12;
const MOVEMENT_SPEED = 1;

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
let keyPresses = {};
let currentDirection = FACING_DOWN;
let currentLoopIndex = 0;
let frameCount = 0;
let positionX = 0;
let positionY = 0;
let img = new Image();
let shiba = new Image();
var collectArray = [{
  'name': 'rays',
  'type': 'image',
  'x': 420,
  'y': 250
}, {
  'name': 'doritos',
  'img': 'dorit.png',
  'x': 400,
  'y':20
}];
let collobj= ["image/dorit.png","image/rays.png"];
let uncollobj=[{}];
var defaultFill = "white";
var defaultStroke = "cyan";
var collect = function collect() {
  nav.innerHTML = 'SCORE : ' + score++;
  var selected = document.querySelectorAll('.selected');
  selected.forEach(function (collectable) {
    card.classList.add('collect');
  });
};
var count = 0;
var score = 1;

let walls=     [];
                walls.push({
                id: "wall1",
                 x: 105.3,
                 y: -1,
                 width: 14.1,
                 height: 73.5,
                });
                walls.push({
                id: "wall2",
                 x: 366.5,
                 y: -1,
                 width: 14.1,
                 height: 73.5,
                });
                walls.push({
                id: "wall3",
                 x: 367,
                 y: 173.2,
                 width: 120,
                 height: 14.1,
                });
                walls.push({
                id: "wall4",
                 x: -1,
                 y: 173.2,
                 width: 120,
                 height: 14.1,
                });
                walls.push({
                id: "wall5",
                 x: 105.3,
                 y: 267.5,
 ...