JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="e" width="500" height="500"></canvas>
<b id="s">0</b>

CSS

#e {
    border: 1px solid #aaa;
}

#s {
    position: absolute;
    left: 450px;
    top: 20px;
    font-size: 4em;
    color: red;
}

JavaScript

function draw(o,b,a) {
    document.getElementById("s").innerHTML = b;
    var ctx=document.getElementById("e").getContext("2d");
    ctx.clearRect (0,0,500,500);
    
    ctx.save();
    ctx.translate(250,250);
    
    //ball
    ctx.beginPath();
    ctx.arc(0,20*(b+1),5,0,2*Math.PI);
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.stroke();
    
    //maze
    ctx.rotate(-a);
    
    var r=30;
    o.forEach(function(e) {
        ctx.beginPath();
        var osize=8/r;
        ctx.arc(0,0,r,+e+osize+Math.PI/2,+e+2*Math.PI-osize+Math.PI/2);
        ctx.stroke();
        r+=20;
    });
    
    ctx.restore();
}

var status = [];

var o;

function f(i){with(Math)for(m=i.split('\n'),o=m.slice(1,t=+m[0]+1),m=m.slice(t+1),c=PI,p=2*c,r=0,s=1e-3;m.length;c%=p/*added for rendering =>*/,status.push([c,r])/*end*/)abs(c-o[r])<s?r++:abs(t=m[0])<s?m.shift(c+=t):(b=t<0?-s:s,c+=p-b,m[0]-=b);return r}


f("7\n0\n0.785398163\n3.14159265\n1.74532925\n4.71238898\n4.01425728\n0\n3\n-3.92699082\n3.14159265\n0.81245687");

function step(){
    var s=status.shift();
    draw(o,s[1],s[0]);
    status=status.slice(10);
    if (status.length) setTimeout(step,10);
}

setTimeout(step,10);