javascript - javascript代码不能按预期工作需要一些帮助细节放在正文中

Question

我做了一个游戏代码

单击开始游戏按钮时游戏开始：水果开始下降，当您将鼠标悬停在掉落的水果上时，它会爆炸并且得分增加+1。

当您错过 3 个水果时，会出现超过 div 的游戏，并且您的分数会通过再次单击开始按钮开始新的游戏。

游戏运行良好，但我决定添加更多的东西，我想让它有点挑战性，所以我添加了一个 if 条件，让水果以固定的速度运行，并且每次得分增加 5 分后跑得更快提高速度的方法称为难度（）

它在第一次运行良好，但在出现游戏结束 div 并单击开始游戏按钮后，它与水果的下降速度不起作用是什么问题？

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>

游戏中使用的图像可以从此谷歌驱动器链接下载

标签： javascriptjquery

Answer 1

您需要在动作中设置时间控制，鼠标悬停功能，即分数增加和时间可以更改的时刻。

这是您的解决方案：

 $("#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);
    });
            

玩得很开心：）