スコアが自動的に低下するのはなぜですか？

Question

私は、教育的な目的のために、巨大なゲームをプログラミングしているいくつかの問題を抱えています。見つけられないようなバグがあります。 ゲームをプレイしているときに、 3の場合、余分なモルがゲームに追加され、2回のクリックで「殺す」ことができ、2ポイントを獲得する。

function spawnMinerMole() { 
     if (!inAction) { 
      return; 
     } 
     var oldScore = currentScore; 
     var allFields = document.getElementsByClassName("field"); 
     target2 = $(allFields[Math.floor(Math.random() * allFields.length)]); 
     clicks = 0; 
     if (target2 != target && target2 != target3) { 
      target2.addClass("minerMole"); 
      setTimeout(function() { 
       target2.removeClass("minerMole"); 
       if (target2.hasClass("minerMole")) { 
        currentLives--; 


       } 
       showScore(); 
       checkLivesAndScore(); 
      }, 1900); 
     } 
     showScore(); 
     checkLivesAndScore(); 
    } 

完全なHTMLコード：

"use strict"; 
    var beginEasyClick = document.getElementById("beginEasyClick"); 
    var beginNormalClick = document.getElementById("beginNormalClick"); 
    var beginHardClick = document.getElementById("beginHardClick"); 
    var playAgainClick = document.getElementById("playAgainClick"); 
    var gobackClick = document.getElementById("gobackClick") 
    var displayScore = document.getElementById("_displayScore"); 
    var $field = $(moleworld).find(".field"); 
</script> 
<script> 
    var moleworld = "#moleWorld"; 
    var $moleworld = $(moleworld); 
    var currentScore; 
    var currentLives; 
    var inAction = false; 
    var interval = null; 
    var interval2 = null; 
    var interval3 = null; 
    var clicks = 0; 
    var target; 
    var target2; 
    var target3; 
    var moles = []; 

    function start() { 
     if (inAction) { 
      return; 
     } 
     else { 
      inAction = true; 
      beginEasyClick.style.visibility = "hidden"; 
      beginNormalClick.style.visibility = "hidden"; 
      beginHardClick.style.visibility = "hidden"; 
      gobackClick.style.visibility = "hidden"; 
      document.getElementById("Choose").style.visibility = "hidden"; 
      $("#gameOver").css("background-color", "white").css("color", "white"); 
      interval = setInterval(function() { 
       if (!inAction) { 
        return; 
       } 
       spawnMole(); 
      }, 2000); 
      showScore(); 
      isThisTheMole(); 
     } 
    } 

    function stop() { 
     inAction = false; 
     clearInterval(interval); 
     clearInterval(interval2); 
     clearInterval(interval3); 
     gobackClick.style.visibility = "visible"; 
     document.getElementById("gameOver").innerHTML = "GAME OVER"; 
     $("#gameOver").css("background-color", "black").css("color", "red"); 
     playAgainClick.style.visibility = "visible"; 
    } 

    function spawnMole() { 
     var oldScore = currentScore; 
     var allFields = document.getElementsByClassName("field"); 
     target = $(allFields[Math.floor(Math.random() * allFields.length)]); 
     if (target != target2 && target != target3) { 
      target.addClass("mole"); 
      // moles.push({target : target , clicks : 0 , needsclicks : 1}) 
      setTimeout(function() { 
       target.removeClass("mole"); 
       if (oldScore === currentScore) { 
        currentLives--; 
        checkLivesAndScore(); 
       } 
       showScore(); 
      }, 1750); 
     } 
    }; 

    function spawnMinerMole() { 
     if (!inAction) { 
      return; 
     } 
     var oldScore = currentScore; 
     var allFields = document.getElementsByClassName("field"); 
     target2 = $(allFields[Math.floor(Math.random() * allFields.length)]); 
     clicks = 0; 
     if (target2 != target && target2 != target3) { 
      target2.addClass("minerMole"); 
      setTimeout(function() { 
       target2.removeClass("minerMole"); 
       if (target2.hasClass("minerMole")) { 
        currentLives--; 


       } 
       showScore(); 
       checkLivesAndScore(); 
      }, 1900); 
     } 
     showScore(); 
     checkLivesAndScore(); 
    } 

    function spawnBomb() { 
     var allFields = document.getElementsByClassName("field"); 
     target3 = $(allFields[Math.floor(Math.random() * allFields.length)]); 
     if (target3 != target && target3 != target2) { 
      target3.addClass("bomb"); 
      setTimeout(function() { 
       target3.removeClass("bomb"); 
      }, 1809); 
     } 
    } 

    function showScore() { 
     document.getElementById("_displayScore").innerHTML = "<span> Score : " + currentScore + " Lives : " + currentLives + "</span>" 
    } 

    function isThisTheMole() { 
     $("div#moleWorld > div.field").click(function() { 
      if (!inAction) { 
       return; 
      } 
      var clickedField = $(this); 
      var clickedMiner = $("div#moleWorld > div.minerMole"); 
      if (clickedField.hasClass("mole")) { 
       currentScore++; 
       clickedField.removeClass("mole") 
      } 
      else if (clickedField.hasClass("minerMole")) { 
       clicks++; 
       if (clicks == 2) { 
        currentScore++; 
        currentScore++; 
        clickedField.removeClass("minerMole"); 
        showScore(); 
        checkLivesAndScore(); 
        clicks = 0; 
       } 
      } 
      else if (clickedField.hasClass("bomb")) { 
       currentLives = 0; 
       clickedField.removeClass("bomb"); 
      } 
      else { 
       currentLives--; 
       clicks = 0; 
      } 
      showScore(); 
      checkLivesAndScore(); 
     }) 
    } 

    function checkLivesAndScore() { 
     if (currentLives <= 0) { 
      currentLives = 0; 
      stop(); 
     } 
     if (currentScore === 3) { 
      interval2 = setInterval(function() { 
       spawnMinerMole(); 
      }, 2500); 
     } 
     if (currentScore === 15 || currentScore === 16) { 
      interval3 = setInterval(function() { 
       spawnBomb(); 
      }, 5725) 
     } 
    } 
    $().ready(function() { 
     playAgainClick.style.visibility = "hidden"; 
     $('#beginEasyClick').click(function() { 
      if (currentLives === 0) { 
       window.location.reload(); 
      } 
      currentScore = 0; 
      currentLives = 5; 
      start(); 
     }); 
     $('#beginNormalClick').click(function() { 
      currentScore = 0; 
      currentLives = 2; 
      start(); 
     }); 
     $(beginHardClick).click(function() { 
      currentScore = 0; 
      currentLives = 1; 
      start(); 
     }) 
     $(playAgainClick).click(function() { 
      window.location.reload(); 
     }) 
     $(gobackClick).click(function() { 
      window.location.href = "FrontPage.html" 
     }) 
    }); 
</script> 
<p id="Welcome">Tap-A-Mole</p> 
<p id="Choose">Choose your difficulty </p> 
<div id="StartMenu"></div> 
<button id="beginEasyClick"> Easy </button> 
<button id="beginNormalClick"> Normal </button> 
<button id="beginHardClick"> Hard </button> 
<button id="playAgainClick">Play again!</button> 
<button id="gobackClick">Go back to main menu</button> 
<div id="gameOver"> </div> 
<div id="generalInformation"> 
    <p id="_displayScore"> </p> 
</div> 
<div id="moleWorld"> 
    <div class="field"> </div> 
    <div class="field"> </div> 
    <div class="field"> </div> 
    <div class="field"> </div> 
    <div class="field"> </div> 
    <div class="field"> </div> 
    <div class="field"> </div> 
    <div class="field"> </div> 
</div> 

しかし、問題は、あなたが（ウィッヒが起こるべきではありません）私は問題がある場合、これがあると思いモル「キル」に管理していても命を失い、あります

CSS：

body{ 
margin: 0; 
}  


#moleWorld { 
    height: 50vw; 
    width: 100vw; 
    margin: 0 auto; 
    border: 1px solid black; 
    background-image: url(rsz_1world.jpg); 
    background-size: 100% 100%; 
} 

.field { 
    display: inline-block; 
    width: calc(100vw/8); 
    margin: calc(50vw/12); 
    height: calc(100vw/8); 
    border: 1px solid black; 
    background-color: black; 
    background-image: url(moleHill.jpg); 
    background-size: 100% 100%; 
} 

