Smooth keydown

by bc_rikko

HTML

<div class="container">
  <div class="box"></div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  
  position: relative;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  
  width: 50px;
  height: 50px;
  
  background-color: red;
}

JavaScript

const container = document.querySelector('.container');
const box = document.querySelector('.box');

let x = 0;
let y = 0;
let keydown = '';

document.body.addEventListener('keydown', e => {
  keydown = e.key;
});
document.body.addEventListener('keyup', e => {
  keydown = '';
});

const update = () => {
	switch (keydown) {
    case 'ArrowUp':
      x -= 10;
      box.style.top = `${x}px`;
      break;
    case 'ArrowDown':
      x += 10;
      box.style.top = `${x}px`;
      break;
    case 'ArrowLeft':
      y -= 10;
      box.style.left = `${y}px`;
      break;
    case 'ArrowRight':
      y += 10;
      box.style.left = `${y}px`;
      break;
  }
  
  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);