JSFiddle - React, Tailwind, and code Playground
HTML
<script>
// Scripted By Adam Khoury in connection with the following video tutorial:
// http://www.youtube.com/watch?v=c_ohDPWmsM0
var memory_array = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J','K','K','L','L'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
function memory_tile_shuffle(array){
var i = array.length, j, temp;
while(--i > 0){
j = Math.floor(Math.random() * (i+1));
temp = array[j];
array[j] = array[i];
array[i] = temp;
}
return array;
}
/*We need a function which will generate the board for us. The value of each div element is set in memory_array[].*/
function newBoard(){
tiles_flipped = 0;
var output = '';
memory_array=memory_tile_shuffle(memory_array);
console.log("memory_array "+memory_array);
for(var i = 0; i < memory_array.length; i++){
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
}
document.getElementById('memory_board').innerHTML = output;
console.log(output);
}
function imageChange(){
document.getElementById("memory_board").style.background="url(http://static.wixstatic.com/media/70a85e_5fe67c8d5d8e4c10bd032a94eff6dc1f.png/v1/fill/w_71,h_71,al_c,usm_0.50_1.20_0.00/70a85e_5fe67c8d5d8e4c10bd032a94eff6dc1f.png)";
}
/*We need a function that will implement the turining of the flipping of the boards.*/
function memoryFlipTile(tile,val){
//console.log(tile + ", " +val);
if(tile.innerHTML == "" && memory_values.length < 2){
tile.style.background = '#FFF';
tile.innerHTML = val;
if(memory_values.length == 0){
memory_values.push(val);
memory_tile_ids.push(tile.id);
} else if(memory_values.length == 1){
memory_values.push(val);
memory_tile_ids.push(tile.id);
if(memory_values[0] == memory_values[1]){
tiles_flipped += 2;
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
// Check to see if the whole board is...
CSS
<style type="text/css">
div#memory_board{
background:#CCC;
border:#999 1px solid;
width:800px;
height:540px;
padding:24px;
margin:0px auto;
}
div#memory_board > div{
background: url(http://i.stack.imgur.com/ogHjV.png) no-repeat center;
border:#000 1px solid;
width:71px;
height:71px;
float:left;
margin:10px;
padding:20px;
font-size:64px;
cursor:pointer;
text-align:center;
}
</style>