JSFiddle - React, Tailwind, and code Playground

by zequez

HTML

<div class="ball"></div>

CSS

.ball {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 50px;
    width: 50px;
    background: black;
    border-radius: 25px;
}

JavaScript

var ball = document.getElementsByClassName('ball')[0];
console.log(ball);

var y = 0;
var x = 0;
document.body.addEventListener('keypress', function(event) {
   console.log(event);
    
   if (event.charCode === 115) { // S
     y++;
   }
    
    console.log('Moviendo pelota!');
    ball.style.top = y + 'px';
    ball.style.left = x + 'px';
});