[{"id":274,"created_at":"2024-11-20T00:36:33.237581+00:00","html":"

\r\n

\r\n\r\n \r\n\r\n

\r\n \r\n","css":" * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n min-height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n background: radial-gradient(circle at 50% -20%, #4f46e5, #1e1b4b);\r\n font-family: 'Segoe UI', sans-serif;\r\n padding: 2rem;\r\n position: relative;\r\n overflow: auto;\r\n }\r\n\r\n /* Animated background */\r\n .background-shapes {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: -1;\r\n opacity: 0.5;\r\n }\r\n\r\n .shape {\r\n position: absolute;\r\n background: linear-gradient(45deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.3));\r\n border-radius: 50%;\r\n filter: blur(50px);\r\n animation: floatAnimation 20s infinite linear;\r\n }\r\n\r\n @keyframes floatAnimation {\r\n 0% {\r\n transform: translate(0, 0) rotate(0deg);\r\n }\r\n\r\n 50% {\r\n transform: translate(100px, 100px) rotate(180deg);\r\n }\r\n\r\n 100% {\r\n transform: translate(0, 0) rotate(360deg);\r\n }\r\n }\r\n\r\n .header {\r\n text-align: center;\r\n color: white;\r\n margin-bottom: 3rem;\r\n position: relative;\r\n }\r\n\r\n .header h1 {\r\n font-size: 3.5rem;\r\n font-weight: 800;\r\n text-transform: uppercase;\r\n letter-spacing: 4px;\r\n margin-bottom: 1rem;\r\n background: linear-gradient(135deg, #fff, #a5b4fc);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n text-shadow: 0 0 30px rgba(165, 180, 252, 0.5);\r\n }\r\n\r\n .stats {\r\n display: flex;\r\n gap: 2rem;\r\n justify-content: center;\r\n margin-top: 1rem;\r\n }\r\n\r\n .stat-box {\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 1rem;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.875rem;\r\n color: #a5b4fc;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .stat-value {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: white;\r\n }\r\n\r\n .game-board {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 1.2rem;\r\n max-width: 400px;\r\n width: 100%;\r\n padding: 2rem;\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 2rem;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n }\r\n\r\n .card {\r\n aspect-ratio: 3/4;\r\n perspective: 1000px;\r\n cursor: pointer;\r\n }\r\n\r\n .card-inner {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n transform-style: preserve-3d;\r\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .card-face {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n backface-visibility: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.2rem;\r\n border-radius: 1rem;\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),\r\n 0 2px 4px -1px rgba(0, 0, 0, 0.06);\r\n }\r\n\r\n .card-front {\r\n background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));\r\n transform: rotateY(180deg);\r\n color: white;\r\n }\r\n\r\n .card-back {\r\n background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));\r\n font-size: 2rem;\r\n color: rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .matched {\r\n background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3));\r\n border-color: rgba(16, 185, 129, 0.4);\r\n box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);\r\n }\r\n\r\n .reset-button {\r\n margin-top: 3rem;\r\n padding: 1rem 2.5rem;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n background: linear-gradient(135deg, #4f46e5, #7c3aed);\r\n color: white;\r\n border: none;\r\n border-radius: 1rem;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);\r\n }\r\n\r\n .reset-button:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(79, 70, 229, 0.6);\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .game-board {\r\n gap: 0.8rem;\r\n padding: 1rem;\r\n }\r\n\r\n .card-face {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .stats {\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n }","js":"const emojis = ['🎨', '🎮', '🎲', '🎪', '🎭', '😃', '🎸', '🎯'];\r\nconst gameBoard = document.getElementById('gameBoard');\r\nconst movesDisplay = document.getElementById('moves');\r\nconst timerDisplay = document.getElementById('timer');\r\nconst resetButton = document.getElementById('resetButton');\r\n\r\nlet cards = [];\r\nlet flippedCards = [];\r\nlet moves = 0;\r\nlet canFlip = true;\r\nlet gameTimer;\r\nlet startTime;\r\n\r\nfunction updateTimer() {\r\n const now = new Date().getTime();\r\n const elapsed = Math.floor((now - startTime) / 1000);\r\n const minutes = Math.floor(elapsed / 60);\r\n const seconds = elapsed % 60;\r\n timerDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;\r\n}\r\n\r\nfunction createCard(emoji) {\r\n const card = document.createElement('div');\r\n card.className = 'card';\r\n card.innerHTML = `\r\n

\r\n

${emoji}

\r\n

\r\n `;\r\n return card;\r\n}\r\n\r\nfunction shuffleArray(array) {\r\n for (let i = array.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [array[i], array[j]] = [array[j], array[i]];\r\n }\r\n return array;\r\n}\r\n\r\nfunction initializeGame() {\r\n gameBoard.innerHTML = '';\r\n cards = [];\r\n flippedCards = [];\r\n moves = 0;\r\n canFlip = true;\r\n movesDisplay.textContent = moves;\r\n\r\n clearInterval(gameTimer);\r\n startTime = new Date().getTime();\r\n gameTimer = setInterval(updateTimer, 1000);\r\n\r\n const gameEmojis = [...emojis, ...emojis];\r\n shuffleArray(gameEmojis);\r\n\r\n gameEmojis.forEach((emoji, index) => {\r\n const card = createCard(emoji);\r\n cards.push(card);\r\n gameBoard.appendChild(card);\r\n\r\n anime({\r\n targets: card,\r\n scale: [0, 1],\r\n opacity: [0, 1],\r\n delay: index * 50,\r\n duration: 600,\r\n easing: 'easeOutElastic(1, .8)'\r\n });\r\n\r\n card.addEventListener('click', () => flipCard(card, index));\r\n });\r\n}\r\n\r\nfunction flipCard(card, index) {\r\n if (!canFlip || flippedCards.includes(card) ||\r\n card.querySelector('.card-front').classList.contains('matched')) {\r\n return;\r\n }\r\n\r\n const cardInner = card.querySelector('.card-inner');\r\n cardInner.style.transform = 'rotateY(180deg)';\r\n\r\n // Add hover glow effect\r\n anime({\r\n targets: card,\r\n boxShadow: '0 0 20px rgba(99, 102, 241, 0.5)',\r\n duration: 300,\r\n easing: 'easeOutQuad'\r\n });\r\n\r\n flippedCards.push(card);\r\n\r\n if (flippedCards.length === 2) {\r\n moves++;\r\n movesDisplay.textContent = moves;\r\n canFlip = false;\r\n\r\n const [card1, card2] = flippedCards;\r\n const emoji1 = card1.querySelector('.card-front').textContent;\r\n const emoji2 = card2.querySelector('.card-front').textContent;\r\n\r\n if (emoji1 === emoji2) {\r\n setTimeout(() => {\r\n [card1, card2].forEach(card => {\r\n const front = card.querySelector('.card-front');\r\n front.classList.add('matched');\r\n anime({\r\n targets: card,\r\n scale: [1, 1.1, 1],\r\n duration: 500,\r\n easing: 'easeOutElastic(1, .8)'\r\n });\r\n });\r\n flippedCards = [];\r\n canFlip = true;\r\n checkWin();\r\n }, 500);\r\n } else {\r\n setTimeout(() => {\r\n flippedCards.forEach(card => {\r\n const cardInner = card.querySelector('.card-inner');\r\n cardInner.style.transform = 'rotateY(0deg)';\r\n anime({\r\n targets: card,\r\n translateX: [-10, 10, -10, 10, 0],\r\n duration: 400,\r\n easing: 'easeInOutSine'\r\n });\r\n });\r\n flippedCards = [];\r\n canFlip = true;\r\n }, 1000);\r\n }\r\n }\r\n}\r\n\r\nfunction checkWin() {\r\n const matchedCards = document.querySelectorAll('.matched');\r\n if (matchedCards.length === cards.length) {\r\n clearInterval(gameTimer);\r\n setTimeout(() => {\r\n anime({\r\n targets: '.card',\r\n scale: [1, 1.1, 1],\r\n rotate: '1turn',\r\n delay: anime.stagger(100),\r\n duration: 1000,\r\n easing: 'easeInOutQuad',\r\n complete: () => {\r\n const time = timerDisplay.textContent;\r\n alert(`Congratulations! You won in ${moves} moves and ${time}!`);\r\n }\r\n });\r\n }, 500);\r\n }\r\n}\r\n\r\nresetButton.addEventListener('click', () => {\r\n anime({\r\n targets: '.card',\r\n scale: [1, 0],\r\n opacity: [1, 0],\r\n delay: anime.stagger(50),\r\n duration: 500,\r\n easing: 'easeInOutQuad',\r\n complete: initializeGame\r\n });\r\n});\r\n\r\ninitializeGame();","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"tUPSk9","description":"memory game - card flip","plugins":[{"css":{"tailwind":true,"bootstrap":false,"fontawesome":false,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":true,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":["fdafds"],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":143}],"profiles":{"username":"devcanvas"}}]