JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <tr>
        <td></td>
        <td id="up"></td>
        <td></td>
    </tr>
    <tr>
        <td id="left"></td>
        <td id="center"></td>
        <td id="right"></td>
    </tr>
    <tr>
        <td></td>
        <td id="down"></td>
        <td></td>
    </tr>
</table>
<a id="ball">●</a>

CSS

td {
    height:20px;
    width:20px;
}
#center {
    background-color:red;
}
#ball {
    position:absolute;
    font-size:3em;
}

JavaScript

var x = 0;
var y = 0;
var keysDown = [false, false, false, false];
$(document).keydown(function (e) {
    switch (e.keyCode) {
        case 37:
            keysDown[0] = true;
            break;
        case 38:
            keysDown[2] = true;
            break;
        case 39:
            keysDown[1] = true;
            break;
        case 40:
            keysDown[3] = true;
            break;
    }
});
$(document).keyup(function (e) {
    switch (e.keyCode) {
        case 37:
            keysDown[0] = false;
            $("#left").css("background-color", "#fff");
            break;

        case 38:
            keysDown[2] = false;
            $("#up").css("background-color", "#fff");
            break;

        case 39:
            keysDown[1] = false;
            $("#right").css("background-color", "#fff");
            break;

        case 40:
            keysDown[3] = false;
            $("#down").css("background-color", "#fff");
            break;

    }
});

function checkBallMoving()
{
    if (keysDown[0] === true) {
        $("#left").css("background-color", "red");
        x = x - 1;
        $("#ball").css("margin-left", x * 10);
    }
    if (keysDown[1] === true) {
        $("#right").css("background-color", "red");
        x = x + 1;
        $("#ball").css("margin-left", x * 10);
    }
    if (keysDown[2] === true) {
        $("#up").css("background-color", "red");
        y = y - 1;
        $("#ball").css("margin-top", y * 10);
    }
    if (keysDown[3] === true) {
        $("#down").css("background-color", "red");
        y = y + 1;
        $("#ball").css("margin-top", y * 10);
    }
}
setInterval(function () {
    checkBallMoving();
}, 100);