From 7328e9d70b624e61deaa4aad0938702e679dd448 Mon Sep 17 00:00:00 2001 From: TheGeniusOfEternity Date: Tue, 6 Aug 2024 22:18:09 +0300 Subject: [PATCH] 1.0 - basic card mechanic --- .idea/.gitignore | 5 +++ .idea/FindPair.iml | 12 +++++++ .idea/modules.xml | 8 +++++ .idea/vcs.xml | 6 ++++ index.html | 22 +++++++++++++ main.js | 82 ++++++++++++++++++++++++++++++++++++++++++++++ style.css | 72 ++++++++++++++++++++++++++++++++++++++++ 7 files changed, 207 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/FindPair.iml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/FindPair.iml b/.idea/FindPair.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/FindPair.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..f5e2c02 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..ba62b36 --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + + + Find The Pair + + +
+ +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..2f903b3 --- /dev/null +++ b/main.js @@ -0,0 +1,82 @@ +const x = 4 +const y = 6 + +const delay = ms => new Promise(res => setTimeout(res, ms)) + +const checkMatched = () => { + const matchedCards = document.querySelectorAll(".matched") + if (matchedCards.length === x * y) { + console.log("GameOver!!") + } +} +async function lol() { + this.classList.add('active') + const activeCards = document.querySelectorAll('.active') + + await delay(500) + + if (activeCards.length === 2) { + if (activeCards[0].classList[1] === activeCards[1].classList[1]) { + console.log("Great!") + activeCards[0].classList.add('matched') + activeCards[1].classList.add('matched') + + await delay(500) + + activeCards[0].removeEventListener("click", lol) + activeCards[1].removeEventListener("click", lol) + } else { + console.log("Lose!") + } + activeCards[0].classList.remove('active') + activeCards[1].classList.remove('active') + + checkMatched() + } +} +const makeField = (x, y) => { + const field = document.querySelector('.field') + + while (field.hasChildNodes()) { + field.removeChild(field.firstChild) + } + + const size = 72 / x + const pairs = [] + for (let k = 0; k < x * y / 2; k++) { + pairs[k] = 2 + } + + for (let i = 0; i < x; i++) { + for (let j = 0; j < y; j++) { + const card = document.createElement('div') + const front = document.createElement('div') + const back = document.createElement('div') + + card.style.width = `${size}vw` + card.style.height = `${size}vw` + card.classList.add('card') + + let num = false + while (!num) { + let k = Math.ceil(Math.random() * pairs.length) - 1 + if (pairs[k] !== 0) { + pairs[k]-- + num = k + 1 + } + } + + back.innerHTML = `${num}` + + card.classList.add(`pair-${num}`) + card.addEventListener("click", lol) + + card.appendChild(front) + card.appendChild(back) + field.appendChild(card) + } + } +} + +window.onload = () => {makeField(x, y)} + diff --git a/style.css b/style.css new file mode 100644 index 0000000..523fef6 --- /dev/null +++ b/style.css @@ -0,0 +1,72 @@ +body, html { + margin: 0; + +} + +main, header { + display: flex; + justify-content: center; +} + +header, footer { + height: 12vh; + width: 100%; + background-color: lightgreen; + margin-bottom: 5vw; +} + +main { + background-color: lightgoldenrodyellow; + aspect-ratio: 9 / 14; +} + +footer { + margin-top: 5vw; + margin-bottom: 5vw; +} + +.field { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + background-color: lightblue; + width: 90vw; + padding: 5vw; + gap: 4vw; +} + +.card { + aspect-ratio: 1; + transition: all 0.6s ease-in; + position: relative; + transform-style: preserve-3d; +} + +.card div { + position: absolute; + background-color: coral; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.card div:last-child { + background-color: yellow; + transform: rotateY(180deg); +} + +.active, .matched { + transform: rotateY(180deg); + transition: all 0.5s; +} + +.card.matched div { + font-size: 0; + background-color: transparent; + transition: background-color 0.3s; +} +