JSFiddle - React, Tailwind, and code Playground

HTML

<div id="player" style="left: 100px; top: 100px;"></div>

<!-- Что бы работало, надо перевести фокус в область с квадратиком -->
<!-- и потом жать на стрелки вверх вниз вправо влево -->

CSS

#player {
  position: absolute; 
  width: 10px;
  height: 10px;
  background-color: red;
}

JavaScript

var div = document.getElementById('player');

var keys = {};

document.addEventListener('keydown', function (e) {
	keys[e.keyCode] = true;
});
document.addEventListener('keyup', function (e) {
	keys[e.keyCode] = false; 
});

action();


function action () {

	setInterval(function () {

		if (keys[38]) {
			var top = parseInt((div.style.top).slice(0, -2));
			div.style.top = (--top) + "px";
		} 

		if (keys[39]) {
			var left = parseInt((div.style.left).slice(0, -2));
			div.style.left = (++left) + "px";
		} 

		if (keys[40]) {
			var top = parseInt((div.style.top).slice(0, -2));
			div.style.top = (++top) + "px";
		} 

		if (keys[37]) {
			var left = parseInt((div.style.left).slice(0, -2));
			div.style.left = (--left) + "px";
		}

	}, 50);

		


	
}