JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div>
  <span></span>
</div>
<p>Use WASD to move</p>

CSS

div {
  border: 4px solid black;
  position: relative;
  height: 200px;
  width: 200px;
}

span {
  background: orangered;
  display: block;
  position: absolute;
  height: 50px;
  width: 50px;
  top: 75px;
  left: 75px;
}

p {
  width: 200px;
  text-align: center;
}

JavaScript

const pressedKeys = new Set();;
addEventListener("keydown", function(e) { pressedKeys.add(e.keyCode); });
addEventListener("keyup", function(e) { pressedKeys.delete(e.keyCode); });

const span = document.querySelector('span');

requestAnimationFrame(function update() {
  const moveVec = { x: 0, y: 0 };
  if (pressedKeys.has(87)) moveVec.y -= 1; // W
  if (pressedKeys.has(65)) moveVec.x -= 1; // A
  if (pressedKeys.has(83)) moveVec.y += 1; // S
  if (pressedKeys.has(68)) moveVec.x += 1; // D
  
  span.style.left = (moveVec.x * 75 + 75) + 'px';
  span.style.top = (moveVec.y * 75 + 75) + 'px';
  
  requestAnimationFrame(update);
});