.mole { 
    display: inline-block; 
    width: calc(100vw/8); 
    margin: calc(50vw/12); 
    height: calc(100vw/8); 
    border: 1px solid black; 
    background-color: transparent; 
    background-image: url(moole.png); 
    background-size: 100% 100%; 
} 

.minerMole { 
    display: inline-block; 
    width: calc(100vw/8); 
    margin: calc(50vw/12); 
    height: calc(100vw/8); 
    border: 1px solid black; 
    background-color: transparent; 
    background-image: url(minermole.png); 
    background-size: 100% 100%; 
} 

#miiner { 
    display: inline-block; 
     width: calc(100vw/8); 
    margin: calc(50vw/12); 
    height: calc(100vw/8); 
    border: 1px solid black; 
    background-color: transparent; 
    background-image: url(minermole.png); 
    background-size: 100% 100%; 
} 

.extraOpmaak { 
    color: white; 
} 

.bomb { 
    display: inline-block; 
    width: calc(100vw/8); 
    margin: calc(50vw/12); 
    height: calc(100vw/8); 
    border: 1px solid black; 
    background-color: transparent; 
    background-image: url(bomb.png); 
    background-size: 100% 100%; 
} 

.life { 
    display: inline-block; 
    width: 17%; 
    margin: 27px; 
    height: 37%; 
    border: 1px solid black; 
    background-color: transparent; 
    background-image: url(life.png); 
} 

#generalInformation { 
    height: 40px; 
    width: 230px; 
    margin: 0 auto; 
    background-color: lightblue; 
} 

#gameOver { 
    height: 58px; 
    width: 300px; 
    margin: 0 auto; 
    background-color: white; 
    color: white; 
    text-align: center 
} 

; 
#level-display, 
#lifes-display { 
    margin-left: 30px; 
} 

#beginEasyClick { 
    margin-left: 40%; 
    width: 15%; 
} 

#beginHardClick { 
    margin-left: 80%; 
    width: 15%; 
} 

#beginNormalClick { 
    margin-left: 60%; 
    width: 18%; 
} 

#playAgainClick { 
    width: 15%; 
    margin-left: 70%; 
} 

#gobackClick { 
    float: left; 
    margin-top: -10%; 
    margin-left: 20%; 
} 

#Welcome { 
    font-family: papyrus; 
    font-size: 250%; 
    margin-left: 61px 
} 

#Choose { 
    font-family: Century Gothic; 
    margin-left: 50%; 
} 

.frontpageLogo { 
    margin-left: 20%; 
    margin-top: 15%; 
    width: 960px; 
    height: 537px; 
    background-color: transparent; 
    background-image: url(rsz_frontpagelogoo.jpg); 
} 

.buitenrandLogo { 
    height: 400px; 
    width: 1500px; 
    background-color: dimgray; 
    background-image: url(randlog.jpeg) 
} 

.choise1 { 
    margin-left: 15%; 
    margin-top: 40%; 
    float: left; 
    font-family: "Courier New"; 
    font-size: 200%; 
    color: whitesmoke; 
} 

.rules { 
    margin-left: 30%; 
    height: 320px; 
    width: 37%; 
    border-style: groove; 
    border-width: 20px; 
    background-image: url(therules.png) 
} 

.rulesnumber { 
    margin-left: 45%; 
    font-family: "Courier New"; 
} 

.rulestext { 
    margin-left: 35%; 
    font-family: sans-serif; 
} 

#rulesClick { 
    float: left; 
    margin-left: 70%; 
    margin-top: 22% 
} 

Answer 1

あなたが正しいように見えます。モルを打つためにあなたのロジックはMinerMoleタイムアウトが（spawnMinerMole関数内）の周りに来るとき、ここで、それはあなたがそれがある、if (clicks <= 1)をご確認を0

else if (clickedField.hasClass("minerMole")) { 
    clicks++; 
    if (clicks == 2) { 
     currentScore++; 
     currentScore++; 
     clickedField.removeClass("minerMole"); 
     showScore(); 
     checkLivesAndScore(); 
     clicks = 0; 
    } 
} 

にclicksをリセットして、isThisTheMole関数内です。

