Mix and Match Game

Mix and Match made purely with JQuery, HTML, and CSS

by tjnicolaides

HTML

<ul id="match-game">
<li id="one" class="match-btn"></li>
<li id="two" class="match-btn"></li>
<li id="three" class="match-btn"></li>
<li id="four" class="match-btn"></li>
</ul>

CSS

body {background: #000;}
#match-game { margin: 0; overflow: hidden; }
#match-game li { background: #fff url(http://www.wmgk.com/Pics/Contests/franklin-institute/dinosaurs-sprite-744x2000.jpg) 0 -2000px no-repeat; display: inline-block; list-style: outside none none; float: left; width:290px; height: 200px; cursor:pointer;}
#match-game li#three { clear:left; }

#match-game.finished li {cursor:default;}

#one.t-rex { background-position: 0 0; }
#two.t-rex { background-position: -290px 0; }
#three.t-rex { background-position: 0 -200px; }
#four.t-rex { background-position: -290px -200px; }

#one.triceratops { background-position: 0 -450px; }
#two.triceratops { background-position: -290px -450px; }
#three.triceratops { background-position: 0 -650px; }
#four.triceratops { background-position: -290px -650px; }

#one.raptor { background-position: -50px -900px; }
#two.raptor { background-position: -340px -900px; }
#three.raptor { background-position: -50px -1100px; }
#four.raptor { background-position: -340px -1100px; }


#one.stegosaurus { background-position: 0 -1400px; }
#two.stegosaurus { background-position: -290px -1400px; }
#three.stegosaurus { background-position: 0 -1600px; }
#four.stegosaurus { background-position: -290px -1600px; }

span.error { background: #FFEDED; border: 1px solid #FF3300; display: block; padding: 10px; margin: 5px; }
span.correct { color: #32D130; font-weight: bold; margin: 0 5px; }
div#congrats { background: #96140D; border: 2px solid #963B0D; margin: 10px; padding: 10px; }

JavaScript

function swapClasses(elem) {
    $(elem).removeClass("t-rex triceratops raptor stegosaurus").addClass(dinosaurs[Math.floor(Math.random() * dinosaurs.length)]);
}

function stopClasses(interval) {
    clearInterval(interval);
    checkMatches();
}

var dinosaurs = ["t-rex", "triceratops", "raptor","stegosaurus"];
var dinos = $.extend(true, [], dinosaurs);
var length = dinos.length;

 $(document).ready(function() {

//Initiate Match Game
for (var i=0; i<length ; i++) {
    //Select and Set Random Value from Dino Array
    var rnd = Math.floor(Math.random() * dinos.length);
    //Set and Remove the randomly selected value from original array
    var value = dinos.splice(rnd,1)[0];

    switch (i) {
        case 0:
            $('#match-game li#one').addClass(value);
            break;
        case 1:
            $('#match-game li#two').addClass(value);
            break;   
        case 2:
            $('#match-game li#three').addClass(value);
            break;       
        case 3:
            $('#match-game li#four').addClass(value);
            break;    
    }
}

    $("li.match-btn").bind("click", function() {
        var timer = Math.floor(Math.random() * (2100 - 1500 + 1) + 1500);
        interval = setInterval(swapClasses, 100, $(this));
        timeout = setTimeout(stopClasses, timer, interval);
    });

});


function checkMatches() {
    var tRex = $(".t-rex").length;
    var triceratops = $(".triceratops").length;
    var raptor = $(".raptor").length;
    var stegosaurus = $(".stegosaurus").length;
    if (tRex >= 3) {
        setMatch("t-rex", tRex);
    } else if (triceratops >=3) {
        setMatch("triceratops", triceratops);
    } else if (raptor>=3) {
        setMatch("raptor", raptor);
    } else if (stegosaurus >=3) {
        setMatch("stegosaurus", stegosaurus);
    } else {
        $(".match-btn").css({"border": "none"});
    }
    
}

function setMatch(dinosaur, count) {
    $("." + dinosaur).css({"border": "1px solid green"});
   ...