JSFiddle - React, Tailwind, and code Playground
JavaScript
siteman = {
'settings':{'size' : 10, 'speed' : 5, 'time':new Date().getTime(), 'width':window.innerWidth, 'height':window.innerHeight},
'coord':{'x' : 0 + 20, 'y' : 0 + 20}, // plus siteman size
'direction':{
'current':{'x': 0.75 * Math.PI, 'y' : 1.75 * Math.PI, 'clock' : false, 'calc_x' : function(){ return siteman.coord.x + siteman.settings.speed}, 'calc_y' : function(){return siteman.coord.y}},
37:{'x': 0.75 * Math.PI, 'y' : 1.75 * Math.PI, 'clock' : true, 'calc_x' : function(){ return siteman.coord.x - siteman.settings.speed}, 'calc_y' : function(){return siteman.coord.y}},
38:{'x': 1.75 * Math.PI, 'y' : 0.75 * Math.PI, 'clock' : false, 'calc_x' : function(){ return siteman.coord.x}, 'calc_y' : function(){return siteman.coord.y - siteman.settings.speed}},
39:{'x': 0.75 * Math.PI, 'y' : 1.75 * Math.PI, 'clock' : false, 'calc_x' : function(){ return siteman.coord.x + siteman.settings.speed}, 'calc_y' : function(){return siteman.coord.y}},
40:{'x': 1.75 * Math.PI, 'y' : 0.75 * Math.PI, 'clock' : true, 'calc_x' : function(){ return siteman.coord.x}, 'calc_y' : function(){return siteman.coord.y + siteman.settings.speed}}
},
'ctx':document.body.appendChild((function(element){element.width=window.innerWidth; element.height=window.innerHeight; element.style.cssText='background:rbga(60, 40, 20, 1); position:absolute; top:0; z-index: 100000000;'; return element;})(document.createElement('canvas'))).getContext("2d"),
'h_ctx':new function(){this.chain = function(method, args){siteman.ctx[method].apply(siteman.ctx, args); return this;}},
'checkCollision':function(data){return data[0] == 128 && data[1] == 128 && data[2] == 128;}
};
siteman.ctx.fillStyle = "rgb(128, 128, 128)";
siteman.h_ctx.chain('beginPath').chain('fillRect', [0, 0, window.innerWidth, window.innerHeight]);
(function game_loop(){
siteman.coord = {'x':siteman.direction.current.calc_x(), 'y':siteman.direction.current.calc_y()};
...