为什么我的应用程序保留运行？

Question

我正在制作一个打地鼠游戏，目前我遇到了这个问题：我的游戏在生命 < 0 后保持运行，我只是想知道是否有人想要看看我的代码（特别是 inAction 布尔值），可以告诉我我做错了什么，我只是在学习 :) 这是我的代码：

#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

您需要使用 clearInterval() 重置间隔：

var currentScore = 0;
var currentLives = 0;
var inAction = false;
var interval = null;
var allFields = document.getElementsByClassName("field");

function start(lives) {
 if (inAction) {
  console.log('Already in action, ignore request');
  return;
 }
 currentScore = 0;
 currentLives = lives;
 inAction = true;
 console.log('Start interval');
 // Store interval id to be able to clear it later
 interval = setInterval(function () {
  spawnMole();
 }, 1400);

 showScore();
 isThisTheMole();
}

function stop() {
 console.log('Stop interval');
 inAction = false;
 clearInterval(interval);
}

function spawnMole() {
 var oldScore = currentScore;
 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() {
 // Use jQuery as it's already loaded
 $("#displayScore").html("<span> Score : " + currentScore + " Lives : " + currentLives + "</span>");
}

function isThisTheMole() {
 // Only listen on relevant divs
 $("div#moleWorld > div.field").click(function () {
  // Ignore click if the game is running
  if (!inAction) return;
  var clickedField = $(this);
  if (clickedField.hasClass("mole")) {
   currentScore++;
   clickedField.removeClass("mole");
  } else {
   currentLives--; // Double penalty
  }
  showScore();
  checkLives();
 })
}

function checkLives() {
 if (currentLives <= 0) { // lives could be below zero in case of double penalty
  console.log('No more lifes remaining');
  stop();
 }
}

$(function() {
 // Use jQuery as it's already loaded
 $('#beginEasyClick').click(function () {
  start(5);
 });

 $('#beginNormalClick').click(function () {
  start(2);
 });
});

#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/2.1.1/jquery.min.js"></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>
</div>

（我删除了一些不用的东西）

Answer 2

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

1) 对于您的 HTML 代码：您错过了结束 for 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 中查找 class 名称，但是使用了错误的方式，没有分号 ; .

您的代码是：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.

运行它并希望它现在可以工作。对我来说，它现在正在工作。

谢谢

为什么我的应用程序保留运行？

Why does my application keep running?

html

javascript

css

jquery

jsfiddle

为什么我的应用程序保留 运行？

Why does my application keep running?

html

javascript

css

jquery

jsfiddle

为什么我的应用程序保留运行？