nature hunt matching game

by Nick Hulea

HTML

<div class="container">
    <div class="row">
        <div>
            <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/sunflower_1.jpg" alt="1" />
        </div>
        <div>
            <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/sunflower_1.jpg" alt="3" />
        </div>
        <div>
            <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/sunflower_1.jpg" alt="3" />
        </div>
        <div>
            <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/sunflower_1.jpg" alt="2" />
        </div>
        <div>
            <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/sunflower_1.jpg" alt="1" />
        </div>
        <div>
            <img src="http://stage.nhm.org/nature/sites/all/themes/nature/img/nature_hunt/sunflower_1.jpg" alt="2" />
        </div>
    </div>
</div>

CSS

div.container, div.row, form {
    clear: both;
}
div.row > div {
    position: relative;
    float: left;
    width: 100px;
    height: 170px;
    padding: 30px;
    margin: 10px;
    vertical-align: bottom;
}
div.row > div > img {
    display: inline-block;
    position: absolute;
    width: 100px;
    bottom: 30px;
    padding:8px;
}
.visible {
    visibility: visible;
}
.hidden {
}
.done {
    visibility: visible;
}
.cover {
    height:100%;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:-9999;
}
.row img {
    opacity:1;
    padding:8;
}
.scoreboard {
    float: left;
    margin: 10px;
    font-family: sans-serif;
    margin-left: 50px;
    background: cornflowerblue;
    color: #fff;
    padding: 5px 31px 5px 10px;
    border-radius:5px;
}
.scoreboard span {
}
form {
    float:left;
}
.playagain {
    float: left;
    margin: 10px;
    font-family: sans-serif;
    margin-left: 50px;
    background: cornflowerblue;
    color: #fff;
    padding: 7px 10px 7px 10px;
    border-radius: 5px;
    border: none;
}
.selected {
    background-color:#8bb611;
}
.correct {
    z-index:-10;
    background-color:#00c3ea;
}

JavaScript

var score = 0;
var moves = 0;
var num = 0;
var cond;

$(function () {
    match();
});

function match() {
    var boxes = $(".row img").size();
    $(".row div").click(function () {
        moves++;
        $(".totalmoves").html(moves);
        $(".cover").css({
            "z-index": "9999"
        });
        var count = num++;
        var id1 = $("img.selected").attr("alt");
        var id2 = $(this).children("img").attr("alt");
        $(this).children("img").addClass("selected");
        $(this).children("img").addClass('click' + count);
        cond = $(this).children("img").hasClass("click0");
        setTimeout(function () {
            if (num == 2) {
                num = 0;
                if (id1 == id2 && !cond) {
                    $(".selected").addClass("correct");
                    $(".selected").removeClass("selected");
                    $(".click0").removeClass("click0");
                    $(".click1").removeClass("click1");
                    score = score + 2;
                    boxes = boxes - 2;
                    if (boxes === 0) {}
                    $(".yourscore").html(score);
                } else {
                    $(".selected").css({
                        "padding": "8"
                    });
                    $(".selected").removeClass("selected");
                    $(".click0").removeClass("click0");
                    $(".click1").removeClass("click1");
                    if (score > 1) {
                        score = score - 0.5;
                        $(".yourscore").html(score);
                    }
                }
            }
        }, 250);
        $(".cover").css({
            "z-index": "-9999"
        });
    });
}