Skip to content

Solved lab #1958

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Solved lab #1958

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Superhero Memory Game</title>
<!-- LINK THE STYLES HERE -->
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<div>
Expand All @@ -19,5 +20,7 @@ <h2>Score</h2>
<div id="memory-board"></div>

<!-- LINK THE JAVASCRIPT FILES HERE (keep in mind that the order in which you link them MATTERS) -->
<script src="./src/memory.js"></script>
<script src="./src/index.js"></script>
</body>
</html>
19 changes: 18 additions & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ const cards = [
];

const memoryGame = new MemoryGame(cards);
// shuffel
memoryGame.shuffleCards()

window.addEventListener('load', (event) => {
let html = '';
Expand All @@ -45,7 +47,22 @@ window.addEventListener('load', (event) => {
document.querySelectorAll('.card').forEach((card) => {
card.addEventListener('click', () => {
// TODO: write some code here
console.log(`Card clicked: ${card}`);
console.log(`Card clicked: ${card.getAttribute('data-card-name')}`);
var picked = memoryGame.pickedCards
if (picked.includes(card)) return // card already picked
if (picked.length == 2) return // don't pick 3rd card
if (picked.length < 2) { // not enough cards to compare
card.classList.add('turned')
picked.push(card)
}
if (picked.length == 2) {
setTimeout(function() {
memoryGame.pairsClicked ++
document.getElementById('pairs-clicked').innerText = memoryGame.pairsClicked
memoryGame.checkIfPair(picked[0], picked[1])
memoryGame.checkIfFinished()
},1000)
}
});
});
});
24 changes: 21 additions & 3 deletions src/memory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,35 @@ class MemoryGame {
constructor(cards) {
this.cards = cards;
// add the rest of the class properties here
this.pickedCards = []
this.pairsClicked = 0
this.pairsGuessed = 0
}

shuffleCards() {
// ... write your code here
// Start from the last element and swap it with a randomly selected element before it
for (let i = this.cards.length - 1; i > 0; i--) {
// Generate a random index between 0 and i (inclusive)
const j = Math.floor(Math.random() * (i + 1));

// Swap array[i] with array[j]
[this.cards[i], this.cards[j]] = [this.cards[j], this.cards[i]];
}
}

checkIfPair(card1, card2) {
// ... write your code here
if (card1.getAttribute('data-card-name') == card2.getAttribute('data-card-name')) {
this.pairsGuessed ++
document.getElementById('pairs-guessed').innerText = this.pairsGuessed
}
else {
card1.classList.remove('turned')
card2.classList.remove('turned')
}
this.pickedCards = []
}

checkIfFinished() {
// ... write your code here
if (this.pairsGuessed == 12) alert('Congrats! you finished the game')
}
}