Memory Game Programming Tutorial

Wednesday, 3 February 2016

Memory Game Programming Tutorial

<html> <head> <style> div#memory_board{ background:#CCC; border:#999 1px solid; width:800px; height:540px; padding:24px; margin:0px auto; } div#memory_board > div{ background: url(tile_bg.jpg) no-repeat; border:#000 1px solid; width:71px; height:71px; float:left; margin:10px; padding:20px; font-size:64px; cursor:pointer; text-align:center; } </style> <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; Array.prototype.memory_tile_shuffle = function(){ var i = this.length, j, temp; while(--i > 0){ j = Math.floor(Math.random() * (i+1)); temp = this[j]; this[j] = this[i]; this[i] = temp; } } function newBoard(){ tiles_flipped = 0; var output = ''; memory_array.memory_tile_shuffle(); 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; } function memoryFlipTile(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 cleared if(tiles_flipped == memory_array.length){ alert("Board cleared... generating new board"); document.getElementById('memory_board').innerHTML = ""; newBoard(); } } else { function flip2Back(){ // Flip the 2 tiles back over var tile_1 = document.getElementById(memory_tile_ids[0]); var tile_2 = document.getElementById(memory_tile_ids[1]); tile_1.style.background = 'url(tile_bg.jpg) no-repeat'; tile_1.innerHTML = ""; tile_2.style.background = 'url(tile_bg.jpg) no-repeat'; tile_2.innerHTML = ""; // Clear both arrays memory_values = []; memory_tile_ids = []; } setTimeout(flip2Back, 700); } } } } </script> </head> <body> <div id="memory_board"></div> <script>newBoard();</script> </body> </html>