西蒙说游戏的按钮响应问题答案

【问题标题】：Button response issues for a Simon Says game西蒙说游戏的按钮响应问题
【发布时间】：2020-04-01 11:57:09
【问题描述】：

我最近一直在开发一个西蒙说游戏，如果你点击正确的按钮，有 3 个，它会增加分数， 1) 绿色 1 2) 红色 2 3) 诡计

我注意到，当我运行游戏并单击相应的按钮时，只有一个会增加分数，而其他两个会从分数中减去（不管声明怎么说）。我不确定为什么会这样，并且想知道是否有人有任何见解）。我的想法是 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>

谢谢！

【问题讨论】：

标签： javascript if-statement button

【解决方案1】：

一个字太多了：var。在

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

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

【讨论】：