Memory Matrix

by Vladimir

HTML

<input value="3" /><button>start</button>
<div></div>

CSS

div {
    border: 1px solid darkblue;
    overflow: hidden;
    -webkit-transition: all 500ms ease;
    margin: 0 auto;
}
span {
	width: 40px;
	height: 40px;
	background: darkblue;
	display: block;
	float: left;
    margin: 2px;
}
.ch {
	background: cyan;
}
.solve .ch {
    background: darkblue;
    -webkit-transition: all 200ms ease;
    cursor: pointer;
}
.solve .opened,
.opened {
  background: cyan;   
}
.solve .bad,
.bad {
  background: crimson;   
}

JavaScript

var matrix = {
    level: 3,
    trailsOpened: 0
};

function gen() {
	var html = '',
		trails = matrix.level,
		field = getField(trails),
        total = field.w * field.h,
		filled = 0,
		filledArr = [];
    
    matrix.trailsOpened = 0;

	$('div').css('width', 44*field.w);
	for(var i = 0; i < field.h; i++) {
		for(var j = 0; j < field.w; j++) {
            var c = ''+j+i;
			html += '<span data-c="' + c + '"></span>';
		}
	} 
	$('div').html(html);
    $('div').css('width', 44*field.w);
    $('div').css('height', 44*field.h);
    setTimeout(function() {
        
	while(filledArr.length < trails) {
		for(var i = 0; i < field.h; i++) {
			for(var j = 0; j < field.w; j++) {
				if(trails/total > Math.random() && filledArr.length < trails) {
                   var c = ''+j+i; if((':'+filledArr.join(':')+':').indexOf(c) == -1) {
					    filledArr.push(c);
					    $('span[data-c="' + c + '"]').addClass('ch');
                    }
				}
			}
		} 
	}
    console.log('trails:' + trails + '; filled: ' + filled);
    console.log(filledArr);
    $('div').removeClass('solve');
    setTimeout(function() {
      $('div').addClass('solve');  
    },1000);
    },1000);
}

function getField(trails) {
	var size = {w:3, h: 3};
	if(trails > 7) {
		size.h = 6;
	} else {
		size.h = Math.ceil(trails/2) + 1;
	}
	if(trails >27) {
		size.w = 10;
	} else if(trails > 24) {
		size.w = 9;
	} else if(trails > 21) {
		size.w = 8;
	} else if(trails > 18) {
		size.w = 7;
	} else if(trails > 7) {
		size.w = 6;
	} else if(trails > 5) {
		size.w = 5;
	} else if(trails > 3) {
		size.w = 4;
	}

	return size;
}
function start() {
     matrix.level = $('input').val();
    gen();
}

$('button').click(start);

$('span').live('click', function() {
    if($('div').hasClass('solve') && !$(this).hasClass('opened')) {
        if($(this).hasClass('ch')) {
            $(this).addClass('opened');
            matrix.trailsOpened++;
            if(matrix.level == matrix.trailsOpened) {
               ...