2015-12-10 43 views
1

我使用變量創建了一個基本分數計數器。在JavaScript中增加一個變量不起作用?

基本上當你點擊一個框,如果變量findbomb等於功能選擇的參數,然後它會說你贏了,應該加1到變量score但如果變量findbomb是不同的,會發生什麼時比參數num那麼如果會說你丟了,並且從得分中拿1分。

但由於某些原因,即使我使用score++來增加變量,它拒絕這樣做,並且沒有任何錯誤在Chrome中的開發者菜單中彈出。

<!doctype html> 
<html> 
<head> 

    <title>Assignment</title> 

    <style> 
     body{background:black;} 


     #game{width:1282px; 
       position:absolute;top:15%;left:50%; 
       margin-left:-642px;} 

     #background{width:1282px;} 

     #covered{width:1282px; 
       position:absolute;left:50%;top:70%; 
       margin-left:-642px; 
       z-index:100;} 

     #filled{width:1282px; 
       position:absolute;top:70%; 
       z-index:50;} 

     #box0{position:absolute;;left:20%;} 

     #box1{position:absolute;left:60%;} 


     .bombonleft{position:absolute;left:20%;} 
     .blankonright{position:absolute;left:60%;} 


     .blankonleft{position:absolute;left:20%;} 
     .bombonright{position:absolute;left:60%;} 

     #rules{width:500px; 
       text-align:center; 
       background:red; 
       position:absolute;top:10%;left:50%; 
       margin-left:-250px; 
       z-index:300; 
       display:none;} 


     #feedback{position:absolute;left:50%;top:10%; 
        margin-left:-300px; 
        width:600px; 
        height:auto; 
        font-size:200%; 
        font-family:sans-serif; 
        text-align:center; 
        background:red; 
        display:none;} 

     #scores{position:absolute;top:10%;left:5%; 
       width:50px; 
       text-align:center; 
       font-size:300%; 
       font-family:sans-serif; 
       background:red;} 

     #timer{position:absolute;top:30%;left:50%; 
       margin-left:-236px;} 

     #countdown{width:300px; 
        text-align:center; 
        position:absolute; 
        left:50%; 
        top:35%; 
        font-family:sans-serif; 
        font-size:1000%; 
        margin-left:-150px; 
        color:red; 
       } 

     #title{text-align:center; 
       font-family:sans-serif; 
       font-size:300%; 
       color:red; 
       } 
     #finder{background:red;} 

     #new{background:red;} 
    </style> 


</head> 

<body> 
    <div id="title"> 
     <p>Find the Bomb!</p> 
    </div> 

    <div id ="game"> 


     <div id="covered"> 
      <img id="box0" src="closed.png" onclick="choose(0);"> 
      <img id="box1" src="closed.png" onclick="choose(1);"> 
     </div> 

     <div id="filled"> 
      <img id ="bomb" class="bombonright" src="bomb .png"> 
      <img id="blank" class="blankonleft" src="empty.png"> 
     </div> 

     <div id="background"> 
     <div id="scores"> 2 </div> 
      <img id="backround"src="new background.png">  
     </div> 

     <div id="buttons"> 
     <button id="Restartbtn" onclick="start();">Restart</button> 
     <button id="Rulesbtn" onclick = "showrules();">?</button> 
     </div> 

     <div id="rules"> 
      <p> You awake to find yourself locked in this room with two boxes at your feet.</p> 
      <p> A voice comes over a speaker and states "Welcome, you have been chosen to take part in a little game. At your feet you will find two boxes. One is empty and the other contains a enough explosives to reduce you to dust. The aim of the game is simple find the bomb.</p> 
      <p> However, there are some rules</p> 
      <p> Firstly you must make a choice within 5 seconds , otherwise the bomb explodes. There is a timer that counts down so be ware<p> 
      <p> You may only choose one box </p> 
      <p> Choose correctly and you may advance to the next round <p> 
      <p> If you survive a round you will get a point ,once you have 5 you will be set free <p> 
      <p> However if you fail to find the bomb , you will lose a point. Once you score hits -5 , the bomb will detonat<p> 
      <p> The game begins as soon as you press close on this message, if you need to select it again press the "?" button<p> 

      <button onclick="hiderules();"> CLOSE </button> 
     </div> 

     <div id="feedback"> 
      You lost! <br>Fortunately this bomb was a fake! 
     </div> 
