i have a following function:

const catchingEggs = () => { 
    let eggIndex;
    document.querySelector('html').style.backgroundColor = 'transparent';
    leftArrow.style.display = 'none';
    rightArrow.style.display = 'none';
    player.removeEventListener('click', catchingEggs);
    leftArrow.removeEventListener('click', choosePlayerLeft);
    rightArrow.removeEventListener('click', choosePlayerRight);
    document.querySelector('html').requestFullscreen();
    myInterval = setInterval(function(){  
        if(score % 10 === 0) {
            speed -= 10;
            intervalScore += 5
        }
        if(heartIndex < 0) {
            clearInterval(myInterval);
            return;    
        }
        eggIndex = Math.floor(Math.random()*4); 
        fallingEggs(allEggs[eggIndex], speed);
        }, intervalLength); 
}

which works fine, but if i want to keep reusing this function after clearInterval happened, by adding another catchingEggs() to the main function:

const playGame = () => { 
    screen.orientation.lock('landscape');
    document.querySelector('html').style.backgroundColor = 'rgb(31, 28, 28)';
    playerImages[0].style.display = 'block';
    player.addEventListener('click', catchingEggs);
    rightArrow.addEventListener('click', choosePlayerRight); 
    leftArrow.addEventListener('click', choosePlayerLeft);
}

to execute after a conditional, it doesn't do anything. Ideally i'd like to be able to change intervalLength while inside the interval, but that doesn't seem to be possible, so at least i want to be able to go around it by initiating the whole thing again, for example when score >= 20, so i added a new variable when true, as a condition of clearInterval (so far so good), and then inside playGame(): if new variable true catchingEggs(), but nothing happened.

thanks in advance.