JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

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

CSS

#game {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    /* display: flex;
    align-items: center;
    justify-content: center; */
}
#circle {
    position: absolute;
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 50%;
    transform: translate(370px,370px)
}

JavaScript

function moveCircle() {
	
    var circle = document.querySelector('#circle'),
    	time = 0;
        step = 100;
        
    circle.addEventListener('click',function(){
    	step -= 10
    })

	function update(){
    time++
	if(time % step === 0) {
        circle.style.transform = `translate(${Math.floor(Math.random() * 370)}px,${Math.floor(Math.random() * 370)}px)`
	}
    requestAnimationFrame(update)
    }
    update()
}
moveCircle()