1.0 - basic card mechanic

DeadCreator · Aug 6, 2024 · 7328e9d · 7328e9d
commit 7328e9d
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 0 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/FindPair.iml b/.idea/FindPair.iml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Find The Pair</title>
+</head>
+<body>
+    <header>
+
+    </header>
+    <main>
+        <section class="field">
+        </section>
+    </main>
+    <footer>
+
+    </footer>
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/main.js 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
@@ -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;
+}
+