jquery - the javascript code doesn't work as expected need some help details are put in the body

Question

I've made a game code

the game starts when clicking on start game button :fruits start dropping and when you hover on the the dropping fruit it explodes and score increases by +1.

when you miss 3 fruits the game over div appears and with your score, by clicking on start button again a new game starts.

the game works fine but i decided to add on it more thing i wanted to make it a little challengable so I added an if condition to make the fruit run with a fixed speed and run faster after each time the score increases by 5 points the function which increases the speed is called difficulty()

it worked well at the first time but after game over div appears and clicking on start game button it doesn't work well with the dropping speed of fruits what is the problem??

var gameon = false
var x 
var y
var t
var num
var remaininglives
var step
var score

$("#startreset").click(
function(){
    if(gameon==true){
        location.reload();
    }
    else{
        gameon = true;
        $(this).text("Restart Game");
        $("#gameover").hide();
        remaininglives=4;
        score = 0;
        t=100;
        $("#score").html(score);
        lives();
        makefruit(); 
        startaction();
        
       $("#fruit1").mouseover(function(){
            score++;
            $("#score").html(score); 
            clearInterval(action);
            //document.getElementById("slicesound").play();
            $("#slicesound")[0].play()
            $("#fruit1").hide("explode",500); 
           difficulty(t);
            setTimeout(function(){ makefruit(); startaction();}, 800);
});
                
    }
        
    
}
)

function lives(){
            for(i=1;i<remaininglives;i++){
                
                $("#lives").append("<img src = 'heart.png' width = 25px>")
           }
    
        }



function makefruit(){
        x = Math.round(Math.random()*580);
        step = 1+Math.round(Math.random()*10);
        num = 1+Math.round(Math.random()*5);
        $("#fruit1").attr("src","fruit"+num+".png")
        $("#fruit1").css({display:"inline",left:x+"px",top:"-25px"}); 
}



function startaction(){
    
       action = setInterval(function(){
           //$("#fruit1").css({top:$("#fruit1").position().top+step});
           $("#fruit1").css({top:$("#fruit1").position().top+10});
           
           if($("#fruit1").position().top > $("#question").height()){
               remaininglives--;
               $("#lives").empty();
               lives();
             if(remaininglives > 1){
                 
               makefruit();
                 
                } 
               else{
                   
                   $("#gameover").show();
                   $("#scores").html(score);
                   gameon = false;
                   $("#startreset").text("Start Game")
                   clearInterval(action);
                  
               }
           }
       },t) }
 
function difficulty(t){for(n=0;n<50;n+=5){if(score==n){
     if(t!=20)
     {t=t-10}
 }} }

#container {
    height: 600px;
    width: 750px;
    background-color: #9DD2EA;
    margin: 10px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 0px 0px #009de4;
    -moz-box-shadow: 0px 4px 0px 0px #009de4;
    -webkit-box-shadow: 0px 4px 0px 0px #009de4;
/*        box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]*/
    position: relative;
}
#scorebox {
background-color: #F1FF92;
    color: #888E5F;
    padding: 11px;
    position: absolute;
    left: 700px;
    box-shadow: 0px 4px 0px #9da853;
    -moz-box-shadow: 0px 4px 0px #9da853;
    -webkit-box-shadow: 0px 4px 0px #9da853;
}

#correct {
    background-color:#42e252;
    color: white;
    padding: 5px;
    position: absolute;
    left:250px;
    top: 23px;
    display: none;
    
}

#tryagain {
     background-color:#de401a;
    color: white;
    padding: 5px;
    position: absolute;
    left:250px;
    top: 23px;
    display: none;
}

html {
    background: radial-gradient( circle,#fff,#ccc);
    height: 100%;
        
}

#question {
    width: 650px;
    height: 400px;
    margin: 50px auto 10px auto;
    background-color: white;
    box-shadow: 0px 4px #535aa8;
    -moz-box-shadow: 0px 4px #535aa8;
    -webkit-box-shadow: 0px 4px #535aa8;
    
    
    font-family: cursive, sans-serif;
    color: black;
    position: relative;
    overflow: hidden;
    
}

#instructions {
    width:450px;
    height:50px;
    background-color: #9DA0EA;
    box-shadow: 2px 4px #535aa8;
    margin:10px auto;
    font-family: cursive,sans-serif;
    line-height: 50px;
    text-align: center;

}

