我使用變量創建了一個基本分數計數器。在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>
那麼每一個開始一些地方.. :)你試過了,那就是重要的。在choose函數中,嘗試將其更改爲:{document.getElementById('feedback')。innerHTML =「You Win」;得分++; showscore()}' – tanjir
坦吉爾謝謝你,你是一位聖人! –