2015-12-10 44 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;

这应该更新页面上的得分。