Question

好的，这是我的问题。我对javascript有点新意，所以请耐心等待。我没有在其他地方找到这个问题，实际上我认为这是我的逻辑，并没有对应我的意愿;-)

我正在用php和javascript设置记忆游戏。我的问题是，当我第一次执行clickCard函数时，它将变量firstClick设置为True，并使用它的innerHTML值并执行secondClick等如此之长，以至于如果猜测错误，则只有secondClick变为红色。这是因为我认为第一个参数是静态的（因此保存了firstClick的颜色值），我无法想出如何解决这个问题的解决方案。我尝试了不同的东西，比如创建条件，如if else（firstClick！= 0＆amp;＆amp; firstClick！= secondClick）{code}等。

任何可以帮助我的人？

这是我的代码：

var firstClick = new Boolean();
firstClick.toString();

var secondClick = new Boolean();
secondClick.toString();
function clickCard(elem){               

    if(firstClick == 0){
        firstClick = document.getElementById(elem.id).innerHTML;
                    elem.style.backgroundColor = "green";   
        //alert(firstClick);
        }

    else{

        secondClick = document.getElementById(elem.id).innerHTML;
        //alert(secondClick);
        elem.style.backgroundColor = "green";


            if(firstClick == secondClick){
                alert(firstClick +" equals "+ secondClick);
                firstClick = new Boolean();
                secondClick = new Boolean();
            }

            else {
                alert(firstClick + " equals not " + secondClick);
                firstClick = new Boolean();
                secondClick = new Boolean();
                document.getElementById(elem.id).style.backgroundColor="red";
            }   
    }
}

Answer 1

你永远不会告诉第一个元素变成红色。您需要将第一个单击的元素保存在变量中，并在设置第二个元素的同时进行设置。

请注意，你应该重新考虑一下你的逻辑。首先，您应该将游戏代码放在一个封闭处，并在那里生成棋盘，使其无法访问外部访问权限，这样人们就不会仅仅通过查看源代码来作弊。然后，当点击一张卡片时，更改其内容以显示该卡片的值，然后当您想要将卡片重新打开时再将其空白。

Answer 2

您的代码中存在多个问题。看看我的变化并尝试理解它们，它应该有效：

使用var bool = true/false;
不要将布尔值与dom-elements混合使用
将您的图块保存在单独的变量中
实际上将第一个图块的颜色设置为“红色”

代码：

var firstClick = true;
var piece1;
var piece2;

function clickCard(elem){               

    if(firstClick){
        piece1 = document.getElementById(elem.id);
        piece1.style.backgroundColor = "green";
        firstClick = false;  
    } else {

        piece2 = document.getElementById(elem.id);
        piece2.style.backgroundColor = "green";

        if(piece1.innerHTML == piece2.innerHTML){
            alert(firstClick +" equals "+ secondClick);
        } else {
            alert(firstClick + " equals not " + secondClick);
            piece1.style.backgroundColor="red";
            piece2.style.backgroundColor="red";
        }   
        firstClick = true;
    }
}

现在先进的做法是把它放到一个闭包中以保护你的“内部”值firstClick和piece1 / 2，但这是另一个故事;）

Answer 3

您正在为innerHTML类型的变量分配Boolean值。从这段代码中并不清楚。 Boolean对象表示两个值：“true”或“false”。此外，firstclick.toString()会返回变量firstclick的字符串值，而不会执行任何操作。

检查这是否符合您的意图。

var Clicked = true;
var First, Second;

function clickCard(elem){               

    if(Clicked){
        First = document.getElementById(elem.id);
        elem.style.backgroundColor = "green";   
        Clicked = false;
    } else {

        Second = document.getElementById(elem.id);
        elem.style.backgroundColor = "green";

        if(First.innerHTML == Second.innerHTML){
            alert(First.innerHTML +" equals "+ Second.innerHTML);
        } else {
            alert(First.innerHTML  + " equals not " + Second.innerHTML );
            First.style.backgroundColor="red";
            Second.style.backgroundColor="red";
        }   
        First = "";Second="";
        Clicked = true;
    }
}

有人想帮我解决这个javascript逻辑吗？

3 个答案: