diff --git "a/submissions/igarok88/memory\342\200\223pair-game/index.html" "b/submissions/igarok88/memory\342\200\223pair-game/index.html" new file mode 100644 index 0000000000..f85e0eab50 --- /dev/null +++ "b/submissions/igarok88/memory\342\200\223pair-game/index.html" @@ -0,0 +1,16 @@ + + + + + + + + Memory – Pair Game + + +
+
+
+ + + diff --git "a/submissions/igarok88/memory\342\200\223pair-game/script.js" "b/submissions/igarok88/memory\342\200\223pair-game/script.js" new file mode 100644 index 0000000000..6798b0d64b --- /dev/null +++ "b/submissions/igarok88/memory\342\200\223pair-game/script.js" @@ -0,0 +1,86 @@ +(function () { + function fruitCards() { + function Shuffle(o) { + for ( + var j, x, i = o.length; + i; + j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x + ); + return o; + } + const shuffleArr = Shuffle([1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6]); + + const gameContainer = document.querySelector(".game__container"); + gameContainer.innerHTML = ""; + + shuffleArr.forEach((item) => { + const gameСard = ` +
+
+
+
+ ${item} +
+
+
+ `; + gameContainer.innerHTML += gameСard; + }); + + let gameCards = document.querySelectorAll(".game__card-container"); + + let selectedCards = []; + let timeout; + + const openCards = function (e) { + if (e.target.closest(".game__card-container")) { + const currentCard = e.target.closest(".game__card-container"); + currentCard.classList.add("selected"); + selectedCards.push(currentCard.getAttribute("data-value")); + } + + if (selectedCards.length > 1 && selectedCards[0] === selectedCards[1]) { + gameCards.forEach((item) => { + if (item.getAttribute("data-value") === selectedCards[0]) { + timeout = setTimeout(() => { + item.replaceWith(document.createElement("div")); + + if (isFinishGame()) { + alert("Congratulation. You Win!"); + fruitCards(); + } + }, 1200); + } + }); + + selectedCards = []; + } + + if (selectedCards.length > 1 && selectedCards[0] !== selectedCards[1]) { + gameContainer.removeEventListener("click", openCards); + + selectedCards = []; + + timeout = setTimeout(closeCards, 800); + } + }; + + function isFinishGame() { + gameCards = document.querySelectorAll(".game__card-container"); + if (gameCards.length === 0) { + return true; + } + return false; + } + + function closeCards() { + gameCards.forEach((item) => { + item.classList.remove("selected"); + }); + clearTimeout(timeout); + gameContainer.addEventListener("click", openCards); + } + gameContainer.addEventListener("click", openCards); + } + fruitCards(); +})(); diff --git "a/submissions/igarok88/memory\342\200\223pair-game/style.css" "b/submissions/igarok88/memory\342\200\223pair-game/style.css" new file mode 100644 index 0000000000..23c76e866d --- /dev/null +++ "b/submissions/igarok88/memory\342\200\223pair-game/style.css" @@ -0,0 +1,64 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: Arial; +} +body { + background-color: rgb(184, 193, 248); +} +.container { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} +.game__container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(3, 1fr); + width: 600px; +} +.game__card-container { + width: 150px; + height: 150px; +} +.game__item { + border: 2px solid black; + width: 150px; + height: 150px; + background-color: rgb(168, 236, 232); +} + +.game__img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.flip-container.selected .flipper { + transform: rotateY(180deg); +} + +.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); +}