<div id="timer"> 
     <img src="timer.png"> 
    </div> 

     <div id="countdown"> 
      2:00 
     </div> 

     <div id="finder"> 
     fdafdsfa 
     </div> 

     <div id="new"> 
     2ffdaj 
     </div> 

    </div> 

    <script> 
     var findbomb=1; 
     var clickable = false; 
     var score = 0; 

     window.onload = start();findme();newscore(); 

     function findme() 
      {document.getElementById('finder').innerHTML = findbomb;} 

     function newscore() 
      {document.getElementById('new').innerHTML = score;}; 

     function start() 
      {score=0; 
      showscore(); 
      setup();}; 

     function showscore() 
      {document.getElementById('scores').innerHTML= score;}; 

     function hidebox() 
      {document.getElementById('box0').style.display = "block"; 
      document.getElementById('box1').style.display = "block";}; 

     function hidefeedback() 
      {document.getElementById('feedback').style.display = "none";}; 

     function showbfeedback() 
      {document.getElementById('feedback').style.display = "block"; 
      setTimeout(setup, 1000); 
      }; 

     function showrules() 
      {document.getElementById('rules').style.display = "block";}; 

     function hiderules() 
      {document.getElementById('rules').style.display = "none";}; 

     function play() 
      { findbomb = Math.floor(Math.random()*2); 

       if (findbomb == 0) 
       {document.getElementById('bomb').setAttribute("class", "bombonleft"); 
       document.getElementById('blank').setAttribute("class", "blankonright");} 

       else if (findbomb == 1) 
       {document.getElementById('bomb').setAttribute("class", "bombonright"); 
       document.getElementById('blank').setAttribute("class", "blankonleft");} 

      clickable=true; 

      }; 

     function setup() 
      {hidefeedback(); 
      hidebox(); 
      play();}; 

     function choose(num) 
      {if (clickable = true) 
       {document.getElementById('box'+num).style.display = "none"; 

        if(findbomb ==num) 
         {document.getElementById('feedback').innerHTML = "You Win"; score++;} 
        else if (findbomb != num) 
         {document.getElementById('feedback').innerHTML ="You lose, fortunately that one was a fake!";score--;}; 

        setTimeout(showbfeedback, 1000); 
        clickable= false; 
       } 
      } 


    </script> 
</body> 
</html> 
+0

那麼每一個開始一些地方.. :)你試過了,那就是重要的。在choose函數中,嘗試將其更改爲:{document.getElementById('feedback')。innerHTML =「You Win」;得分++; showscore()}' – tanjir

+0

坦吉爾謝謝你,你是一位聖人! –

回答

1

您需要設置window.onload功能。不要undefined

當你做window.onload = start();,你是調用start()立即並指派其返回值undefined)到window.onload - 這什麼都不做。

你想做的事之一:

window.onload = start; 

或:當你有一個這樣的問題

window.onload = function(){ 
    start(); 
}; 
1

所以,你應該是打印的期望值出在某些點,或更好,使用斷點,然後遍歷代碼。在這種情況下,只需在Chrome等瀏覽器中打開頁面,然後打開開發人員工具(Chrome中的f12)即可。然後,您設置一個斷點並逐步前進一步。

嗯,我現在看到您的評論,關於開發人員工具中沒有顯示任何內容。所以這意味着你需要回到原點來弄清楚爲什麼你的代碼沒有被執行,這與你設置的變量無關。

+1

嘿@MattC我是加利福尼亞州的MattC,在動漫中你有無可挑剔的味道,先生。因爲所有的MattCs都值得擁有,所以漲價了。 – zer00ne

0

得分未顯示,因爲它需要在html頁面上更新。

嘗試把這樣的事情在最後如果要是else子句:

document.getElementById('scores').innerHTML = ""+score;

這應該更新頁面上的得分。