Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6fe64bf

Browse files
day 5
1 parent 1d358f5 commit 6fe64bf

File tree

16 files changed

+330
-0
lines changed

16 files changed

+330
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,5 @@ Motivate yourself to code daily till 60 days, and see the magic!
2121
| [Day 2](./each%20day%20build%20day!/Day%201/) | [Flex image gallery](./each%20day%20build%20day!/Day%202/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%202/README.md/) |
2222
| [Day 3](./each%20day%20build%20day!/Day%203/) | [css variables](./each%20day%20build%20day!/Day%203/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%203/README.md/) |
2323
| [Day 4](./each%20day%20build%20day!/Day%204/) | [Array Methods](./each%20day%20build%20day!/Day%203/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%204/README.md/) |
24+
| [Day 5](./each%20day%20build%20day!/Day%205/) | [Memory Game](./each%20day%20build%20day!/Day%205/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%205/README.md/) |
2425

‎each day build day!/Day 5/README.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Memory Game
2+
A simple grid-based game in vanilla JavaScript, HTML and CSS
3+
4+
Memory Game, also known as the Concentration card game or Matching Game, is a simple card game where you need to match pairs by turn over 2 cards at a time.
5+
6+
7+
I have kept the styling at a bare miniumum for now as I was focusing on javascript aspect of it. Please feel free to clone/ fork it and contributions are welcome!!!
8+
9+
10+
## Rules of Memory Game
11+
- You will start by flipping over one card
12+
- If the next card you flip matches, a pop up alert notifies you and you get +1 to your score
13+
- These cards then disspear
14+
- If the next card you flip does not match, a pop up alert notifies you of ths and the cards flip back
15+
- The game continues until you match all the cards on the board
16+
17+
# Changelogs/Bugs
18+
-

‎each day build day!/Day 5/app.js

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
//card options
3+
const cardArray = [
4+
{
5+
name: 'audi',
6+
img: 'icons/audi-11.svg'
7+
},
8+
{
9+
name: 'bentley',
10+
img: 'icons/bentley.svg'
11+
},
12+
{
13+
name: 'bmw',
14+
img: 'icons/bmw.svg'
15+
},
16+
{
17+
name: 'maserati',
18+
img: 'icons/maserati.svg'
19+
},
20+
{
21+
name: 'benz',
22+
img: 'icons/mebenz.svg'
23+
},
24+
{
25+
name: 'royal-enfield',
26+
img: 'icons/re.svg'
27+
},
28+
{
29+
name: 'tata',
30+
img: 'icons/tata-motors.svg'
31+
},
32+
{
33+
name: 'tesla-motors',
34+
img: 'icons/tesla-motors-1.svg'
35+
},
36+
37+
{
38+
name: 'audi',
39+
img: 'icons/audi-11.svg'
40+
},
41+
{
42+
name: 'bentley',
43+
img: 'icons/bentley.svg'
44+
},
45+
{
46+
name: 'bmw',
47+
img: 'icons/bmw.svg'
48+
},
49+
{
50+
name: 'maserati',
51+
img: 'icons/maserati.svg'
52+
},
53+
{
54+
name: 'benz',
55+
img: 'icons/mebenz.svg'
56+
},
57+
{
58+
name: 'royal-enfield',
59+
img: 'icons/re.svg'
60+
},
61+
{
62+
name: 'tata',
63+
img: 'icons/tata-motors.svg'
64+
},
65+
{
66+
name: 'tesla-motors',
67+
img: 'icons/tesla-motors-1.svg'
68+
},
69+
70+
]
71+
//cardArray.copyWithin(0,0);
72+
console.log('cards',cardArray)
73+
74+
cardArray.sort(() => 0.5 - Math.random())
75+
console.log('cards',cardArray)
76+
77+
78+
const grid = document.querySelector('.grid')
79+
const showResult = document.querySelector('#result')
80+
var cardsChosen = []
81+
var cardsChosenId = []
82+
const matchedCards = [] || 0;
83+
let totalTries = 0;
84+
//create the playing 🎬
85+
//add img src data-id and append it to parent div
86+
function createBoard() {
87+
for (let i = 0; i < cardArray.length; i++) {
88+
var card = document.createElement('img')
89+
card.setAttribute('src', 'icons/blank.svg')
90+
card.setAttribute('data-id', i)
91+
card.addEventListener('click', flipCard)
92+
grid.appendChild(card)
93+
}
94+
}
95+
96+
//flip card
97+
//get the id , add it to array, change src from blank to img
98+
function flipCard(){
99+
let cardId = this.getAttribute('data-id');
100+
cardsChosen.push(cardArray[cardId].name)
101+
cardsChosenId.push(cardId);
102+
this.setAttribute('src', cardArray[cardId].img)
103+
if(cardsChosen.length == 2){
104+
//check for macthes 🕎
105+
setTimeout(checkForMatch,600);
106+
}
107+
}
108+
109+
//check for match 👨‍💻
110+
//its a match when two cards in the cardChoosen array are the same, here js reference to same objec so..
111+
//its a victory if cardswon length == half the length
112+
function checkForMatch(){
113+
let cards = document.querySelectorAll('img')
114+
const h3 = document.querySelector('h3');
115+
const selectCardOneId = cardsChosenId[0];
116+
const selectCardTwoId = cardsChosenId[1];
117+
118+
//deep equality
119+
if(cardsChosen[0] === cardsChosen[1]){
120+
alert('Its a match');
121+
//remove the card (mark them cross)
122+
cards[selectCardOneId].setAttribute('src','icons/cross.svg');
123+
cards[selectCardTwoId].setAttribute('src','icons/cross.svg');
124+
//cards[selectCardOneId].removeEventListener();
125+
//cards[selectCardTwoId].removeEventListener();
126+
//add to macthedCards
127+
matchedCards.push(cardsChosen);
128+
}else{
129+
cards[selectCardOneId].setAttribute('src','icons/blank.svg');
130+
cards[selectCardTwoId].setAttribute('src','icons/blank.svg');
131+
totalTries++;
132+
alert('oops! try again')
133+
}
134+
//reset the arrays
135+
cardsChosen = []
136+
cardsChosenId = []
137+
138+
showResult.textContent = matchedCards.length;
139+
if(matchedCards.length === cardArray.length/2){
140+
h3.textContent =`Yay! 🎉`;
141+
showResult.textContent = ` Congratulations! You macthed them all! Total tries : ${totalTries}`
142+
}
143+
144+
}
145+
146+
147+
createBoard();
148+
})
Lines changed: 1 addition & 0 deletions
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /