JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<canvas id="canvas" width="600" height="600"></canvas>

<script type="text/javascript">
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")

document.body.style.overflow = "hidden"
document.body.style.backgroundColor = "black"

const blocksize = 50
var gg = []

var player_x = 450
var player_y = -100

const Block = function(x, y) {
this.x = x
this.y = y
}

const blocks = [
new Block(0, 0), new Block(50, 0), new Block(100, 0), new Block(0, 0), new Block(150, 0), new Block(200, 0), new Block(250, 0), new Block(300, 0), new Block(550, 0), new Block(550, 50), new Block(500, 0), new Block(500, 50), 
new Block(0, 500), new Block(50, 500), new Block(100, 500), new Block(150, 500), new Block(200, 500), new Block(250, 500), new Block(300, 500), new Block(350, 500), new Block(400, 500), new Block(450, 500), new Block(500, 500), new Block(550, 500), 
new Block(350, 300), new Block(400, 200) 
] 


function intersects(block, x1, y1, x2, y2) {
    var minX = x1;
    var maxX = x2;
    
    if (x1 > x2) {
        minX = x2;
        maxX = x1;
    }
    
    if (maxX > block.x + blocksize)
        maxX = block.x + blocksize;
    
    if (minX < block.x)
        minX = block.x;
    
    if (minX > maxX)
        return false;
    
    var minY = y1;
    var maxY = y2;
    
    var dx = x2 - x1;
    
    if (Math.abs(dx) > 0.0000001) {
        var a = (y2 - y1) / dx;
        var b = y1 - a * x1;
        minY = a * minX + b;
        maxY = a * maxX + b;
    }
    
    if (minY > maxY) {
        var tmp = maxY;
        maxY = minY;
        minY = tmp;
    }
    
    if (maxY > block.y + blocksize)
        maxY = block.y + blocksize;
    
    if (minY < block.y)
        minY = block.y;
    
    if (minY > maxY)
        return false;
    
    return true;

}

function inside(block, x, y) {
	return block.x <= x && block.y <= y && (block.x + blocksize) >= x && (block.y + blocksize) >= y;
}

const width = 600;
const height = 600;
const imageData =...