Edit on
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Memory Game</title>
    <meta name="msapplication-tap-highlight" content="no" /> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css"> 
</head>
<body>
  
<div class="container">
  <div class="score_container">
    <span id ="tiles">Tiles: <b></b></span> 
    <span id = "score">Score: <b>0</b></span>
  </div>
  <div class="next_level_container">
   <span class = "loading_message"></span><span id="loading_level"></span>
   <img src="http://ricardotormo.es/demos/memory-game/ajax_loading.gif" alt="Loading next level">
  </div>
  <div class="grid">
    <ul>
    </ul>
  </div>

  
  <div class="test_your_memory">
    <h1>Super<br/>Memory</h1>
    Test your Memory. <br/>
    Remember where the tiles <br/>appeared.
  </div>
  <div class="start">Play</div>

  <div class="tiles_that_appeared"></div>

</div>
</body>
</html>
html {
  background-image: repeating-radial-gradient(#fcf8bf, #f4ec7f );
  width:100%;
  height:100%;
  margin:0;
}

body{
  text-align:center;
  margin:0;
  font-family:arial;
}

.container{
  /*overflow:hidden;*/
  text-align:center;
  display:inline-block;
  position:relative;
  box-shadow:0 0 0 5px #fff;
  border-bottom-left-radius:3px;
  border-bottom-right-radius:3px;
  padding:0 22px 22px 22px;
}

.grid ul{
  list-style-type:none;
  display:inline-block;
  padding:0;
  margin:0;
}
.grid li{
  /*width:40px;
  height:40px;*/
  background:#fff;
   display:block;
  float:left;
  margin:1px;
  cursor:pointer;
}

.score_container{
  width:252px;
  height:40px;
  background:#fff;
  margin-bottom:42px;
  border-bottom-right-radius: 53px;
border-bottom-left-radius: 53px;
}

.score_container span{
  color:#7f3b07;
  font-family:helvetica;
  font-size:13px;
  font-weight:bold;
  padding:0 12px;
  line-height:35px;
}

.score_container span b{
  color:#0191c1;
}

.clicked{
  background:#36a517 ! important;
}

.error{
  background-color:#ea1c1c ! important;
}

.start{
  margin:0 auto;
  max-width:150px;
  background:linear-gradient(#36a517 , #358e19);
  padding:12px 0;
  border-radius:3px;
  color:#fff;
  font-family:helvetica;
  font-size:16px;
  font-weight:bold;
  bottom:30px;
  width:200px;
  margin-top:44px;
  cursor:pointer;
}

.next_level_container{
  width:180px;
  height:auto;
  background:#fff;
  border-radius:6px;
  margin:0 auto;
  color:#7f3b07;
  display:none;
  font-weight:bold;
  font-size:13px;
  box-sizing:border-box;
  padding:22px;
}

.next_level_container #loading_level{
  color:#0191c1;
}

.next_level_container img{
  margin-top:22px;
  display:block;
  margin:0 auto;
  margin-top:22px;
}

#game_over{
  position:absolute;
  top:0;
  width:260px;
  height:350px;
  background:#fff;
  z-index:999;
}

.tiles_that_appeared, .test_your_memory{
  color:#7f3b07;
}

.test_your_memory h1{
  font-size:3em;
  margin-bottom:12px;
}

