HTML5 Memory Game - JavaScript function

Question

HTML5 Memory Game has a JavaScript function to check image matches. Whenever the first match is made, the check() function stops the document from selecting other images for more matches. How should I add another parameter to the check() function to look for more matches?

Check out the source code:

<!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>

score 1 · Accepted Answer · answered Mar 29 '15 at 13:45

You just forgot to reset clicks when user made a correct choice:

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;
    }
}

reset clicks in any case to 0, so user can continue playing :)

HTML5 Memory Game - JavaScript function

1 Answers1