Skip to content

Commit 7055dcf

Browse files
daviskamaudaviskamau
authored
code
1 parent 8f69dfd commit 7055dcf

11 files changed

+139
-0
lines changed

Diff for: ‎memory game/app.js

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
//list all card options
3+
const cardArray = [
4+
{
5+
name: 'fries',
6+
img: 'images/fries.png'
7+
},
8+
{
9+
name: 'cheeseburger',
10+
img: 'images/cheeseburger.png'
11+
},
12+
{
13+
name: 'ice-cream',
14+
img: 'images/ice-cream.png'
15+
},
16+
{
17+
name: 'pizza',
18+
img: 'images/pizza.png'
19+
},
20+
{
21+
name: 'milkshake',
22+
img: 'images/milkshake.png'
23+
},
24+
{
25+
name: 'hotdog',
26+
img: 'images/hotdog.png'
27+
},
28+
{
29+
name: 'fries',
30+
img: 'images/fries.png'
31+
},
32+
{
33+
name: 'cheeseburger',
34+
img: 'images/cheeseburger.png'
35+
},
36+
{
37+
name: 'ice-cream',
38+
img: 'images/ice-cream.png'
39+
},
40+
{
41+
name: 'pizza',
42+
img: 'images/pizza.png'
43+
},
44+
{
45+
name: 'milkshake',
46+
img: 'images/milkshake.png'
47+
},
48+
{
49+
name: 'hotdog',
50+
img: 'images/hotdog.png'
51+
}
52+
]
53+
54+
cardArray.sort(() => 0.5 - Math.random())
55+
56+
const grid = document.querySelector('.grid')
57+
const resultDisplay = document.querySelector('#result')
58+
let cardsChosen = []
59+
let cardsChosenId = []
60+
let cardsWon = []
61+
62+
//create your board
63+
function createBoard() {
64+
for (let i = 0; i < cardArray.length; i++) {
65+
const card = document.createElement('img')
66+
card.setAttribute('src', 'images/blank.png')
67+
card.setAttribute('data-id', i)
68+
card.addEventListener('click', flipCard)
69+
grid.appendChild(card)
70+
}
71+
}
72+
73+
//check for matches
74+
function checkForMatch() {
75+
const cards = document.querySelectorAll('img')
76+
const optionOneId = cardsChosenId[0]
77+
const optionTwoId = cardsChosenId[1]
78+
79+
if(optionOneId == optionTwoId) {
80+
cards[optionOneId].setAttribute('src', 'images/blank.png')
81+
cards[optionTwoId].setAttribute('src', 'images/blank.png')
82+
alert('You have clicked the same image!')
83+
}
84+
else if (cardsChosen[0] === cardsChosen[1]) {
85+
alert('You found a match')
86+
cards[optionOneId].setAttribute('src', 'images/white.png')
87+
cards[optionTwoId].setAttribute('src', 'images/white.png')
88+
cards[optionOneId].removeEventListener('click', flipCard)
89+
cards[optionTwoId].removeEventListener('click', flipCard)
90+
cardsWon.push(cardsChosen)
91+
} else {
92+
cards[optionOneId].setAttribute('src', 'images/blank.png')
93+
cards[optionTwoId].setAttribute('src', 'images/blank.png')
94+
alert('Sorry, try again')
95+
}
96+
cardsChosen = []
97+
cardsChosenId = []
98+
resultDisplay.textContent = cardsWon.length
99+
if (cardsWon.length === cardArray.length/2) {
100+
resultDisplay.textContent = 'Congratulations! You found them all!'
101+
}
102+
}
103+
104+
//flip your card
105+
function flipCard() {
106+
let cardId = this.getAttribute('data-id')
107+
cardsChosen.push(cardArray[cardId].name)
108+
cardsChosenId.push(cardId)
109+
this.setAttribute('src', cardArray[cardId].img)
110+
if (cardsChosen.length ===2) {
111+
setTimeout(checkForMatch, 500)
112+
}
113+
}
114+
115+
createBoard()
116+
})

Diff for: ‎memory game/images/blank.png

987 Bytes
Loading

Diff for: ‎memory game/images/cheeseburger.png

7.27 KB
Loading

Diff for: ‎memory game/images/fries.png

3.52 KB
Loading

Diff for: ‎memory game/images/hotdog.png

8.8 KB
Loading

Diff for: ‎memory game/images/ice-cream.png

1.3 KB
Loading

Diff for: ‎memory game/images/milkshake.png

4.87 KB
Loading

Diff for: ‎memory game/images/pizza.png

7.63 KB
Loading

Diff for: ‎memory game/images/white.png

420 Bytes
Loading

Diff for: ‎memory game/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Memory Game</title>
6+
<link rel="stylesheet" href="style.css"></link>
7+
<script src="app.js" charset="utf-8"></script>
8+
</head>
9+
<body>
10+
11+
<h3>Score:<span id="result"></span></h3>
12+
13+
<div class="grid">
14+
</div>
15+
16+
</body>
17+
</html>

Diff for: ‎memory game/style.css

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.grid {
2+
display: flex;
3+
flex-wrap: wrap;
4+
width: 400px;
5+
height: 300px;
6+
}

0 commit comments

Comments
 (0)