jQuery Image Matching Game

by Nick Hulea

HTML

<div class="container">
    <div class="row">
        <div>
            <img src="http://lorempixel.com/100/170/sports/" alt="1" />
        </div>
        <div>
            <img src="http://lorempixel.com/100/170/abstract/" alt="3" />
        </div>
        <div>
            <img src="http://lorempixel.com/100/170/animals/" alt="3" />
        </div>
        <div>
            <img src="http://lorempixel.com/100/170/nightlife/" alt="2" />
        </div>
        <div>
            <img src="http://lorempixel.com/100/170/fashion/" alt="1" />
        </div>
        <div>
            <img src="http://lorempixel.com/100/170/cats/" 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 () {
    $("div.row div img").addClass('hidden');
    click();
});

function click() {

    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");

        console.log(count);

        $(this).children("img").addClass("selected");
        $(this).children("img").addClass('click' + count);

        cond1 = $('img').hasClass("selected");
        cond2 = $(this).children("img").hasClass("click0");
        //console.log(cond1, cond2);
        /*
        if (cond2) {
            setTimeout(function () {
                $(".selected").removeClass("selected");
                $(".click0").removeClass("click0");
                $(".click1").removeClass("click0");
            }, 250);
        }
        */
            setTimeout(function () {
                if (num == 2) {
                    num = 0;
                    if (id1 == id2 && !cond2) {
                        $(".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) {
           ...