Java Script создание параллельных потоков

let allStones = []; 
let allBullets = []; 
 
function object(parent, use, x, y, dirx, diry) { 
    let id = 'obj_' + Math.random().toString(36).substring(2); 
    parent.innerHTML += `<use id="${id}" xlink:href="#${use}" />`; 
    return { 
        id, dirx, diry, x, y, t: Date.now(), 
        move: function(t) { 
            let dt = (t - this.t)/1000; // sec 
            this.t = t; 
            let x = this.x += dt*this.dirx; 
            let y = this.y += dt*this.diry; 
            let el = document.getElementById(id); 
            if (Math.abs(x) > 251 || Math.abs(y) > 251) 
                return el.remove(); 
            el.setAttribute('transform', `translate(${x},${y})`); 
            return true 
        } 
    } 
} 
 
let pt = svg.createSVGPoint(); 
 
function cursorPoint(e) { 
    pt.x = e.clientX;  
    pt.y = e.clientY; 
    return pt.matrixTransform(svg.getScreenCTM().inverse()); 
} 
 
addEventListener('mousemove', e => { 
    var p = cursorPoint(e); 
    player.setAttribute('transform', `translate(${p.x},${p.y})`); 
}) 
 
addEventListener('click', e => { 
    var p = cursorPoint(e); 
    allBullets.push(object(bullets, 'bullet',  
            p.x, p.y-15, Math.random()*20-10, -500)); 
}) 
 
requestAnimationFrame(drawFrame); 
 
function drawFrame() { 
    requestAnimationFrame(drawFrame); 
 
    if (Math.random()>0.99)  
        allStones.push(object(stones, 'stone',  
            Math.random()*500 - 250, -250, Math.random()*40-20, 100)); 
     
    let t = Date.now();   
    allStones = allStones.filter(s => s.move(t)); 
    allBullets = allBullets.filter(b => b.move(t)); 
 
    allBullets = allBullets.filter(b => { 
        let result = true; 
        allStones = allStones.filter(s => { 
            let dx = b.x-s.x; 
            let dy = b.y-s.y; 
            let res = dx*dx + dy*dy > 100; 
            if (!res) { 
                result = false; 
                document.getElementById(s.id).remove(); 
                score.innerHTML = +score.innerHTML + 1 
            } 
            return res; 
        }); 
        if (!result) 
             document.getElementById(b.id).remove(); 
        return result; 
    }); 
}

svg { 
  background: #000; 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100vw; 
  height: 100vh; 
  cursor: none; 
  user-select:none; 
}

<svg id=svg viewbox="-250,-250,500,500"> 
    <defs> 
      <circle id="bullet" r=3 fill="wheat" /> 
      <circle id="stone" r=10 fill="gray" /> 
    </defs> 
    <text id=score y=-235 fill=white text-align="middle">0</text> 
    <g id=game> 
        <g id=player transform=translate(250,450)> 
            <path d="M-10,0l9,-10l1,-5l1,5l9,10" fill="steelblue"/> 
        </g> 
        <g id=bullets></g> 
        <g id=stones></g> 
    </g> 
</svg>