JSFiddle - React, Tailwind, and code Playground

by Kriem

HTML

<div id="game"></div>
<h1></h1>

CSS

#game
{
    background: #ececec;
    border: 2px solid #222;
    width: 200px;
    height: 100px;
    position: relative;
}

#ball
{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #222;
    position: absolute;
}

JavaScript

var objects = [];

function Ball(){
 
    this.position = { x:10, y:20 };
    this.speed = { x:0.1, y:0.2 };
    
    objects.push(this);
    
    $('#game').append('<div id="ball"></div>');
    
    this.update = function(){
        
        this.position.x += this.speed.x;
        this.position.y += this.speed.y;
    }
    
    this.draw = function(){
        
        $('#ball').css({
           
            'transform': 
                'translate('+this.position.x+'px,'+this.position.y+'px)'
        });
    }
}

var ball = new Ball();

(function animloop(){
    
    requestAnimationFrame(animloop);
    render();
})();

function render(){
 
    for (var i=0; i<objects.length; i++){

        objects[i].update();
    }
    
    for (var i=0; i<objects.length; i++){

        objects[i].draw();
    }
}