js

script.js

@@ -0,0 +1,72 @@
+const game = document.getElementById("game");
+const movesText = document.getElementById("moves");
+const scoreText = document.getElementById("score");
+
+let moves = 0;
+let score = 0;
+let firstCard = null;
+let lock = false;
+
+let icons = ["🍎", "🍌", "🍇", "🍓", "🍒", "🍑", "🍍", "🥝"]; // 8 pairs
+let cards = [...icons, ...icons];
+cards.sort(() => Math.random() - 0.5);
+
+cards.forEach(icon => {
+    const div = document.createElement("div");
+    div.className = "card";
+    div.dataset.icon = icon;
+    div.textContent = "?";
+    game.appendChild(div);
+});
+
+game.querySelectorAll(".card").forEach(card => {
+    card.addEventListener("click", () => {
+        if(lock || card.classList.contains("open") || card.classList.contains("matched")) return;
+
+        card.classList.add("open");
+        card.textContent = card.dataset.icon;
+
+        if(!firstCard){
+            firstCard = card;
+            return;
+        }
+
+        moves++;
+        movesText.textContent = moves;
+        lock = true;
+
+        if(firstCard.dataset.icon === card.dataset.icon){
+            score += 100;
+            scoreText.textContent = score;
+
+            firstCard.classList.add("matched");
+            card.classList.add("matched");
+
+            firstCard = null;
+            lock = false;
+
+            saveScore(score);
+        } else {
+            score -= 20;
+            scoreText.textContent = score;
+            
+            setTimeout(() => {
+                firstCard.classList.remove("open");
+                firstCard.textContent = "?";
+                card.classList.remove("open");
+                card.textContent = "?";
+
+                firstCard = null;
+                lock = false;
+            }, 700);
+        }
+    });
+});
+
+function saveScore(score){
+    fetch("save_score.php", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: "score=" + score
+    });
+}