2017-04-04 8 views
1

私はWhack-A-Moleゲームを作っていますが、私は現在、この問題を抱えています。人生が人生の後に続いているのは<で、私のコードを見たい人はいますか?特に、不作為のブール値)と私が間違ってやっているものを私に伝えることができ、私はちょうど学んでいる:)ここに私のコードです:私のアプリケーションはなぜ動いていますか?

#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コードの

1): あなたが同上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)あなたはmoleWorld ID からではなく、セミコロンせずに間違った方法でクラス名を見つけようとしています。

あなたのコードはでした: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; });

今すぐあなたのドキュメント準備方法が正しくない)関数として

5をごgetrandomInt変数を使用することができます。 あなたが書いた:$().ready(function() {...});

は、それは次のようになります。$(document).ready(function() {...});

注:お使いの行終了後にセミコロンを使用してみてください。

これを実行して今すぐ動作することを願ってください。私のためには今働いている。

ありがとうございました

関連する問題