-
-
Notifications
You must be signed in to change notification settings - Fork 185
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.
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
Memory pair game #94
Memory pair game #94
Changes from 3 commits
24f2253
5cbaacf
361dec2
eb2a0f6
bb1a4b3
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Document</title> | ||
<link rel="stylesheet" href="style.css"> | ||
</head> | ||
<body> | ||
<main> | ||
<div class="content"></div> | ||
</main> | ||
|
||
|
||
<script src="script.js"></script> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,113 @@ | ||
let content = document.querySelector('.content'); | ||
const backImg = 'https://i.pinimg.com/originals/13/25/05/132505ba3238e79c00034c905b2ca045.jpg'; | ||
|
||
let arrOfCards = [ | ||
{ | ||
img: 'https://static3.depositphotos.com/1005348/211/i/450/depositphotos_2114992-stock-photo-aqua-digit-1.jpg', | ||
id: 1 | ||
}, | ||
{ | ||
img: 'https://a4files.ru/content/uploads/2017/07/cifra-2.jpg', | ||
id: 2 | ||
}, | ||
{ | ||
img: 'https://img.freepik.com/premium-vector/the-number-3-the-numbers-are-rosy-in-the-form-of-a-popular-childrens-game-pop-it-bright-letters-on-a-white-background-bright-numbers-on-a-white-background_422344-743.jpg', | ||
id: 3 | ||
}, | ||
{ | ||
img: 'https://i.pinimg.com/originals/0d/e3/c3/0de3c3c562fdcf1d86c4dbd2beb647ff.jpg', | ||
id: 4, | ||
}, | ||
{ | ||
img: 'https://klike.net/uploads/posts/2020-06/1593148473_1.jpg', | ||
id: 5, | ||
}, | ||
{ | ||
img: 'https://klike.net/uploads/posts/2020-06/1593149252_3.jpg', | ||
id: 6, | ||
}, | ||
{ | ||
img: 'https://klike.net/uploads/posts/2020-06/1593149764_2.jpg', | ||
id: 7, | ||
}, | ||
{ | ||
img: 'https://static3.depositphotos.com/1000695/119/i/450/depositphotos_1190337-stock-photo-figure-eight.jpg', | ||
id: 8, | ||
}, | ||
]; | ||
|
||
let shuffledArr = shuffleArr([...arrOfCards, ...arrOfCards]); | ||
|
||
shuffledArr.forEach((el) => { | ||
content.innerHTML += renderItem(el); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Common mistake - adding elements in the loop. https://kottans.org/documentation/docs/doc/code-review/ please check the doc :) |
||
}); | ||
|
||
let cardItems = document.querySelectorAll('.cardItem'); | ||
cardItems.forEach(el => el.addEventListener('click', clickedItem)); | ||
|
||
function shuffleArr(array) { | ||
for (let i = array.length - 1; i > 0; i--) { | ||
let j = Math.floor(Math.random() * (i + 1)); | ||
[array[i], array[j]] = [array[j], array[i]]; | ||
} | ||
|
||
return array; | ||
} | ||
|
||
function renderItem(item) { | ||
return ` | ||
<div class='cardItem' data-attribute='${item.id}'> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
<img class='cardItem__front' src='${backImg}'/> | ||
<img class='cardItem__back' src='${item.img}'/> | ||
</div> | ||
`; | ||
} | ||
|
||
let previousClicked = undefined; | ||
let currentClicked = undefined; | ||
let flipped = 0; | ||
let lockBoard = false; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Codestyle - boolean variables should be called with And |
||
|
||
function clickedItem(event) { | ||
if (event.target === previousClicked) return; | ||
if (lockBoard) return; | ||
if (!event.target.classList.contains('cardItem__front')) return; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can make one if for this. And I would move some checks out of function. No need to call listener in general if board was locked. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. And function names should be verbs |
||
|
||
let parentElement = event.target.closest('.cardItem'); | ||
parentElement.classList.add('flip'); | ||
|
||
if (previousClicked === undefined) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just |
||
previousClicked = parentElement; | ||
} else { | ||
currentClicked = parentElement; | ||
sameItems(previousClicked, currentClicked); | ||
previousClicked = undefined; | ||
} | ||
} | ||
|
||
function sameItems(previosEvent, currentEvent) { | ||
lockBoard = true; | ||
if (previosEvent.dataset.attribute === currentEvent.dataset.attribute) { | ||
previosEvent.classList.add('hide'); | ||
currentEvent.classList.add('hide'); | ||
resetBoardItem(); | ||
flipped += 2; | ||
|
||
if (flipped === shuffledArr.length) { | ||
alert('YOU WIN!'); | ||
window.location.reload(); | ||
} | ||
} else { | ||
setTimeout(() => { | ||
previosEvent.classList.remove('flip'); | ||
currentEvent.classList.remove('flip'); | ||
resetBoardItem(); | ||
}, 1000); | ||
} | ||
} | ||
|
||
function resetBoardItem() { | ||
previousClicked = undefined; | ||
currentClicked = undefined; | ||
lockBoard = false; | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
*{ | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
main { | ||
display: flex; | ||
justify-content: center; | ||
height: 100vh; | ||
} | ||
|
||
.content { | ||
display: flex; | ||
justify-content: center; | ||
width: 800px; | ||
background-color: beige; | ||
flex-direction: row; | ||
flex-wrap: wrap; | ||
} | ||
|
||
.content>* { | ||
align-self: center; | ||
flex: 0 0 150px; | ||
} | ||
|
||
.cardItem { | ||
width: 100px; | ||
height: 175px; | ||
border: 1px solid black; | ||
background-color: aquamarine; | ||
margin: 20px; | ||
position: relative; | ||
perspective: 1000px; | ||
} | ||
|
||
.cardItem img { | ||
width: 100%; | ||
height: 100%; | ||
} | ||
|
||
.hide { | ||
opacity: 0; | ||
} | ||
|
||
.cardItem__back, .cardItem__front { | ||
backface-visibility: hidden; | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
} | ||
|
||
.cardItem__front { | ||
z-index: 2; | ||
transform: rotateY(0deg); | ||
} | ||
|
||
.cardItem__back { | ||
transform: rotateY(180deg); | ||
} | ||
|
||
.flip { | ||
transition: 0.6s; | ||
transform-style: preserve-3d; | ||
transform: rotateY(180deg); | ||
position: relative; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Common mistake - variable name. Please read review doc :)