Question

HTML5 Memory Game有一个JavaScript函数来检查图像匹配。无论何时进行第一次匹配，check（）函数都会停止文档选择其他图像以获得更多匹配。我应该如何在check（）函数中添加另一个参数以查找更多匹配项？

查看源代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> MEMORY </title>

<script>
    var clicks = 0; //counts how may picks have been made in each turn
    var firstchoice; //stores index of first card selected
    var secondchoice; //stores index of second card selected

    var match = 0; //counts matches made
    var backcard = "guess.jpeg"; //shows back of card when turned over

    var faces = []; //array to store card images
    faces[0] = 'image1.png';
    faces[1] = 'image2.png';
    faces[2] = 'image3.png';
    faces[3] = 'image3.png';
    faces[4] = 'image1.png';
    faces[5] = 'image2.png';

    function choose(card) {
            if (clicks == 2) {
                return;
            }
            if (clicks == 0) {
                firstchoice = card;
                document.images[card].src = faces[card];
                clicks = 1;
            } else {
                clicks = 2;
                secondchoice = card;
                document.images[card].src = faces[card];
                timer = setInterval("check()", 1000);
            }
        }
        /* Check to see if a match is made */

    function check() {
        clearInterval(timer); //stop timer
        if (faces[secondchoice] == faces[firstchoice]) {
            match++;
            document.getElementById("matches").innerHTML = match;
        } else {
            document.images[firstchoice].src = backcard;
            document.images[secondchoice].src = backcard;
            clicks = 0;
            return;
        }
    }
</script>
</head>

<body>
     <a href="javascript:choose(0)"><img src="guess.jpeg" width=200px height=200px /></a>

     <a href="javascript:choose(1)"><img src="guess.jpeg" width=200px height=200px /></a>

     <a href="javascript:choose(2)"><img src="guess.jpeg" width=200px height=200px /></a>

     <br>

     <a href="javascript:choose(3)"><img src="guess.jpeg" width=200px height=200px/></a>

    <a href="javascript:choose(4)"><img src="guess.jpeg" width=200px height=200px /></a>

    <a href="javascript:choose(5)"><img src="guess.jpeg" width=200px height=200px /></a>

    <br>

    <b style="font-size:40px;"> MATCHES :</b>
    <b style="font-size:60px;" id="matches"> 0 </b>

</body>

</html>

Answer 1

当用户做出正确选择时，您忘记重置点击次数：

function check() {
    clearInterval(timer); //stop timer
    clicks = 0;
    if (faces[secondchoice] == faces[firstchoice]) {
        match++;
        document.getElementById("matches").innerHTML = match;
    } else {
        document.images[firstchoice].src = backcard;
        document.images[secondchoice].src = backcard;
        return;
    }
}

将任何情况下的点击重置为0，以便用户可以继续播放：）

HTML5记忆游戏 - JavaScript功能

1 个答案: