JSFiddle - React, Tailwind, and code Playground

by Colin Soderstrom

HTML

<div id="sphere"></div>

CSS

#sphere {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background-color: red;
  position: absolute;
}

JavaScript

$(document).ready(function(){
  var speed = 10;
  var $sphere = $('#sphere');

  $(document).on('keydown', function(e){
    switch (e.which) {
      case 87: // W
        $sphere.css('top', '-='+speed+'px');
        break;
      case 65: // A
        $sphere.css('left', '-='+speed+'px');
        break;
      case 83: // S
        $sphere.css('top', '+='+speed+'px');
        break;
      case 68: // D
        $sphere.css('left', '+='+speed+'px');
        break;
    }
  });
});