From 25b73318f981f0b13d0a4a78308f8ffe6c7d85d5 Mon Sep 17 00:00:00 2001 From: Konopelska Oksana Date: Fri, 29 Jan 2021 23:14:02 +0200 Subject: [PATCH 1/2] Add memory pairs task --- .../okkkko/memory_pairs_game/index.html | 19 +++++ .../okkkko/memory_pairs_game/script.js | 81 ++++++++++++++++++ .../okkkko/memory_pairs_game/style.css | 83 +++++++++++++++++++ 3 files changed, 183 insertions(+) create mode 100644 submissions/okkkko/memory_pairs_game/index.html create mode 100644 submissions/okkkko/memory_pairs_game/script.js create mode 100644 submissions/okkkko/memory_pairs_game/style.css diff --git a/submissions/okkkko/memory_pairs_game/index.html b/submissions/okkkko/memory_pairs_game/index.html new file mode 100644 index 000000000..f77fb8ac8 --- /dev/null +++ b/submissions/okkkko/memory_pairs_game/index.html @@ -0,0 +1,19 @@ + + + + + + Memory Pairs Game + + + + + +

Memory Pairs Game

+
+ + + diff --git a/submissions/okkkko/memory_pairs_game/script.js b/submissions/okkkko/memory_pairs_game/script.js new file mode 100644 index 000000000..c4bc9b512 --- /dev/null +++ b/submissions/okkkko/memory_pairs_game/script.js @@ -0,0 +1,81 @@ +const cardsId = ["01", "02", "03", "04", "05", "06"]; +const cardsArr = [...cardsId, ...cardsId]; +const maxNumOfHiddenCards = 12; +const maxNumOfFlippedCards = 2; +const delayForHidden = 100; +const delayForClicked = 800; +const delayForAlert = 700; +let gameField = document.querySelector(".game_field"); +let numOfHiddenCards = 0; +let arrOfFlippedCardsId = []; +let firstFlippedContainer; +let secondFlippedContainer; + +function createCard(id) { + let flipContainer = document.createElement("div"); + flipContainer.className = "flip-container"; + flipContainer.setAttribute("id", id); + gameField.append(flipContainer); + flipContainer.innerHTML = ` +
+
+ +
+
+ +
+
`; +} +function createField() { + cardsArr.sort(function () { + return 0.5 - Math.random(); + }); + cardsArr.forEach((id) => createCard(id)); +} +function flipCard(event) { + if (arrOfFlippedCardsId.length == 0) { + firstFlippedContainer = event.target.closest(".flip-container"); + firstFlippedContainer.classList.add("clicked"); + arrOfFlippedCardsId.push(firstFlippedContainer.id); + } else if (arrOfFlippedCardsId.length == 1 && event.target.closest('.flip-container')!==firstFlippedContainer) { + secondFlippedContainer = event.target.closest(".flip-container"); + secondFlippedContainer.classList.add("clicked"); + arrOfFlippedCardsId.push(secondFlippedContainer.id); + CheckPairs(); + } +} +function CheckPairs() { + if ( + arrOfFlippedCardsId[0] == arrOfFlippedCardsId[1] && + firstFlippedContainer !== secondFlippedContainer + ) { + setTimeout(() => { + firstFlippedContainer.classList.add("hidden"); + secondFlippedContainer.classList.add("hidden"); + arrOfFlippedCardsId = []; + numOfHiddenCards += 2; + setTimeout(() => { + checkNumOfHiddenCard(); + }, delayForAlert); + }, delayForHidden); + } else { + setTimeout(() => { + firstFlippedContainer.classList.remove("clicked"); + secondFlippedContainer.classList.remove("clicked"); + arrOfFlippedCardsId = []; + }, delayForClicked); + + } +} +function checkNumOfHiddenCard() { + if (numOfHiddenCards === maxNumOfHiddenCards) { + alert("You win!"); + + gameField.innerHTML = ""; + numOfHiddenCards = 0; + createField(); + } +} + +createField(); +gameField.addEventListener("click", flipCard); diff --git a/submissions/okkkko/memory_pairs_game/style.css b/submissions/okkkko/memory_pairs_game/style.css new file mode 100644 index 000000000..022595bca --- /dev/null +++ b/submissions/okkkko/memory_pairs_game/style.css @@ -0,0 +1,83 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +body { + background-color: rgb(223, 223, 223); +} +.game_title { + text-align: center; + margin-top: 5vh; + font-size: 32px; + font-family: "Inconsolata", monospace; + font-weight: 500; +} +.game_field { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px 10px; + margin-left: auto; + margin-right: auto; + margin-top: 30px; + width: 630px; +} +.flip-container { + perspective: 1000px; +} + +.flip-container.clicked .flipper { + transform: rotateY(180deg); +} +.flip-container.clicked.hidden { + visibility: hidden; +} +.front img, +.back img { + cursor: pointer; + width: 150px; + height: 150px; + border: 2px solid rgb(71, 68, 68); + border-radius:5px; +} +.flip-container { + width: 150px; + height: 150px; +} + +.flipper { + transition: 0.6s; + transform-style: preserve-3d; + position: relative; +} + +.front, +.back { + backface-visibility: hidden; + position: absolute; + top: 0; + left: 0; +} +.front { + z-index: 2; + transform: rotateY(0deg); +} +.back { + transform: rotateY(180deg); +} +@media (max-width: 660px) { + .game_field { + grid-template-columns: repeat(3, 1fr); + width: 320px; + gap: 5px 5px; + } + .front img, + .back img { + width: 103px; + height: 103px; + } + .flip-container { + width: 103px; + height: 103px; + } +} From 9f0e3dd01a9bbd27f0dc8bb1d976235c92f4d8dd Mon Sep 17 00:00:00 2001 From: Konopelska Oksana Date: Sat, 27 Feb 2021 17:54:59 +0200 Subject: [PATCH 2/2] Add fixes --- .../okkkko/memory_pairs_game/script.js | 165 +++++++++--------- 1 file changed, 84 insertions(+), 81 deletions(-) diff --git a/submissions/okkkko/memory_pairs_game/script.js b/submissions/okkkko/memory_pairs_game/script.js index c4bc9b512..acf10562b 100644 --- a/submissions/okkkko/memory_pairs_game/script.js +++ b/submissions/okkkko/memory_pairs_game/script.js @@ -1,81 +1,84 @@ -const cardsId = ["01", "02", "03", "04", "05", "06"]; -const cardsArr = [...cardsId, ...cardsId]; -const maxNumOfHiddenCards = 12; -const maxNumOfFlippedCards = 2; -const delayForHidden = 100; -const delayForClicked = 800; -const delayForAlert = 700; -let gameField = document.querySelector(".game_field"); -let numOfHiddenCards = 0; -let arrOfFlippedCardsId = []; -let firstFlippedContainer; -let secondFlippedContainer; - -function createCard(id) { - let flipContainer = document.createElement("div"); - flipContainer.className = "flip-container"; - flipContainer.setAttribute("id", id); - gameField.append(flipContainer); - flipContainer.innerHTML = ` -
-
- -
-
- -
-
`; -} -function createField() { - cardsArr.sort(function () { - return 0.5 - Math.random(); - }); - cardsArr.forEach((id) => createCard(id)); -} -function flipCard(event) { - if (arrOfFlippedCardsId.length == 0) { - firstFlippedContainer = event.target.closest(".flip-container"); - firstFlippedContainer.classList.add("clicked"); - arrOfFlippedCardsId.push(firstFlippedContainer.id); - } else if (arrOfFlippedCardsId.length == 1 && event.target.closest('.flip-container')!==firstFlippedContainer) { - secondFlippedContainer = event.target.closest(".flip-container"); - secondFlippedContainer.classList.add("clicked"); - arrOfFlippedCardsId.push(secondFlippedContainer.id); - CheckPairs(); - } -} -function CheckPairs() { - if ( - arrOfFlippedCardsId[0] == arrOfFlippedCardsId[1] && - firstFlippedContainer !== secondFlippedContainer - ) { - setTimeout(() => { - firstFlippedContainer.classList.add("hidden"); - secondFlippedContainer.classList.add("hidden"); - arrOfFlippedCardsId = []; - numOfHiddenCards += 2; - setTimeout(() => { - checkNumOfHiddenCard(); - }, delayForAlert); - }, delayForHidden); - } else { - setTimeout(() => { - firstFlippedContainer.classList.remove("clicked"); - secondFlippedContainer.classList.remove("clicked"); - arrOfFlippedCardsId = []; - }, delayForClicked); - - } -} -function checkNumOfHiddenCard() { - if (numOfHiddenCards === maxNumOfHiddenCards) { - alert("You win!"); - - gameField.innerHTML = ""; - numOfHiddenCards = 0; - createField(); - } -} - -createField(); -gameField.addEventListener("click", flipCard); +const cardsIds = ["01", "02", "03", "04", "05", "06"]; +const cardsArr = [...cardsIds, ...cardsIds]; +const maxNumOfHiddenCards = 12; +const maxNumOfFlippedCards = 2; +const delayForHidden = 100; +const delayForClicked = 800; +const delayForAlert = 700; +let gameField = document.querySelector(".game_field"); +let numOfHiddenCards = 0; +let arrOfFlippedCardsId = []; +let firstFlippedContainer; +let secondFlippedContainer; + +function createCard(id) { + let flipContainer = document.createElement("div"); + flipContainer.classList.add("flip-container"); + flipContainer.setAttribute("id", id); + flipContainer.innerHTML = ` +
+
+ +
+
+ +
+
`; + gameField.append(flipContainer); +} +function createField() { + cardsArr.sort(function () { + return 0.5 - Math.random(); + }); + cardsArr.forEach((id) => createCard(id)); +} +function flipCard(event) { + if (!arrOfFlippedCardsId.length) { + firstFlippedContainer = event.target.closest(".flip-container"); + firstFlippedContainer.classList.add("clicked"); + arrOfFlippedCardsId.push(firstFlippedContainer.id); + } else if ( + arrOfFlippedCardsId.length === 1 && + event.target.closest(".flip-container") !== firstFlippedContainer + ) { + secondFlippedContainer = event.target.closest(".flip-container"); + secondFlippedContainer.classList.add("clicked"); + arrOfFlippedCardsId.push(secondFlippedContainer.id); + checkPairs(); + } +} +function checkPairs() { + const [firstId, secondId] = arrOfFlippedCardsId; + if ( + firstId === secondId && + firstFlippedContainer !== secondFlippedContainer + ) { + setTimeout(() => { + firstFlippedContainer.classList.add("hidden"); + secondFlippedContainer.classList.add("hidden"); + arrOfFlippedCardsId = []; + numOfHiddenCards += 2; + setTimeout(() => { + checkNumOfHiddenCard(); + }, delayForAlert); + }, delayForHidden); + } else { + setTimeout(() => { + firstFlippedContainer.classList.remove("clicked"); + secondFlippedContainer.classList.remove("clicked"); + arrOfFlippedCardsId = []; + }, delayForClicked); + } +} +function checkNumOfHiddenCard() { + if (numOfHiddenCards === maxNumOfHiddenCards) { + alert("You win!"); + + gameField.innerHTML = ""; + numOfHiddenCards = 0; + createField(); + } +} + +createField(); +gameField.addEventListener("click", flipCard);