2017-04-04 77 views
1

我正在製作一個Whack-A-Mole遊戲,目前我一直在困擾着這個問題:我的遊戲一直運行在生命之後< 0,我只是想知道是否有人想看看我的代碼(特別是無爲布爾),並能告訴我什麼,我做錯了,我只是學習:)這裏是我的代碼:爲什麼我的應用程序繼續運行?

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

非常感謝您的閱讀!

回答

0

您需要將您的間隔與clearInterval()復位:

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

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

 
\t showScore(); 
 
\t isThisTheMole(); 
 
} 
 

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

 
function spawnMole() { 
 
\t var oldScore = currentScore; 
 
\t var target = $(allFields[Math.floor(Math.random() * allFields.length)]); 
 
\t target.addClass("mole"); 
 

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

 
function showScore() { 
 
\t // Use jQuery as it's already loaded 
 
\t $("#displayScore").html("<span> Score : " + currentScore + " Lives : " + currentLives + "</span>"); 
 
} 
 

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

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

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

 
\t $('#beginNormalClick').click(function() { 
 
\t \t start(2); 
 
\t }); 
 
});
#moleWorld { 
 
\t height: 330px; 
 
\t width: 1500px; 
 
\t margin: 0 auto; 
 
\t border: 1px solid black; 
 
} 
 

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

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

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

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

 
#beginEasyClick , #beginNormalClick, #beginHardClick { 
 
\t 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"> 
 
\t <div class="field"> </div> 
 
\t <div class="field"> </div> 
 
\t <div class="field"> </div> 
 
\t <div class="field"> </div> 
 
\t <div class="field"> </div> 
 
\t <div class="field"> </div> 
 
\t <div class="field"> </div> 
 
\t <div class="field"> </div> 
 
</div>

(我已經刪除了一些用過的東西)

+0

非常感謝 – THEoneANDonly

2

在你的代碼中,我發現了幾個錯誤。請重新編寫你的代碼。

1)對於您的HTML代碼: 你錯過了,結束了標識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庫文件,你以後再次試圖包括包括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() {...});

注:請您試試行結束後使用分號。

運行它,並希望它現在可以工作。對我來說,它現在正在工作。

謝謝

相關問題