JSFiddle - React, Tailwind, and code Playground

HTML

<div id="room">
</div>
<div id="hero_graphic">
</div>

CSS

body{ 
    margin: 0px;
    padding; 0px;
}
#room{
    position: absolute;
    background-color: #ccc;
    width: 300px;
    height: 250px;
}
#hero_graphic{
    position: absolute;
    background-color: #f00;
    width: 20px;
    height: 20px;
}

JavaScript

var hero={};
var room={};

startgame();

function startgame()
{
    room.w=300;
    room.h=250;
    hero.x=0;
    hero.speed_x=2;
    hero.y=0;
    hero.speed_y=2;
    hero.w=20;
    hero.h=20;
    hero.graphic=document.getElementById("hero_graphic");
    $("body").mousemove(catchMouse);

    setInterval(gameloop,25);
}
function catchMouse(event)
{
    hero.x=event.pageX;
    hero.y=event.pageY;
}
function gameloop()
{
	hero.graphic.style.left=hero.x+"px"; 
	hero.graphic.style.top=hero.y+"px"; 
    hero.x=hero.x+hero.speed_x;
    hero.y=hero.y+hero.speed_y;
    hero.speed_y=hero.speed_y+0.1;
    hero.speed_y=hero.speed_y * 0.99;
    
    if(hero.x<0)
    {
        hero.speed_x=Math.abs(hero.speed_x);
    }
    if(hero.x>(room.w-hero.w))
    {
        hero.speed_x=-Math.abs(hero.speed_x);
    }
    if(hero.y>(room.h-hero.h))
    {
        hero.speed_y=-hero.speed_y;
    }
}