#fruit1{
    
   position: absolute;
    display: none;
}

#fruit2{
    
   position: absolute;
       display: none;
}

#fruit4{
    
   position: absolute;
    display: none;
}

#fruit3{
    
   position: absolute;
    display: none;
}

#fruit6{
    
   position: absolute;
    display: none;
}


#fruit5{
    
   position: absolute;
    display: none;
}

#lives{
    width: 80px;
    padding: 10px;
    position: absolute;
    background-color: #F1FF92;
    border-radius: 3px;
    box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
/*    visibility: hidden;*/
   /* display: none;*/
}



#choices {
    width: 450px;
    height: 100px;
    margin:5px auto 0px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.box {
    width: 85px;
    height: 85px;
    background-color: aliceblue;
    color: #9DA0EA;
    font-size: 30px;
    text-align: center;
    line-height: 85px;
    border-radius: 100px;
    margin: 10px 0px; 
    cursor: pointer;
    box-shadow: 0px 4px;
    position: relative;
    
}

.box:hover, #startreset:hover{
    background-color: #9C89F6;
    color: white;
    box-shadow: 0px 4px #6b54d3;
    -moz-box-shadow: 0px 4px #6b54d3;
   -webkit-box-shadow: 0px 4px #6b54d3;
}

.box:active, #startreset:active{
    background-color: #9C89F6;
    color: white;
    box-shadow: 0px 0px #6b54d3; 
    -moz-box-shadow: 0px 0px #6b54d3; 
    -webkit-box-shadow: 0px 0px #6b54d3; 
    top: 4px;
}

#startreset{
    width: 100px;
    background-color: rgba( 255, 180, 5, 0.963 );
    color: black;
    text-align: center;
    padding: 5px;
    margin: 8px auto 0px auto; 
    cursor: pointer;
    box-shadow: 2px 4px rgba( 0,0 ,0 , 0.3 ) ;
    position: relative;
}
#timeremaining {
    width: 170px;
    background-color:rgba(181, 235, 36, 0.8);
    padding: 4px;
    position: absolute;
    right: 20px;
    bottom:15px;
    box-shadow:2px 4px rgba( 105, 211, 99, 0.652 ) ;
}

#gameover{
    height: 200px;
    width: 500px;
    background: linear-gradient(#F3CA6B, #F3706C);
    background: -webkit-linear-gradient(#F3CA6B, #F3706C);
    background: -o-linear-gradient(#F3CA6B, #F3706C);
    background: -moz-linear-gradient(#F3CA6B, #F3706C);
    color: white;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    top: 170px;
    left: 145px;
    z-index: 2;
    
    display: none;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>fruit slice game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" >
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    </head>

    
    
    
<body>
    <div id="container">
        
        <div id="scorebox">
        Score:<span id="score">0</span>
        </div>    
        
        
        
        <div id="lives">
          
        </div>
       
        
        
        
        <div id="question">
            <img width= 60px id="fruit1">
         
        
        </div>
        
        
        <div id="instructions">
        Catch The damn fruits!!!
        </div>
        
        
        
        
        <div id="startreset">
                Start Game
        </div>
            
         
            
        <div id="gameover">
            <p>GAME OVER</p>
           <p> Your score is <span id="scores">0</span> </p>  
        </div>
        
        <script src="javascript.js"></script>
        <audio id="slicesound">
            <source src="slicesound.mp3">
            <source src="slicesound.ogg">
        </audio>
        
    </div>    
    </body>    

</html>

question from:https://stackoverflow.com/questions/65906426/the-javascript-code-doesnt-work-as-expected-need-some-help-details-are-put-in-t

Answer 1

You need to set time control in action, mouseover function that is the moment where score increases and time can be changed.

Here is your solution:

 $("#fruit1").mouseover(function(){
        score++;
        $("#score").html(score); 
        clearInterval(action);
        //document.getElementById("slicesound").play();
        $("#slicesound")[0].play()
        $("#fruit1").hide("explode",500);
        // you need to set time control in action
        //this is where you check score and control  t time or you call difficulties(t) function whatever works for requirement
        if(score % 5 === 0 ){ // if score is divided by 5 
            if(t!=20){t=t-10}// if time value is ...whatever is condition
        }
        //this is where it ends 
        //
        setTimeout(function(){ makefruit(); startaction();}, 800);
    });
            

It was fun playing :)