JSFiddle - React, Tailwind, and code Playground

by Hensixteen

HTML

<canvas id="canvas" width="500" height="500" style="border:1px solid black"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var squareLength = 25;
var x = ((canvas.width/2)-(squareLength/2));
var y = ((canvas.height/2)-(squareLength/2));
var fallSpeed = 0;
var input;
var releasedKey;
var jump = false;
var inAir = true;
var keyReleased = false;
var horSpeed = 0;
var maxSpeed = 2;
var minSpeed = -2;
var position = (canvas.width/2);
var positionChange = 0;
var scrollRight = false;
var scrollLeft = false;
var objects = 0;
var objectNumber = 0;
var objectCounter = 1;

var playerBottom = (y+squareLength);
var playerTop = y;
var playerLeft = x;
var playerRight = (x+squareLength);

var objectLeft = [];
var objectRight = [];
var objectTop = [];
var objectBottom = [];

ctx.fillStyle="#0000ff";
ctx.beginPath();
ctx.fillRect(x, y, squareLength, squareLength);
ctx.fill();
ctx.stroke();
ctx.fillStyle="#000000"

window.addEventListener("keydown", function() {interact()});
function interact() {
	if(event.keyCode == 38) {
  	jump = true;
  }
	else{
		input = event.keyCode;
  }
}

window.addEventListener("keyup", function() {release()});
function release() {
	releasedKey = event.keyCode;
  if(releasedKey == input) {
  	keyReleased = true;
  }
}

setInterval(function() {

	//refSpeed = horSpeed;
  
  playerBottom = (y+squareLength);
  playerTop = y;
  playerLeft = x;
  playerRight = (x+squareLength);

	if(playerBottom >= 500) {
  		y = (500-squareLength);
    	inAir = false;
  }
  
  if(playerRight>=333) {
  	scrollRight = true;
    scrollLeft = false;
  }
  
  if(playerLeft<=100) {
  	scrollLeft = true;
    scrollRight = false;
  }
  
 	if(input == 39 && scrollRight == false) {
  	horSpeed+=0.1;
    scrollLeft = false;
  }
  else if(input == 37 && scrollLeft == false) {
  	horSpeed-=0.1;
    scrollRight = false;
  }
  else {
  	if((input!=39 && input!=37) && (scrollLeft == false && scrollRight == false)) {
    	if(horSpeed > -0.2 && horSpeed < 0.2) {
      	horSpeed = 0;
      }
  		else if(horSpeed<0) {
 ...