JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<p id = "rendering"></p>
<p id = "y"></p>
<p id = "x"></p>
<canvas id = "canvas" width = "480" height = "360"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let rendering = 0;
let obsticalsType = [];
let obsticalsX = [];
let obsticalsY = [];
let x = 0;
let y = 0;
let playerX = 170;
let playerY = 170;
let rightPressed = false;
let leftPressed = false;
let upPressed = false;
let downPressed = false;
let background = new Image();
let ednaMode = new Image();
let bobsBoss = new Image();
let trump = new Image();
let money = new Image();
money.src = "https://dumielauxepices.net/sites/default/files/coin-clipart-transparent-background-897417-1120160.png";
trump.src = "https://clipart.info/images/ccovers/1495816049surprised-face-trump-png-transparent-clip-art.png";
bobsBoss.src = "http://www.stickpng.com/assets/thumbs/5a0c3f455a997e1c2cea115b.png"
ednaMode.src = "https://vignette.wikia.nocookie.net/pixar/images/8/8b/I2_-_Edna.png/revision/latest?cb=20180621022628";
background.src = "http://www.wsicuttingedgeedesign.com/wp-content/uploads/green-background-grama-textura-green-verde-background-pattern.jpg";
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);  
function keyDownHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = true;
    }
    else if(e.keyCode == 37) {
        leftPressed = true;
    }
    if (e.keyCode == 40) {
    	upPressed = true;
    } else if (e.keyCode == 38) {
    	downPressed = true;
    }
}
function keyUpHandler(e) {
    if(e.keyCode == 39) {
        rightPressed = false;
    }
    else if(e.keyCode == 37) {
        leftPressed = false;
    } 
    if (e.keyCode == 40) {
    	upPressed = false;
    } else if (e.keyCode == 38) {
    	downPressed = false;
    }
}
function createObsticals() {
	for (let i = 0; i < 60; i++) {
  	for (let g = 0; g < 60; g++) {
    	obsticalsType.push(2);
 ...