JSFiddle - React, Tailwind, and code Playground

CSS

body{ 
    margin: 0px;
    padding; 0px;
}

JavaScript

// global scope variables 
var game={};

var bal={};
var room={};
var hero={};
var mouse={};


// Dit zijn alles objecten in de game.
startgame(); // voer blokje code startgame uit.
// einde programma.
function createObject(name)
{
    game[name]={};
    game[name].x=0;
    game[name].y=0;
    game[name].w=0;
    game[name].h=0;
    game[name].dx=0;
    game[name].dy=0;
    game[name].img="";
    game[name].col="#f00";
}
function createOnPage(o)
{
    // create a div from an object
    o.g = document.createElement("DIV");
    document.body.appendChild(o.g);
    o.g.style.position="absolute";
    actuateChanges(o);
}
function actuateChanges(o)
{
    o.g.style.left=o.x+"px";
    o.g.style.top=o.y+"px";
    o.g.style.width=o.w+"px";
    o.g.style.height=o.h+"px";
    o.g.style.backgroundColor=o.col;
}
function bounceObjectInObject(o,r)
{
    if(o.x<r.x) 
    {
        o.dx=Math.abs(o.dx);
    }
    if(o.x>(r.w-o.w))
    {
        o.dx=-Math.abs(o.dx);
    }
    if(o.y<r.y) 
    {
        o.dy=Math.abs(o.dy);
    }
    if(o.y>(r.h-o.h))
    {
        o.dy=-Math.abs(o.dy);
    }
}
// blokje start game.
function startgame()
{
    // initieert waardes voor alle objecten
    // create mouse for reference, do not place on page.
    createObject("mouse");

    // create room and place in game
    createObject("room");
    game.room.w=300; // room width height
    game.room.h=250;
    game.room.col="#ccc";
    createOnPage(game.room);
    
    // create room and place in game
    createObject("hero");
    game.hero.w=50; // hero width height
    game.hero.h=20;
    game.hero.col="#f00";
    game.hero.x=room.w/2-hero.w/2; // hero begint in midden
    game.hero.y=room.h-hero.h; // hero begint onderaan.
    createOnPage(game.hero);
    
    createObject("bal");
    game.bal.w=20; // hero width height
    game.bal.h=20;
    bal.dx=2; // bal start met x-snelheid  2
    bal.dy=2; // bal start met x-snelheid  2
    game.bal.col="#f00";
    createOnPage(game.bal);
   
    // zet...