Simple Memory

This is a simple Memory example. If you select the same images both images be gray. If all images match, the cards get color red.

by scurrilus

HTML

<script src="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.js"></script>
<link rel="stylesheet" href="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.css">
<!--powered by SCURRILUS-->
<div id="scurrilusCopy"></div>
<script>scurrilusCopy();</script>
<!--end powered by SCURRILUS-->
<div class="code">
    <div class="container">
        <div class="1"></div>
        <div class="1"></div>
        <div class="2"></div>
        <div class="2"></div>
        <div class="3"></div>
        <div class="3"></div>
        <div class="4"></div>
        <div class="4"></div>
    </div>
</div>

CSS

div.container div {
    width:150px;
    height:150px;
    display: block;
    border:2px solid #000000;
    float: left;
}

.select1, .select2 {
    opacity: 0.5;
}

.complete {
 
}

JavaScript

var imagePath = "http://www.scurrilus.de/scurrilus-jsfiddle/memory/memory-";
var newMemImage;
console.log(imagePath);
$('div.container div').sort(function(){
    return Math.random()*10 > 5 ? 1 : -1;
}).each(function(){
   var $m = $(this),
   memImage = $m.attr("class");
   newMemImage = memImage
   $m.css('backgroundImage', 'url('+imagePath + memImage +'.jpg'+')').appendTo( $m.parent());
});

$('div.container div').click(function() { 
       if ($('div.container div').hasClass('select1')) {
           $(this).addClass('select2');
       } else {
           $(this).addClass('select1'); 
       }
    
       var newSelect1;
       var newSelect2;
       if ($('div.container div').hasClass('select2')) {
           var select1 = $('.select1').attr("class").split(" ")[0];
           var select2 = $('.select2').attr("class").split(" ")[0];
           var memoryLenght = $('div.container div').length;
           var tf = $('.container').children('.complete').length > memoryLenght-4;
           console.log(tf);
           newSelect1 = select1;
           newSelect2 = select2;
           
           if (tf == true) {
                setTimeout (function() {
              $('div.container div').css('background', '#cc0000');
                     }, 100);
           }
           
           if(newSelect1 == newSelect2) {
                //$('.' + newSelect1).animate({marginTop: '30px'}, 1000);
             $('.' + newSelect1).addClass('complete');
             $('.' + newSelect1).css('background', '#cccccc');
             $('div.container div').removeClass('select1');
             $('div.container div').removeClass('select2');
           } else {  
              
               setTimeout (function() {  
                 $('div.container div').removeClass('select1');
                 $('div.container div').removeClass('select2');
              }, 1000);
           }
       }
});