Skip to content

Commit

Permalink
codes update
Browse files Browse the repository at this point in the history
  • Loading branch information
@Leni-Nikitaa
Leni-Nikitaa committed Oct 20, 2023
1 parent 6e0975e commit 79cdbb9
Show file tree
Hide file tree
Showing 3 changed files with 211 additions and 105 deletions.
70 changes: 41 additions & 29 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,113 +4,125 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memor Flip Card Game</title>
</head>
<body>
<audio id="flipSound" src="flip.wav"></audio>
<audio id="matchSound" src="match.wav"></audio>
<audio id="wrongSound" src="wrong.wav"></audio>
<div class="wrapper">
<div class="difficulty">
<label for="difficulty-select">Select Difficulty:</label>
<select id="difficulty-select">
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
</div>
<ul class="cards">
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-tiktok'></i>
<img src="card2.jpg" alt="Card 2">
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-instagram-alt' ></i>
<img src="card3.jpg" alt="Card 3">
</div>
</li><li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-facebook-circle' ></i>
<img src="card4.jpg" alt="Card 4">
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-twitter' ></i>
<img src="card5.jpg" alt="Card 5">
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-whatsapp'></i>
<img src="card6.jpg" alt="Card 6">
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-youtube' ></i>
<img src="card7.jpg" alt="Card 7">
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-tiktok'></i>
<img src="card2.jpg" alt="Card 2">
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-instagram-alt' ></i>
<img src="card3.jpg" alt="Card 3">
</div>
</li><li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-facebook-circle' ></i>
<img src="card4.jpg" alt="Card 4">
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-twitter' ></i>
<img src="card5.jpg" alt="Card 5">
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-whatsapp'></i>
<img src="card6.jpg" alt="Card 6">
</div>
</li>
<li class="card">
<div class="view front-view">
<i class='bx bx-question-mark'></i>
<img src="card1.jpg" alt="Card 1">
</div>
<div class="view back-view">
<i class='bx bxl-youtube' ></i>
<img src="card7.jpg" alt="Card 7">
</div>
</li>
<div class="details">
<p class="time">Time : <span><b>0</b>s</span></p>
<p class="flips">Flips : <span><b>0</b></span></p>
<button>Refresh</button>
</div>
</ul>
<div class="details">
<p class="time">Time: <b>0</b>s</p>
<p class="flips">Flips: <b>0</b></p>
<button>Refresh</button>
</div>
</div>
<script src="script.js"></script>
</body>
Expand Down
133 changes: 92 additions & 41 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,115 @@
const cards = document.querySelectorAll(".card"),
timeTag = document.querySelector(".time b"),
flipsTag = document.querySelector(".flips b"),
refreshBtn = document.querySelector(".details button");
let maxTime = 20;
const cards = document.querySelectorAll(".card");
const timeTag = document.querySelector(".time b");
const flipsTag = document.querySelector(".flips b");
const refreshBtn = document.querySelector(".details button");
const difficultySelect = document.getElementById("difficulty-select");
const flipSound = new Audio("flip.wav"); // Replace with the actual path to your flip sound file
const matchSound = new Audio("match.wav"); // Replace with the actual path to your match sound file
const wrongSound = new Audio("wrong.wav");
let maxTime = 0;
let maxFlips = 0;
let timeLeft = maxTime;
let flips = 0;
let matchedCards = 0;
let disableDeck = false;
let isPlaying = false;
let cardOne, cardTwo, timer;
function setDifficulty() {
const selectedDifficulty = difficultySelect.value;

switch (selectedDifficulty) {
case "easy":
maxTime = 60;
maxFlips = 12;
break;
case "medium":
maxTime = 45;
maxFlips = 10;
break;
case "hard":
maxTime = 30;
maxFlips = 8;
break;
default:
maxTime = 60;
maxFlips = 12;
break;
}
}
function initGame() {
setDifficulty();
timeLeft = maxTime;
flips = 0;
matchedCards = 0;
cardOne = cardTwo = "";
clearInterval(timer);
timeTag.innerText = timeLeft;
flipsTag.innerText = flips;
disableDeck = isPlaying = false;
shuffleCards();
}
function initTimer(){
if(timeLeft <= 0){
return clearInterval(timer);
}
timeLeft--;
timeTag.innerText=timeLeft;
}
function flipCard({target: clickedCard}){
if(!isPlaying){
function shuffleCards(){
timeLeft = maxTime;
flips = matchedCards = 0;
cardOne = cardTwo = ""
clearInterval(timer);
timeTag.innerText = timeLeft;
flipsTag.innerText = flips;
disableDeck = isPlaying = false;
const imagePaths = ["card2.jpg","card3.jpg","card4.jpg","card5.jpg","card6.jpg","card7.jpg","card2.jpg","card3.jpg","card4.jpg","card5.jpg","card6.jpg","card7.jpg"];
shuffleArray(imagePaths);
cards.forEach((card, index) => {
card.classList.remove("flip");
let image = card.querySelector(".back-view img");
image.src = imagePaths[index];
card.addEventListener("click", flipCard);
});
}
function flipCard({ target: clickedCard }) {
if (!isPlaying) {
isPlaying = true;
timer=setInterval(initTimer, 1000);
timer = setInterval(initTimer, 1000);
}
if(clickedCard !== cardOne && !disableDeck && timeLeft > 0){
if (clickedCard !== cardOne && !disableDeck && timeLeft > 0) {
flips++;
flipsTag.innerText = flips;
clickedCard.classList.add("flip");
if(!cardOne){
return cardOne = clickedCard;
flipSound.play(); // Play flip sound

if (!cardOne) {
return (cardOne = clickedCard);
}
cardTwo = clickedCard;
disableDeck = true;
let cardOneIcon = cardOne.querySelector(".back-view i").classList.value;
cardTwoIcon=cardTwo.querySelector(".back-view i").classList.value;
matchCards(cardOneIcon, cardTwoIcon);
let cardOneImage = cardOne.querySelector(".back-view img").src;
let cardTwoImage = cardTwo.querySelector(".back-view img").src;

matchCards(cardOneImage, cardTwoImage);
}
}
function matchCards(icon1, icon2) {
if (icon1 == icon2) {
function matchCards(image1, image2) {
if (image1 === image2) {
matchedCards++;
if (matchedCards == 6 && timeLeft > 0) {
if (matchedCards === 6 && timeLeft > 0) {
clearInterval(timer);
}
cardOne.removeEventListener("click", flipCard);
cardTwo.removeEventListener("click", flipCard);
cardOne = cardTwo = "";
disableDeck = false;
matchSound.play();
} else {
setTimeout(() => {
cardOne.classList.add("shake");
cardTwo.classList.add("shake");
wrongSound.play();
}, 400);
setTimeout(() => {
cardOne.classList.remove("shake", "flip");
Expand All @@ -58,27 +119,17 @@ function matchCards(icon1, icon2) {
}, 1200);
}
}
function shuffleCards(){
timeLeft = maxTime;
flips = matchedCards = 0;
cardOne = cardTwo = ""
clearInterval(timer);
timeTag.innerText = timeLeft;
flipsTag.innerText = flips;
disableDeck = isPlaying = false;
let arr = ["bxl-tiktok", "bxl-instagram-alt", "bxl-facebook-circle", "bxl-twitter", "bxl-whatsapp", "bxl-youtube", "bxl-tiktok", "bxl-instagram-alt", "bxl-facebook-circle", "bxl-twitter", "bxl-whatsapp", "bxl-youtube"];
arr.sort(() => Math.random() > 0.5 ? 1 : -1);
cards.forEach((card, index) =>{
card.classList.remove("flip");
let iconTag = card.querySelector(".back-view i");
setTimeout(() =>{
iconTag.classList.value = `bx ${arr[index]}`;
}, 500);
card.addEventListener("click", flipCard);
});
}
shuffleCards();
refreshBtn.addEventListener("click",shuffleCards);
cards.forEach(card =>{
card.addEventListener("click",flipCard);
});
refreshBtn.addEventListener("click", initGame);
cards.forEach((card) => {
card.addEventListener("click", flipCard);
});
document.addEventListener("DOMContentLoaded", function () {
initGame();
});

function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
Loading

0 comments on commit 79cdbb9

Please sign in to comment.