.tiles_that_appeared{
  margin-top:22px;
}
/**********************************
 Object Game (work in progress)
**********************************/
function Game(el, level, TileSize){

  	this.score = 0;
	this.el = el;
	this.level = level;
  	this.maxArraySize = 6;
	this.arraySize = this.level >=this.maxArraySize ? this.maxArraySize*this.maxArraySize : this.level * this.level;
	this.maxLevel = 18;
	this.tries = 1;
	this.soundAppaluse =  new Audio("http://ricardotormo.es/demos/memory-game/applause.mp3");
	this.soundSuccess = new Audio("http://ricardotormo.es/demos/memory-game/beep.mp3"); 
	this.soundFail =  new Audio("http://ricardotormo.es/demos/memory-game/hurt.mp3");
	this.soundYouLoose =  new Audio("http://ricardotormo.es/demos/memory-game/you_loose.mp3");
	
	/**********************************
	 * Draw x number of tiles 
	 * (where x is equal to arraySize) 
	 * using li elements for displaying
	 * them.
	 **********************************/
	this.CreateTiles = function(){
	    el.find('li').remove();
		for (var i=0; i<this.arraySize; i++)
		{
			var brick = document.createElement('li');
			this.el.append('<li></li>');
		}

		//Setting Board Dimensions
		this.el.width(this.level<=this.maxArraySize ? TileSize * this.level + this.level * 2 : TileSize * this.maxArraySize + this.maxArraySize * 2);
		this.el.find('li').width(TileSize);
		this.el.find('li').height(TileSize);
	};
	    
	/* ************************************
	 * Create a random Matrix whose values
	 * belong to {0,1}. There are the same
	 * number of {1} than the level value. 
	 * ***********************************/
	this.CreateBooleanMatrix = function(){
	    var matrix = [];
	    var totalOnes = 0;
	    for (var i=0; i<this.arraySize; i++)
	    {
	        if(totalOnes < this.level)
	        {
	            matrix.push(1);
	            totalOnes++;
	    	}
	        else{
	            matrix.push(0);
	        }
	    }//close for
	    for(var j, x, i = matrix.length; i; 
	    	j = Math.floor(Math.random() * i), 
	    	x = matrix[--i], 
	    	matrix[i] = matrix[j], 
	    	matrix[j] = x);
	    return matrix;
	};

	this.ShowLevelContainer = function(time){
		if(typeof time == "undefined"){
			time=1000;
		}

		if(this.tries !== this.maxLevel - 3){
		    $('.next_level_container .loading_message').text('Loading level: ');
		    $('.next_level_container #loading_level').text(this.level -2);
		    $('.next_level_container img').css('display','block');
		}

		else{
		    $('.next_level_container .loading_message').text('Your total score is: ');
		   	$('.next_level_container #loading_level').text(this.score);
		    $('.next_level_container img').css('display','none');
		}
		
		var timer_next_level = setTimeout(function(){
				$('.next_level_container').css('display','block');
				this.el.css('display','none');
			},time);

	};
  

	this.SelectionController = function(a, jqel, i){
		console.log(this.tries);
		var self = this;
	    if(a[i]==1){
	    	this.soundSuccess.cloneNode(true).play();

        	if(this.comparisonArray[i]==0){
        		this.score+=1;
        	}

        	this.el.parent().parent().find('#score b').text(this.score);
        	jqel.addClass('clicked');

	    	this.comparisonArray[i]=1;
	    	console.log(this.comparisonArray);

	    	if(this.comparisonArray.toString() == a.toString()){
	    		$('.tiles_that_appeared').text('');
        		this.score+=this.arraySize;
        		this.el.parent().parent().find('#score b').text(this.score);
	    		this.el.find('li').unbind();
	      		this.level+=1;
	      		this.tries+=1;

	      		this.soundAppaluse.play();
	      		this.ShowLevelContainer();

	      		var timer = setTimeout(function(){
			    	self.Redraw();
			  	}, 5000);
	      	}
	    }
	    else{
	    	$('.tiles_that_appeared').text('');
	    	this.soundFail.cloneNode(true).play();
	    	jqel.addClass('error');
	    	this.el.find('li').unbind();
	    	this.tries +=1;
	    	this.level = this.level !== 3 ? this.level - 1 : 3;
	    	this.ShowGoodValues(a);

	    	this.soundYouLoose.play();
	    	this.ShowLevelContainer(2000);

	    	var timer2 = setTimeout(function(){
			    self.Redraw();
			}, 3000);
	    }
	};
	  
	this.ShowGoodValues = function(a){
	    for(var i=0; i<a.length; i++){
	    	if(a[i]==1){
	          this.el.find('li').eq(i).addClass('clicked');
	        }
	    }

	    setTimeout(function(){
	    this.el.find('li').removeClass('clicked');
	        $('.tiles_that_appeared').text('Click the tiles that appeared');
	}, 3000);
	};   

	this.Start = function(){
		var that=this;
		$('.start').click(function(){
			that.tries=1;
			that.Redraw();
		});
	}

	this.Redraw = function(){
		$('.tiles_that_appeared').text('');
		var that = this;
		this.el.css('display','inline-block');
		$('.next_level_container').css('display','none');

		if(this.tries !== this.maxLevel - 3){
			this.arraySize = this.level >=this.maxArraySize ? this.maxArraySize*this.maxArraySize : this.level * this.level
	        this.el.parent().parent().find('#tiles b').text(this.level);
		  	this.comparisonArray = Array.apply(null, new Array(this.arraySize)).map(Number.prototype.valueOf,0);
		  	this.CreateTiles();
		  	var booleanMatrix = this.CreateBooleanMatrix();
		  	this.ShowGoodValues(booleanMatrix);

			setTimeout(function(){
				this.el.find('li').bind("mousedown touchstart" , function() {
				// `this` is the DOM element that was clicked
					game.SelectionController(booleanMatrix,$(this),$(this).index());
				  	console.log('click');
				});
			},3000);

		  	$('.start').css('display','none');
		  	$('.test_your_memory').css('display','none');
		}
		else if(this.tries == this.maxLevel - 3){
			this.level = 3;
			$('.test_your_memory').css('display','block');
			$('.start').css('display','block');
			that.el.css('display','none');
			$('.next_level_container').css('display' , 'none');
		}
		else if(this.tries == 1){
			$('.score_container').css('display','none');
		}
		else{
			$('.start').css('display','none');
		}
	};
}


var el = $('.grid ul');
var game = new Game(el,3, 40);
game.Start();
Rerun