Memory pair game (#94)

* js core code * added memoryPairGame * deleted Class, deleted parentElement search, add event.target.closest(), deleted this, deleted all comments in code, renamed function sameEvents to sameItems, add new line at the end of html file * fixed data-attr name, fixed variable names, remove forEach to map * add function renderAllItem Co-authored-by: asa <pandemix331@gmail.com>
kottans · Aug 17, 2022 · 65ea6ed · 65ea6ed
1 parent 54de8ea
commit 65ea6ed
Show file tree

Hide file tree

Showing 3 changed files with 198 additions and 0 deletions.
diff --git a/submissions/asaMitaka/Memory pair game/index.html b/submissions/asaMitaka/Memory pair game/index.html
@@ -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>
diff --git a/submissions/asaMitaka/Memory pair game/script.js b/submissions/asaMitaka/Memory pair game/script.js
@@ -0,0 +1,114 @@
+let content = document.querySelector('.content');
+const backImg = 'https://i.pinimg.com/originals/13/25/05/132505ba3238e79c00034c905b2ca045.jpg';
+let previousClicked = undefined;
+let currentClicked = undefined;
+let flipped = 0;
+let isBoardLocked = false;
+
+let cardsList = [
+    {
+        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 shuffledCardList = shuffleArr([...cardsList, ...cardsList]);
+function renderAllItem() {
+    let accumulator = '';
+    shuffledCardList.forEach(el => accumulator += renderItem(el));
+
+    content.innerHTML = accumulator;
+}
+renderAllItem();
+
+
+let cardItems = document.querySelectorAll('.cardItem');
+cardItems.forEach(el => el.addEventListener('click', clickItem));
+
+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-card_id='${item.id}'>
+            <img class='cardItem__front' src='${backImg}'/>
+            <img class='cardItem__back' src='${item.img}'/>
+        </div>
+    `;
+}
+
+function clickItem(event) {
+    if (isBoardLocked || event.target === previousClicked || !event.target.classList.contains('cardItem__front')) return;
+
+    let parentElement = event.target.closest('.cardItem');
+    parentElement.classList.add('flip');
+
+    if (!previousClicked) {
+        previousClicked = parentElement;
+    } else {
+        currentClicked = parentElement;
+        sameItems(previousClicked, currentClicked);
+        previousClicked = undefined;
+    }
+}
+
+function sameItems(previosEvent, currentEvent) {
+    isBoardLocked = true;
+    if (previosEvent.dataset.card_id === currentEvent.dataset.card_id) {
+        previosEvent.classList.add('hide');
+        currentEvent.classList.add('hide');
+        resetBoardItem();
+        flipped += 2;
+
+        if (flipped === shuffledCardList.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;
+    isBoardLocked = false;
+}
diff --git a/submissions/asaMitaka/Memory pair game/style.css b/submissions/asaMitaka/Memory pair game/style.css
@@ -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;
+}