javascript - 为什么我的应用程序一直在运行？

Question

我正在制作一个 Whack-A-Mole 游戏，目前我遇到了这个问题:我的游戏在生命 < 0 后继续运行，我只是想知道是否有人想看看我的代码(尤其是 inAction bool 值)并且可以告诉我我做错了什么，我只是在学习 :) 这是我的代码:

#moleWorld {
  height: 330px;
  width: 1500px;
  margin: 0 auto;
  border: 1px solid black;
}

.field {
  display: inline-block;
  width: 21%;
  margin: 27px;
  height: 21%;
  border: 1px solid black;
  background: red;
}

.mole {
  display: inline-block;
  width: 21%;
  margin: 27px;
  height: 21%;
  border: 1px solid black;
  background-color: green;
}

#generalInformation {
  height: 40px;
  width: 330px;
  margin: 0 auto;
  background: lightblue;
}

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

#beginEasyClick,
#beginNormalClick,
#beginHardClick {
  margin: 40px 45%;
  width: 70px;
  height: 30px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-3.1.1.js">
    "use strict";

    var currentScore = 2;
    var niveau = 0;
    var currentLives = 3;
    var inAction = false;
    var moleworld = "#moleWorld";
    var beginEasyClick = document.getElementById("beginEasyClick");
    var beginNormalClick = document.getElementById("beginNormalClick");
    var beginHardClick = document.getElementById("beginHardClick");
    var displayScore = document.getElementById("_displayScore");
    var $field = $(moleworld).find(class = "field")

    var getrandomInt(function(min, max) {
      return Math.floor(Math.random() * (max - min - 1)) + min
    })

    function randomField() {
      return Math.floor(Math.random() * 8)
    }
  </script>


  <script>
    var moleworld = "#moleWorld";
    var $moleworld = $(moleworld);
    
    currentScore = 0;
    currentLives = 5;
    inAction = false;
    
    "use strict";
    
    $().ready(function() {

      $(beginEasyClick).click(function() {
      
          if (!inAction) {
          
            inAction = true
            
            setInterval(function() {
              spawnMole();
            }, 1400);

            showScore();
            isThisTheMole();

          }
          
        });

      function spawnMole() {
      
        var oldScore = currentScore;
        var allFields = new Array();
        allFields = document.getElementsByClassName("field")
        var target = $(allFields[Math.floor(Math.random() * allFields.length)])
        target.addClass("mole");

        setTimeout(function() {
        
          target.removeClass("mole")
          
          if (oldScore === currentScore) {
            currentLives--;
            checkLives();
          }
          showScore();
          
        }, 1000)

      }

      function showScore() {

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

      }

      $(beginNormalClick).click(function() {
        // $("#car").css("background-color" , "green");
        inAction = false;

      });

      function isThisTheMole() {

        $("div>div").click(function() {


          var clickedField = $(this);

          if (clickedField.hasClass("mole")) {
            currentScore++;

            clickedField.removeClass("mole");

          } else {
            currentLives--;

          }
          showScore();
          checkLives();

        })
      }


      function checkLives() {
      
        if (currentLives === 0) {
          alert("")

          inAction = false;
        }
        
      }

    });
  </script>
  
  <p id="car" class="kes">blablacar</p>
  <p class="kes">carblabla </p>
  <div id="StartMenu"></div>
  <button id="beginEasyClick"> Easy </button>
  <button id="beginNormalClick"> Normal </button>
  <button id="beginHardClick"> Hard </button>
  <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>

非常感谢您的阅读!

Answer 1

在你的代码中我发现了几个错误。请一一重写您的代码。

1) 对于您的 HTML 代码: 您错过了结束 Id moleWorld

<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 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>

2) 包含 jQuery 库文件后，您再次尝试包含 include jQuery

您的密码是:<script type="text/javascript" src="../jquery-3.1.1.js">

更正码:<script type="text/javascript">

3) 你正试图从 id moleWorld 中查找类名，但是在没有分号 ; 的情况下以错误的方式查找。

您的代码是:var $field = $(moleworld).find(class = "field")

更正码:var $field = $(moleworld).find('.field');

4) 您正试图以错误的方式在另一个函数内部声明一个函数。

您的代码是:var getrandomInt(function(min, max) {
return Math.floor(Math.random() * (max - min - 1)) + min
});

建议代码:var getrandomInt = (function(min, max) {
return Math.floor(Math.random() * (max - min - 1)) + min;
});

Now you can use your getrandomInt variable as a function

5) 您的文档准备方法不正确。您写道:$().ready(function() {...});

它将是:$(document).ready(function() {...});

Note: Please try to use semicolon after your line end.

运行它，希望它现在能工作。对我来说，它现在起作用了。

谢谢