<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.mainboardClass
{
margin:0px auto;
width:800px;
height:540px;
background-color:#ccc;
padding:24px;
border:dashed;
}
div#minboard>div {
background: url(Images/Untitled123.png) no-repeat;
margin: 0px auto;
text-align: center;
margin: 10px;
padding: 20px;
width: 71px;
height: 71px;
cursor: pointer;
text-align: center;
border: thin;
float:left;
font:24px;
}
</style>
<script type="text/javascript">
//Fisher Yates Shuffle Algorithm
var arr = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I'];
var memory_values_array = [];
var memory_values_id = [];
var tilesFliped = 0;
Array.prototype.shuffle = function () {
var i = arr.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() {
var adddivs = '';
arr.shuffle();
for (var i = 0; i < arr.length; i++) {
//Adds div dynamically to the array lenth
adddivs += '<div id="title_' + i + '" onclick=" pageflip(this, \''+arr[i]+'\'); "></div>';
}
document.getElementById('minboard').innerHTML = adddivs;
}
function pageflip(ids,tileValue)
{
//Check the tile is empty
if(ids.innerHTML=="" && tileValue.length < 2)
{
ids.style.color = '#FFF';
//Assign the value to the tile
ids.innerHTML = tileValue;
ids.style.background = 'URL() no-repeat';
//push the first tile value into the array
if (memory_values_array.length == 0) {
memory_values_array.push(tileValue);
memory_values_id.push(ids.id);
}
//If 2nd tile is clicked
else if (memory_values_array.length == 1 )
{
//Push the value in "memory_values_array"
//Push the dive in "memory_values_id"
memory_values_array.push(tileValue);
memory_values_id.push(ids.id);
//if both values selected matches then
if(memory_values_array[0]==memory_values_array[1])
{
tilesFliped = tilesFliped + 2;
memory_values_array=[];
memory_values_id = [];
//New board is generated if all tiles are successfully mapped
if(tilesFliped==arr.length)
{
clearTimeout(timer);
alert("Board Cleared Take this as Bonus");
newboard();
}
}
else {
//If both clicked tiles does not match then Empty the array
//Change the back ground color of the tiles
function ifNothingMatches() {
var id1 = document.getElementById(memory_values_id[0])
var id2 = document.getElementById(memory_values_id[1])
id1.innerHTML = "";
id1.style.background = 'URL(Images/Untitled123.png) no-repeat';
id2.innerHTML = "";
id2.style.background = 'URL(Images/Untitled123.png) no-repeat';
memory_values_array = [];
memory_values_id = [];
}
setTimeout(ifNothingMatches,700)
}
}
}
}
</script>
</head>
<body>
<div id="minboard" class="mainboardClass"></div>
<script>newboard();
</script>
</body>
</html>This code snippet for Memory Game using JavaScript.
