JSFiddle - React, Tailwind, and code Playground

by Clint

HTML

<div id="result">
Try your cursor keys
</div>
<div id="box">

</div>

CSS

#box {
  position: fixed;
  width: 1rem;
  height: 1rem;
  top: 0px;
  left: 0px;
  background-color: DeepPink;
}

JavaScript

document.addEventListener('keydown', (e)=> {
	var speed = 1;
  if (e.shiftKey) speed = 10;
  
	switch (e.key) {
  	case "ArrowLeft":
    	update("Left");
      move(-1*speed, 0);
      break;
    case "ArrowRight":
    	update("Right");
      move(1*speed, 0);
      break;
    case "ArrowUp":
    	update("Up");
      move(0, -1*speed);
      break;
    case "ArrowDown":
    	update("Down");
      move(0, 1*speed);
      break;
   	default:
    	update("!?");
    }
})

function update(m) {
	document.getElementById('result').innerHTML = m;
}

function move(x, y) {
	const el = document.getElementById('box');
	el.style.left = (el.offsetLeft + x) +"px";
	el.style.top = (el.offsetTop + y) +"px";
}