-
Notifications
You must be signed in to change notification settings - Fork 0
/
memory_match.html
131 lines (111 loc) · 3 KB
/
memory_match.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>Memory in JS</title>
<style>
div#board{
background:#CCC;
border:#999 1px solid;
width:800px;
height:540px;
padding:24px;
margin:0px auto;
}
div#board > div {
background: url(images/square_tile_design.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>
</head>
<body>
<div id="board"></div>
<script>
// card faces
var cardArray = ['a','a','b','b','c','c','d','d','e','e','f','f','G','G','H','H','I','I','J','J','K','K','L','L'];
// used to compare card face values
var cardValues = [];
var cardIDs = [];
var tilesFlipped = 0;
function newBoard(){
tilesFlipped = 0;
var output = '';
var shuffledCards = shuffle(cardArray);
for(var i = 0; i < shuffledCards.length; i++){
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+shuffledCards[i]+'\')"></div>';
}
document.getElementById('board').innerHTML = output;
}
function shuffle(array) {
var counter = array.length;
var temp;
var index;
while (counter) {
index = Math.floor(Math.random() * counter);
counter--;
// swap
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
}
function memoryFlipTile(tile,val){
if(tile.innerHTML == "" && cardValues.length < 2) {
tile.style.background = '#FFF';
tile.innerHTML = val;
if(cardValues.length == 0) {
cardValues.push(val);
cardIDs.push(tile.id);
} else if(cardValues.length == 1) {
cardValues.push(val);
cardIDs.push(tile.id);
// check if cards match
if(checkMatchingPair()) {
// Check to see if the whole board is cleared
if(checkClear()) {
newBoard();
}
} else {
setTimeout(flipBack, 700);
}
}
}
}
function flipBack() {
var tileA = document.getElementById(cardIDs[0]);
var tileB = document.getElementById(cardIDs[1]);
tileA.style.background = 'url(images/square_tile_design.jpg) no-repeat';
tileA.innerHTML = "";
tileB.style.background = 'url(images/square_tile_design.jpg) no-repeat';
tileB.innerHTML = "";
cardValues = [];
cardIDs = [];
}
function checkMatchingPair() {
if(cardValues[0] == cardValues[1]) {
tilesFlipped += 2;
// Clear both arrays
cardValues = [];
cardIDs = [];
return true;
}
}
function checkClear() {
if(tilesFlipped == cardArray.length) {
alert("All finished!");
document.getElementById('board').innerHTML = "";
return true;
}
}
newBoard();
</script>
</body>
</html>