Merge branch 'Main' into Main

dhairyagothi · Jun 17, 2024 · c50a830 · c50a830
2 parents fa702c8 + 115e926
commit c50a830
Show file tree

Hide file tree

Showing 4 changed files with 337 additions and 1 deletion.
diff --git a/public/MemoryGame/index.html b/public/MemoryGame/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Memory Game</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js" defer></script>
+    <style type="text/css">
+        body {
+            background-image: url('abc.jpg');
+            background-size: cover;
+            background-attachment: fixed;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="game">
+        <h1 class="title">Memory Game</h1>
+        <div class="controls">
+            <button>Start</button>
+            <div class="stats">
+                <div class="moves">0 Moves</div>
+                <div class="timer">Time: 0 sec</div>
+            </div>
+        </div>
+        <div class="board-container">
+            <div class="board" data-dimension="4"></div>
+            <div class="win">You won!</div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/public/MemoryGame/script.js b/public/MemoryGame/script.js
@@ -0,0 +1,146 @@
+const selectors = {
+    boardContainer: document.querySelector('.board-container'),
+    board: document.querySelector('.board'),
+    moves: document.querySelector('.moves'),
+    timer: document.querySelector('.timer'),
+    start: document.querySelector('button'),
+    win: document.querySelector('.win')
+}
+
+const state = {
+    gameStarted: false,
+    flippedCards: 0,
+    totalFlips: 0,
+    totalTime: 0,
+    loop: null
+}
+
+const shuffle = array => {
+    const clonedArray = [...array]
+
+    for (let i = clonedArray.length - 1; i > 0; i--) {
+        const randomIndex = Math.floor(Math.random() * (i + 1))
+        const original = clonedArray[i]
+
+        clonedArray[i] = clonedArray[randomIndex]
+        clonedArray[randomIndex] = original
+    }
+
+    return clonedArray
+}
+
+const pickRandom = (array, items) => {
+    const clonedArray = [...array]
+    const randomPicks = []
+
+    for (let i = 0; i < items; i++) {
+        const randomIndex = Math.floor(Math.random() * clonedArray.length)
+
+        randomPicks.push(clonedArray[randomIndex])
+        clonedArray.splice(randomIndex, 1)
+    }
+
+    return randomPicks
+}
+
+const generateGame = () => {
+    const dimensions = selectors.board.getAttribute('data-dimension')  
+
+    if (dimensions % 2 !== 0) {
+        throw new Error("The dimension of the board must be an even number.")
+    }
+
+    const emojis = ['🥔', '🍒', '🥑', '🌽', '🥕', '🍇', '🍉', '🍌', '🥭', '🍍']
+    const picks = pickRandom(emojis, (dimensions * dimensions) / 2) 
+    const items = shuffle([...picks, ...picks])
+    const cards = `
+        <div class="board" style="grid-template-columns: repeat(${dimensions}, auto)">
+            ${items.map(item => `
+                <div class="card">
+                    <div class="card-front"></div>
+                    <div class="card-back">${item}</div>
+                </div>
+            `).join('')}
+       </div>
+    `
+
+    const parser = new DOMParser().parseFromString(cards, 'text/html')
+
+    selectors.board.replaceWith(parser.querySelector('.board'))
+}
+
+const startGame = () => {
+    state.gameStarted = true
+    selectors.start.classList.add('disabled')
+
+    state.loop = setInterval(() => {
+        state.totalTime++
+
+        selectors.moves.innerText = `${state.totalFlips} moves`
+        selectors.timer.innerText = `Time: ${state.totalTime} sec`
+    }, 1000)
+}
+
+const flipBackCards = () => {
+    document.querySelectorAll('.card:not(.matched)').forEach(card => {
+        card.classList.remove('flipped')
+    })
+
+    state.flippedCards = 0
+}
+
+const flipCard = card => {
+    state.flippedCards++
+    state.totalFlips++
+
+    if (!state.gameStarted) {
+        startGame()
+    }
+
+    if (state.flippedCards <= 2) {
+        card.classList.add('flipped')
+    }
+
+    if (state.flippedCards === 2) {
+        const flippedCards = document.querySelectorAll('.flipped:not(.matched)')
+
+        if (flippedCards[0].innerText === flippedCards[1].innerText) {
+            flippedCards[0].classList.add('matched')
+            flippedCards[1].classList.add('matched')
+        }
+
+        setTimeout(() => {
+            flipBackCards()
+        }, 1000)
+    }
+    if (!document.querySelectorAll('.card:not(.flipped)').length) {
+        setTimeout(() => {
+            selectors.boardContainer.classList.add('flipped')
+            selectors.win.innerHTML = `
+                <span class="win-text">
+                    You won!<br />
+                    with <span class="highlight">${state.totalFlips}</span> moves<br />
+                    under <span class="highlight">${state.totalTime}</span> seconds
+                </span>
+            `
+
+            clearInterval(state.loop)
+        }, 1000)
+    }
+}
+
+const attachEventListeners = () => {
+    document.addEventListener('click', event => {
+        const eventTarget = event.target
+        const eventParent = eventTarget.parentElement
+
+        if (eventTarget.className.includes('card') && !eventParent.className.includes('flipped')) {
+            flipCard(eventParent)
+        } else if (eventTarget.nodeName === 'BUTTON' && !eventTarget.className.includes('disabled')) {
+            startGame()
+        }
+    })
+}
+
+generateGame()
+attachEventListeners()
diff --git a/public/MemoryGame/style.css b/public/MemoryGame/style.css
@@ -0,0 +1,150 @@
+html {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(325deg, #03001e 0%, #9b318a 30%, #121112 70%, #fdeff9 100%);
+    font-family: Arial, Helvetica, sans-serif;
+    overflow: hidden;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.game {
+    position: absolute;
+    width: 100%;
+    max-width: 600px;
+    text-align: center;
+}
+
+.title {
+    font-size: 36px;
+    color: #ffffff;
+    margin-bottom: 20px;
+}
+
+.controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+    gap: 20px;
+}
+
+button {
+    background: #282A3A;
+    color: #FFF;
+    border-radius: 5px;
+    padding: 10px 20px;
+    border: 0;
+    cursor: pointer;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 18pt;
+    font-weight: bold;
+}
+
+.disabled {
+    color: #757575;
+}
+
+.stats {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #FFF;
+    font-size: 14pt;
+    font-weight: bold;
+}
+
+.board-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+}
+
+.board,
+.win {
+    border-radius: 5px;
+    box-shadow: 0 25px 50px rgb(33 33 33 / 25%);
+    background: linear-gradient(135deg, #03001e 0%, #7303c0 0%, #ec38bc 50%, #fdeff9 100%);
+    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
+    backface-visibility: hidden;
+}
+
+.board {
+    padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(4, auto);
+    gap: 20px;
+}
+
+.board-container.flipped .board {
+    transform: rotateY(180deg) rotateZ(50deg);
+}
+
+.board-container.flipped .win {
+    transform: rotateY(0) rotateZ(0);
+}
+
+.card {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    cursor: pointer;
+}
+
+.card-front,
+.card-back {
+    position: absolute;
+    border-radius: 5px;
+    width: 100%;
+    height: 100%;
+    background: #282A3A;
+    transition: transform .6s cubic-bezier(0.4, 0.0, 0.2, 1);
+    backface-visibility: hidden;
+}
+
+.card-back {
+    transform: rotateY(180deg) rotateZ(50deg);
+    font-size: 28pt;
+    user-select: none;
+    text-align: center;
+    line-height: 100px;
+    background: #FDF8E6;
+}
+
+.card.flipped .card-front {
+    transform: rotateY(180deg) rotateZ(50deg);
+}
+
+.card.flipped .card-back {
+    transform: rotateY(0) rotateZ(0);
+}
+
+.win {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    background: #FDF8E6;
+    transform: rotateY(180deg) rotateZ(50deg);
+}
+
+.win-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 21pt;
+    color: #282A3A;
+}
+
+.highlight {
+    color: #7303c0;
+}
diff --git a/public/index.html b/public/index.html
@@ -39,7 +39,8 @@
         <div class="table">DAY-24.] Chat Bot <a href="./AI ChatBot/chatbot.html">DEMO</a></div>
         <div class="table">DAY-25.] Tic-Tac-Toe<a href="TicTacToe/index.html">DEMO</a></div>
         <div class="table">DAY-26.] Maze game <a href="./Maze-Game-main/index.html">DEMO</a></div>
-        <div class="table">DAY-27.] WORDLE <a href="./WORDLE/index.html">DEMO</a></div>
+        <div class="table">DAY-27.] MemoryGame <a href="./MemoryGame/index.html">DEMO</a></div>
+        <div class="table">DAY-28.] WORDLE <a href="./WORDLE/index.html">DEMO</a></div>
     </div>
 
     <script>