Simon Says游戏的按钮响应问题



我最近一直在开发一款Simon says游戏,如果你点击正确的按钮,它会增加分数,1( 绿色12( 红色23( 特技

我注意到,当我运行游戏并点击适当的按钮时,只有一个会添加到分数中,而其他两个会从中减去(不管声明怎么说(。我不确定为什么会这样,我想知道是否有人有任何见解(。我的想法是if函数似乎与生成的新语句不相关。

任何建议都将不胜感激,

var answers = [
"Simon says click red !", 
"Simon says click green !",
"Simon says click 1 !", 
"Simon says click 2 !", 
"Click green",
"Click red", 
"Click 1", 
"Click 2!"
];
var score = 0;
var total = document.getElementById("score");
var statement  = document.getElementById("instruct");
var randomStatement = answers[Math.floor(Math.random() * answers.length)];
function refresh(){
var randomStatement = answers[Math.floor(Math.random() * answers.length)];
statement.innerHTML = randomStatement;
}
function pressTrick(){
if(randomStatement === "Click green" || randomStatement === "Click red" || randomStatement === "Click 1" || randomStatement === "Click2!"){
score++;
total.style.color = "green";
total.innerHTML = "Total score: " + score;
setTimeout(refresh,900);
} else {
total.style.color = "red";
score--;
total.innerHTML = "Total score: " + score;
setTimeout(refresh,900);

}
}
function pressRed(){
if(randomStatement === "Simon says click red !" || randomStatement === "Simon says click 2 !"){
score++;
total.style.color = "green";
total.innerHTML = "Total score: " + score;
setTimeout(refresh,900);    
}  else {
total.style.color = "red";
score--;
total.innerHTML = "Total score: " + score;
setTimeout(refresh,900);

}}
function pressGreen(){
if(randomStatement === "Simon says click 1 !" || randomStatement === "Simon says click green !"){
score++;
total.style.color = "green";
total.innerHTML = "Total score: " + score;
setTimeout(refresh,900);
}   else {
total.style.color = "red";
score--;
total.innerHTML = "Total score: " + score;
setTimeout(refresh,900);
}}
function  start(){
var i = 60;
var count = setInterval(timer,1000);
refresh();

function timer() {
var display = document.getElementById("timer");
var finished = document.getElementById("heading");

if(i < 1){
clearInterval(count);
finished.innerHTML = "Game Over! Your final Score is : " + score;
display.style.color = "red";
display.style.fontWeight = "bold";
document.body.style.backgroundColor = "black";
} else if(i <= 10) {
i--;
display.style.color = " red";
display.style.fontWeight = "bold";
display.innerHTML =  i + " Seconds Left";
} else  {
i--;
display.style.color = "green";
display.style.fontWeight = "bold";
display.innerHTML =  i + " Seconds Left";  
}}}
<html>
<head>
<title> Simon Says! </title>
<link rel = "stylesheet" href = "simonsays.css"/>
</head>
<body>

</br>
<h1> Test Your Reflexes! </h1>
<div id = "heading"; class = "h2"> Click on Simon to Begin! </div>
</br> 
<img src = "boy.jpg" onclick = "start()"; onclick = "timer()"; onclick = "returnStatement";/>
</br>
<div id = "instruct" class="statement"></div>
</br>
<div class = "align">
<input type = "button" class = "button2" id = "button2" value = "1" onclick = "pressGreen()"; ></input> 
<input type = "button" class = "button" id = "button" value = "2" onclick = "pressRed()"; ></input>
<input type = "button" class = "button3" id = "button3 " value = "Trick" onclick = "pressTrick()";></input>
</div>
</br>
<div id = "score" class = "score"><b> Score: </b></div>
<div id = "timer" class = "timer"><b> Time left: </b></div>
<script src = "simonsays.js"></script>
</body>
</html>
非常感谢。

只有一个词太多了:var。在中

function refresh(){
var randomStatement = answers[Math.floor(Math.random() * answers.length)];
statement.innerHTML = randomStatement;
}

var导致定义新的局部变量randomStatement,而全局randomStatement保持不变,因此程序其余部分中的所有比较都使用randomStatement的初始值,而不是刷新值。将var放在此处,它将按预期工作。

最新更新