73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
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
|
|
});
|
|
}
|