为什么我的应用程序继续运行？

时间：2017-04-04 16:55:42

标签： javascript jquery html css jsfiddle

我正在制作一场Whack-A-Mole游戏，而且我目前仍然遇到这个问题：我的游戏在生命之后继续运行＆lt; 0，我只是想知道是否有人想看看我的代码（特别是inAction布尔）并告诉我我做错了什么，我只是在学习:)这是我的代码：

＆＃13;
＆＃13; 
#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
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

非常感谢您的阅读！

2 个答案:

答案 0 :(得分：2)

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

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; });

  

现在您可以将getrandomInt变量用作函数

5）您的文档就绪方法不正确。 您写道：$().ready(function() {...});

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

  

注意：请在行结束后尝试使用分号。

运行它并希望它现在可以正常工作。对我而言，现在正在发挥作用。

由于

答案 1 :(得分：0)

您需要使用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>

（我删除了一些未使用过的东西）

相关问题
最新问题