diff --git a/script.js b/script.js new file mode 100644 index 0000000..fa46634 --- /dev/null +++ b/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 + }); +}