モルドが殴られたかどうかを確認する方法を変更することをお勧めします。臼歯が殴られたときに臼歯を取り除くので、臼歯がまだminerMoleのクラスを持っているかどうかを確認してください。 - 問題は、TARGET2（もし `前に` target2.removeClass（ "minerMole"） `権利を行っているということであるあなたが質問の更新が終了していると仮定すると、

setTimeout(function() { 
    if (target2.hasClass("minerMole") { 
     currentLives--; 
     target2.removeClass("minerMole"); 
    } 
    showScore(); 
    checkLivesAndScore(); 
}, 1900); 

"use strict"; 
 

 
var beginEasyClick = document.getElementById("beginEasyClick"); 
 
var beginNormalClick = document.getElementById("beginNormalClick"); 
 
var beginHardClick = document.getElementById("beginHardClick"); 
 
var playAgainClick = document.getElementById("playAgainClick"); 
 
var gobackClick = document.getElementById("gobackClick") 
 
var displayScore = document.getElementById("_displayScore"); 
 
var $field = $(moleworld).find(".field"); 
 
    
 
var moleworld = "#moleWorld"; 
 
var currentScore; 
 
var currentLives; 
 
var inAction = false; 
 
var interval = null; 
 
var interval2 = null; 
 
var interval3 = null; 
 
var clicks = 0; 
 
var target; 
 
var target2; 
 
var target3; 
 
var moles = []; 
 

 
function start() { 
 
    if (inAction) { 
 
     return; 
 
    } 
 
    else { 
 
     inAction = true; 
 
     beginEasyClick.style.visibility = "hidden"; 
 
     beginNormalClick.style.visibility = "hidden"; 
 
     beginHardClick.style.visibility = "hidden"; 
 
     gobackClick.style.visibility = "hidden"; 
 
     document.getElementById("Choose").style.visibility = "hidden"; 
 
     $("#gameOver").css("background-color", "white").css("color", "white"); 
 
     interval = setInterval(function() { spawnMole(); }, 2000); 
 
     showScore(); 
 
     isThisTheMole(); 
 
    } 
 
} 
 

 
function stop() { 
 
    inAction = false; 
 
    clearInterval(interval); 
 
    clearInterval(interval2); 
 
    clearInterval(interval3); 
 
    gobackClick.style.visibility = "visible"; 
 
    document.getElementById("gameOver").innerHTML = "GAME OVER"; 
 
    $("#gameOver").css("background-color", "black").css("color", "red"); 
 
    playAgainClick.style.visibility = "visible"; 
 
} 
 

 
function spawnMole() { 
 
    if(!inAction) { return; } 
 
    
 
    var allFields = document.getElementsByClassName("field"); 
 
    target = $(allFields[Math.floor(Math.random() * allFields.length)]); 
 
    if (target != target2 && target != target3) { 
 
     target.addClass("mole"); 
 
     // moles.push({target : target , clicks : 0 , needsclicks : 1}) 
 
     setTimeout(function() {     
 
      if (target.hasClass("mole")) { 
 
       currentLives--; 
 
       target.removeClass("mole"); 
 
       checkLivesAndScore(); 
 
      } 
 
     }, 1750); 
 
    } 
 
} 
 

 
function spawnMinerMole() { 
 
    if (!inAction) { return; } 
 
    
 
    var allFields = document.getElementsByClassName("field"); 
 
    target2 = $(allFields[Math.floor(Math.random() * allFields.length)]); 
 
    clicks = 0; 
 
    if (target2 != target && target2 != target3) { 
 
     target2.addClass("minerMole"); 
 
     setTimeout(function() { 
 
      if (target2.hasClass("minerMole")) { 
 
       currentLives--; 
 
       target2.removeClass("minerMole"); 
 
       checkLivesAndScore(); 
 
      } 
 
     }, 1900); 
 
    } 
 
} 
 

 
function spawnBomb() { 
 
    if(!inAction) { return; } 
 
    
 
    var allFields = document.getElementsByClassName("field"); 
 
    target3 = $(allFields[Math.floor(Math.random() * allFields.length)]); 
 
    if (target3 != target && target3 != target2) { 
 
     target3.addClass("bomb"); 
 
     setTimeout(function() { 
 
      target3.removeClass("bomb"); 
 
     }, 1809); 
 
    } 
 
} 
 

 
function showScore() { 
 
    document.getElementById("_displayScore").innerHTML = `<span> Score : ${currentScore} Lives : ${currentLives}</span>`; 
 
} 
 

 
function isThisTheMole() { 
 
    $("div#moleWorld > div.field").click(function() { 
 
     if (!inAction) { 
 
      return; 
 
     } 
 
     var clickedField = $(this); 
 
     var clickedMiner = $("div#moleWorld > div.minerMole"); 
 
     if (clickedField.hasClass("mole")) { 
 
      currentScore++; 
 
      clickedField.removeClass("mole") 
 
     } 
 
     else if (clickedField.hasClass("minerMole")) { 
 
      clicks++; 
 
      if (clicks == 2) { 
 
       currentScore += 2; 
 
       clicks = 0; 
 
       clickedField.removeClass("minerMole"); 
 
      } 
 
     } 
 
     else if (clickedField.hasClass("bomb")) { 
 
      currentLives = 0; 
 
      clickedField.removeClass("bomb"); 
 
     } 
 
     else { 
 
      currentLives--; 
 
      clicks = 0; 
 
     } 
 
     checkLivesAndScore(); 
 
    }) 
 
} 
 

 
function checkLivesAndScore() { 
 
    if (currentLives <= 0) { 
 
     currentLives = 0; 
 
     stop(); 
 
    } 
 
    if (currentScore === 3) { 
 
     interval2 = setInterval(function() { 
 
      spawnMinerMole(); 
 
     }, 2500); 
 
    } 
 
    if (currentScore === 15 || currentScore === 16) { 
 
     interval3 = setInterval(function() { 
 
      spawnBomb(); 
 
     }, 5725) 
 
    } 
 
    showScore(); 
 
} 
 

 
$().ready(function() { 
 
    playAgainClick.style.visibility = "hidden"; 
 
    $('#beginEasyClick').click(function() { 
 
     if (currentLives === 0) { 
 
      window.location.reload(); 
 
     } 
 
     currentScore = 0; 
 
     currentLives = 5; 
 
     start(); 
 
    }); 
 
    $('#beginNormalClick').click(function() { 
 
     currentScore = 0; 
 
     currentLives = 2; 
 
     start(); 
 
    }); 
 
    $(beginHardClick).click(function() { 
 
     currentScore = 0; 
 
     currentLives = 1; 
 
     start(); 
 
    }) 
 
    $(playAgainClick).click(function() { 
 
     window.location.reload(); 
 
    }) 
 
    $(gobackClick).click(function() { 
 
     window.location.href = "FrontPage.html"; 
 
    }) 
 
});

body{ 
 
    margin: 0; 
 
}  
 

 

 
#moleWorld { 
 
    height: 50vw; 
 
    width: 100vw; 
 
    margin: 0 auto; 
 
    border: 1px solid black; 
 
    background-image: url(rsz_1world.jpg); 
 
    background-size: 100% 100%; 
 
} 
 

 
.field { 
 
    display: inline-block; 
 
    width: calc(100vw/8); 
 
    margin: calc(50vw/12); 
 
    height: calc(100vw/8); 
 
    border: 1px solid black; 
 
    background-color: black; 
 
    background-image: url(moleHill.jpg); 
 
    background-size: 100% 100%; 
 
} 
 

 
.mole { 
 
    display: inline-block; 
 
    width: calc(100vw/8); 
 
    margin: calc(50vw/12); 
 
    height: calc(100vw/8); 
 
    border: 1px solid black; 
 
    background-color: transparent; 
 
    background-image: url(moole.png); 
 
    background-size: 100% 100%; 
 
} 
 

 
.minerMole { 
 
    display: inline-block; 
 
    width: calc(100vw/8); 
 
    margin: calc(50vw/12); 
 
    height: calc(100vw/8); 
 
    border: 1px solid black; 
 
    background-color: transparent; 
 
    background-image: url(minermole.png); 
 
    background-size: 100% 100%; 
 
} 
 

 
#miiner { 
 
    display: inline-block; 
 
     width: calc(100vw/8); 
 
    margin: calc(50vw/12); 
 
    height: calc(100vw/8); 
 
    border: 1px solid black; 
 
    background-color: transparent; 
 
    background-image: url(minermole.png); 
 
    background-size: 100% 100%; 
 
} 
 

 
.extraOpmaak { 
 
    color: white; 
 
} 
 

 
.bomb { 
 
    display: inline-block; 
 
    width: calc(100vw/8); 
 
    margin: calc(50vw/12); 
 
    height: calc(100vw/8); 
 
    border: 1px solid black; 
 
    background-color: transparent; 
 
    background-image: url(bomb.png); 
 
    background-size: 100% 100%; 
 
} 
 

 
.life { 
 
    display: inline-block; 
 
    width: 17%; 
 
    margin: 27px; 
 
    height: 37%; 
 
    border: 1px solid black; 
 
    background-color: transparent; 
 
    background-image: url(life.png); 
 
} 
 

 
#generalInformation { 
 
    height: 40px; 
 
    width: 230px; 
 
    margin: 0 auto; 
 
    background-color: lightblue; 
 
} 
 

 
#gameOver { 
 
    height: 58px; 
 
    width: 300px; 
 
    margin: 0 auto; 
 
    background-color: white; 
 
    color: white; 
 
    text-align: center 
 
} 
 

 
; 
 
#level-display, 
 
#lifes-display { 
 
    margin-left: 30px; 
 
} 
 

 
#beginEasyClick { 
 
    margin-left: 40%; 
 
    width: 15%; 
 
} 
 

 
#beginHardClick { 
 
    margin-left: 80%; 
 
    width: 15%; 
 
} 
 

 
#beginNormalClick { 
 
    margin-left: 60%; 
 
    width: 18%; 
 
} 
 

 
#playAgainClick { 
 
    width: 15%; 
 
    margin-left: 70%; 
 
} 
 

 
#gobackClick { 
 
    float: left; 
 
    margin-top: -10%; 
 
    margin-left: 20%; 
 
} 
 

 
#Welcome { 
 
    font-family: papyrus; 
 
    font-size: 250%; 
 
    margin-left: 61px 
 
} 
 

 
#Choose { 
 
    font-family: Century Gothic; 
 
    margin-left: 50%; 
 
} 
 

 
.frontpageLogo { 
 
    margin-left: 20%; 
 
    margin-top: 15%; 
 
    width: 960px; 
 
    height: 537px; 
 
    background-color: transparent; 
 
    background-image: url(rsz_frontpagelogoo.jpg); 
 
} 
 

 
.buitenrandLogo { 
 
    height: 400px; 
 
    width: 1500px; 
 
    background-color: dimgray; 
 
    background-image: url(randlog.jpeg) 
 
} 
 

 
.choise1 { 
 
    margin-left: 15%; 
 
    margin-top: 40%; 
 
    float: left; 
 
    font-family: "Courier New"; 
 
    font-size: 200%; 
 
    color: whitesmoke; 
 
} 
 

 
.rules { 
 
    margin-left: 30%; 
 
    height: 320px; 
 
    width: 37%; 
 
    border-style: groove; 
 
    border-width: 20px; 
 
    background-image: url(therules.png) 
 
} 
 

 
.rulesnumber { 
 
    margin-left: 45%; 
 
    font-family: "Courier New"; 
 
} 
 

 
.rulestext { 
 
    margin-left: 35%; 
 
    font-family: sans-serif; 
 
} 
 

 
#rulesClick { 
 
    float: left; 
 
    margin-left: 70%; 
 
    margin-top: 22% 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p id="Welcome">Tap-A-Mole</p> 
 
<p id="Choose">Choose your difficulty </p> 
 
<div id="StartMenu"></div> 
 
<button id="beginEasyClick"> Easy </button> 
 
<button id="beginNormalClick"> Normal </button> 
 
<button id="beginHardClick"> Hard </button> 
 
<button id="playAgainClick">Play again!</button> 
 
<button id="gobackClick">Go back to main menu</button> 
 
<div id="gameOver"> </div> 
 
<div id="generalInformation"> 
 
    <p id="_displayScore"> </p> 
 
</div> 
 
<div id="moleWorld"> 
 
    <div class="field"> </div> 
 
    <div class="field"> </div> 
 
    <div class="field"> </div> 
 
    <div class="field"> </div> 
 
    <div class="field"> </div> 
 
    <div class="field"> </div> 
 
    <div class="field"> </div> 
 
    <div class="field"> </div> 
 
</div>