-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
183 lines (162 loc) · 4.66 KB
/
index.js
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
// Create an array of cards with card objects
let cards = [
{
id: 'card1',
cardFrontImage: 'assets/images/memoryCards/accessible-icon-brands.svg'
},
{
id: 'card2',
cardFrontImage: 'assets/images/memoryCards/balance-scale-right-solid.svg'
},
{
id: 'card3',
cardFrontImage: 'assets/images/memoryCards/cocktail-solid.svg'
},
{
id: 'card4',
cardFrontImage: 'assets/images/memoryCards/heart-solid.svg'
},
{
id: 'card5',
cardFrontImage: 'assets/images/memoryCards/praying-hands-solid.svg'
},
{
id: 'card6',
cardFrontImage: 'assets/images/memoryCards/code-solid.svg'
},
{
id: 'card7',
cardFrontImage: 'assets/images/memoryCards/coffee-solid.svg'
},
{
id: 'card8',
cardFrontImage: 'assets/images/memoryCards/gem-regular.svg'
},
{
id: 'card9',
cardFrontImage: 'assets/images/memoryCards/accessible-icon-brands.svg'
},
{
id: 'card10',
cardFrontImage: 'assets/images/memoryCards/balance-scale-right-solid.svg'
},
{
id: 'card11',
cardFrontImage: 'assets/images/memoryCards/cocktail-solid.svg'
},
{
id: 'card12',
cardFrontImage: 'assets/images/memoryCards/heart-solid.svg'
},
{
id: 'card13',
cardFrontImage: 'assets/images/memoryCards/praying-hands-solid.svg'
},
{
id: 'card14',
cardFrontImage: 'assets/images/memoryCards/code-solid.svg'
},
{
id: 'card15',
cardFrontImage: 'assets/images/memoryCards/coffee-solid.svg'
},
{
id: 'card16',
cardFrontImage: 'assets/images/memoryCards/gem-regular.svg'
}
// All card images provided by Font Awesome's glorious Free License. Thank you for giving back.
]
let flipped = false
let firstCard, secondCard
// alert('You have the memory of an elephant. You win, Congrats!) when all eight matches are made
let matchedCards = []
let alertWin = () => {
if (matchedCards.length === 16) {
alert(
'Congrats; you have the memory of an elephant!\nPress the New Game button to play again.\nThanks for playing'
)
}
}
// Reset both the firstCard and secondCard
let resetCards = (firstCard, secondCard) => {
setTimeout(() => {
// Flip both cards back over
firstCard.classList.replace('flipped', 'unflipped')
secondCard.classList.replace('flipped', 'unflipped')
firstCard.setAttribute('src', ' ')
secondCard.setAttribute('src', ' ')
firstCard.setAttribute(
'style',
'background-color:#ccfbfe; border: 1px solid; border-color:#af489a; padding: 1em;'
)
secondCard.setAttribute(
'style',
'background-color:#ccfbfe; border: 1px solid; border-color:#af489a; padding: 1em'
)
}, 900)
}
// Check user's firstCard and secondCard matching Function
let checkForMatch = () => {
// When firstCard and secondCard match
if (firstCard.getAttribute('src') === secondCard.getAttribute('src')) {
// Both cardFrontImages remain visible (flipped up) and flipCard function removed.
firstCard.removeEventListener('click', flipCard)
secondCard.removeEventListener('click', flipCard)
matchedCards.push(firstCard.getAttribute('id'))
matchedCards.push(secondCard.getAttribute('id'))
// alert('You found a match.. keep going to find them all, for the WIN!')
// When firstCard and secondCard do NOT match
} else {
resetCards(firstCard, secondCard)
}
firstCard = null
secondCard = null
flipped = false
alertWin()
}
// Flip Card Function
let flipCard = function() {
let cardId = this.getAttribute('dataId', cards[0].cardFrontImage)
this.setAttribute('src', cards[cardId].cardFrontImage)
this.setAttribute(
'style',
'background-color:#AD7A99; border: 1px solid; border-color:#98D2EB; svg { fill: #fff }'
)
this.classList.add('flipped')
if (this === firstCard) return
if (!flipped) {
flipped = true
firstCard = this
return
}
secondCard = this
checkForMatch()
}
// Create gameBoard
let createBoard = (() => {
for (let i = 0; i < 16; i++) {
// Create an image element for each item in the array.
let cardElement = document.createElement('img')
// Set each created image element with data attribute of `data-id`.
cardElement.setAttribute('dataId', [i])
// Add onClick to each created element.
cardElement.addEventListener('click', flipCard)
// Append the created images to the html element gameBoard as child elements.
document.getElementById('gameBoard').appendChild(cardElement)
}
})()
// Create a shuffleBoard()
// Fisher–Yates Shuffle Algorithm
let cardArrayLength = cards.length - 1
let randomIndex, tempCardArray
;(shuffleBoard = () => {
for (i = cardArrayLength; i > 0; i--) {
randomIndex = Math.floor(Math.random() * i)
tempCardArray = cards[i]
cards[i] = cards[randomIndex]
cards[randomIndex] = tempCardArray
}
})()
// References:
// - Fisher–Yates Shuffle Algorithm
// - Marina Ferreira: https://marina-ferreira.github.io/projects/js/memory-game/