JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<title>terrain test</title>

<body onkeydown=keys(1,event) onkeyup=keys(0,event)>

JavaScript

var CANVAS_WIDTH=480, CANVAS_HEIGHT=320, FPS = 30;
var keydownleft=0, keydownright=0 ,keydownspace=0 ,keydownup=0 ,keydowndown=0;
//mathglobalizr: https://gist.github.com/2221488
(function(a,b){for(b in a=Object.getOwnPropertyNames(Math))this[a[b]]=Math[a[b]]})()
function keys(a,e){
	if(e.keyCode==37)keydownleft  = a
	if(e.keyCode==39)keydownright = a
	if(e.keyCode==32)keydownspace = a
	if(e.keyCode==38)keydownup    = a
	if(e.keyCode==40)keydowndown  = a
}
function collides(a,b){
return  a.x<b.x+b.width&&
		a.x+a.width>b.x&&
		a.y<b.y+b.height&&
		a.y+a.height>b.y
}
function terraincheck(a,b){
var pix = canvas.getImageData(a+15,b,1,1).data
return pix[1]<20
}
var playerimg = new Image
playerimg.src = 'images/playerr.png'
var levelimg = new Image
levelimg.src = 'images/level.png'
var player={
	x:50, y:270, width:30, height:62, yspeed:0
	,update: function(){
		if(keydownleft){
			player.y-=3
			if(!terraincheck(player.x-2,player.y+player.height)){player.x -= 2}
			if(!terraincheck(player.x-2,player.y+player.height)){player.x -= 2}
			playerimg.src = 'images/playerl.png'
		}
		if(keydownright){
			player.y-=3
			if(!terraincheck(player.x+2,player.y+player.height)){player.x += 2}
			if(!terraincheck(player.x+2,player.y+player.height)){player.x += 2}
			playerimg.src = 'images/playerr.png'
		}
		if(keydownup&&terraincheck(player.x,player.y+player.height+5)&&!terraincheck(player.x+15,player.y)&&!terraincheck(player.x-15,player.y))player.yspeed=-6
		
		player.y += player.yspeed
		terraincheck(player.x,player.y+player.height)?player.yspeed=0:player.yspeed += 1;
		player.x = min(max(player.x,0),CANVAS_WIDTH-player.width)
		player.y = min(max(player.y,0),CANVAS_HEIGHT-player.height)
		canvas.drawImage(playerimg,player.x,player.y)
	}
}
        
function update(){
//clear the canvas
	canvas.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT)
    canvas.drawImage(levelimg,0,0)
    player.update()
    
}
var canvasElement =...