{"id":174,"date":"2026-04-19T09:32:54","date_gmt":"2026-04-19T09:32:54","guid":{"rendered":"https:\/\/lab.rwb.my.id\/paud\/?page_id=174"},"modified":"2026-04-19T10:48:17","modified_gmt":"2026-04-19T10:48:17","slug":"game-3-memori","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/paud\/game-3-memori\/","title":{"rendered":"Game 3 Memori"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Memory Fun Game - Game Memori Seru<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;\n background: linear-gradient(135deg, #FFE4B5 0%, #FFB6C1 25%, #87CEEB 50%, #98FB98 75%, #FFE4B5 100%);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n overflow-x: hidden;\n position: relative;\n }\n\n header {\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: blur(10px);\n padding: 1rem;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n z-index: 100;\n position: relative;\n }\n\n .header-content {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1rem;\n }\n\n h1 {\n font-size: 2rem;\n background: linear-gradient(135deg, #FF69B4, #87CEEB);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-weight: bold;\n }\n\n .stats {\n display: flex;\n gap: 1.5rem;\n align-items: center;\n flex-wrap: wrap;\n }\n\n .stat-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 0.5rem 1rem;\n background: rgba(255, 182, 193, 0.3);\n border-radius: 15px;\n min-width: 80px;\n }\n\n .stat-label {\n font-size: 0.9rem;\n color: #333;\n font-weight: bold;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: bold;\n color: #FF69B4;\n }\n\n .controls {\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n }\n\n button {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 25px;\n font-size: 1rem;\n font-weight: bold;\n cursor: pointer;\n transition: all 0.3s ease;\n text-transform: uppercase;\n letter-spacing: 1px;\n font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;\n }\n\n .btn-primary {\n background: linear-gradient(135deg, #FF69B4, #FFB6C1);\n color: white;\n }\n\n .btn-success {\n background: linear-gradient(135deg, #98FB98, #90EE90);\n color: white;\n }\n\n .btn-warning {\n background: linear-gradient(135deg, #FFD700, #FFA500);\n color: white;\n }\n\n button:hover {\n transform: translateY(-3px) scale(1.05);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);\n }\n\n button:active {\n transform: translateY(-1px) scale(1.02);\n }\n\n button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n }\n\n .game-container {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 2rem;\n position: relative;\n }\n\n .main-game {\n background: rgba(255, 255, 255, 0.95);\n border-radius: 30px;\n padding: 2rem;\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);\n max-width: 900px;\n width: 100%;\n text-align: center;\n min-height: 500px;\n }\n\n .welcome-screen {\n text-align: center;\n padding: 2rem;\n }\n\n .character {\n font-size: 6rem;\n margin-bottom: 1rem;\n animation: bounce 2s ease-in-out infinite;\n }\n\n @keyframes bounce {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 25% { transform: translateY(-20px) rotate(-5deg); }\n 75% { transform: translateY(-20px) rotate(5deg); }\n }\n\n .difficulty-selector {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 2rem;\n margin: 2rem 0;\n }\n\n .difficulty-card {\n padding: 2rem;\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n border: 4px solid transparent;\n background: white;\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);\n }\n\n .difficulty-card:hover {\n transform: translateY(-8px) scale(1.05);\n box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);\n }\n\n .difficulty-card.selected {\n border-color: #FF69B4;\n background: linear-gradient(135deg, rgba(255, 182, 193, 0.3), rgba(135, 206, 235, 0.3));\n }\n\n .difficulty-icon {\n font-size: 4rem;\n margin-bottom: 1rem;\n }\n\n .difficulty-title {\n font-size: 1.5rem;\n font-weight: bold;\n color: #333;\n margin-bottom: 0.5rem;\n }\n\n .difficulty-desc {\n color: #666;\n font-size: 1rem;\n }\n\n .game-area {\n display: none;\n }\n\n .game-info {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 2rem;\n flex-wrap: wrap;\n gap: 1rem;\n }\n\n .moves-counter {\n background: rgba(255, 182, 193, 0.3);\n padding: 1rem 1.5rem;\n border-radius: 15px;\n font-size: 1.2rem;\n font-weight: bold;\n color: #FF69B4;\n }\n\n .timer {\n background: rgba(152, 251, 152, 0.3);\n padding: 1rem 1.5rem;\n border-radius: 15px;\n font-size: 1.2rem;\n font-weight: bold;\n color: #90EE90;\n }\n\n .memory-grid {\n display: grid;\n gap: 1rem;\n margin: 2rem 0;\n justify-content: center;\n }\n\n .memory-grid.easy {\n grid-template-columns: repeat(3, 1fr);\n max-width: 400px;\n margin: 2rem auto;\n }\n\n .memory-grid.medium {\n grid-template-columns: repeat(4, 1fr);\n max-width: 500px;\n margin: 2rem auto;\n }\n\n .memory-grid.hard {\n grid-template-columns: repeat(4, 1fr);\n max-width: 500px;\n margin: 2rem auto;\n }\n\n .memory-card {\n aspect-ratio: 1;\n background: linear-gradient(135deg, #87CEEB, #98FB98);\n border-radius: 15px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 3rem;\n border: 3px solid white;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n position: relative;\n transform-style: preserve-3d;\n }\n\n .memory-card:hover {\n transform: scale(1.05);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);\n }\n\n .memory-card.flipped {\n transform: rotateY(180deg);\n background: linear-gradient(135deg, #FFB6C1, #FF69B4);\n }\n\n .memory-card.matched {\n transform: rotateY(180deg);\n background: linear-gradient(135deg, #FFD700, #FFA500);\n border-color: #FFD700;\n box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);\n }\n\n .memory-card.matched::after {\n content: '\u2713';\n position: absolute;\n top: 5px;\n right: 5px;\n color: white;\n font-size: 1.5rem;\n font-weight: bold;\n }\n\n .card-front,\n .card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n }\n\n .card-front {\n transform: rotateY(180deg);\n background: linear-gradient(135deg, #FFB6C1, #FF69B4);\n color: white;\n font-size: 3rem;\n }\n\n .card-back {\n background: linear-gradient(135deg, #87CEEB, #98FB98);\n color: white;\n font-size: 2rem;\n font-weight: bold;\n }\n\n .card-back::before {\n content: '?';\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);\n }\n\n .streak-indicator {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 4rem;\n font-weight: bold;\n color: #FFD700;\n text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);\n pointer-events: none;\n opacity: 0;\n animation: streakAnimation 1.5s ease-out;\n z-index: 1000;\n }\n\n @keyframes streakAnimation {\n 0% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.5);\n }\n 50% {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.3);\n }\n 100% {\n opacity: 0;\n transform: translate(-50%, -50%) scale(1);\n }\n }\n\n .achievement {\n position: fixed;\n top: 20px;\n right: -400px;\n background: white;\n padding: 2rem;\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n transition: right 0.5s ease;\n z-index: 1000;\n max-width: 350px;\n }\n\n .achievement.show {\n right: 20px;\n }\n\n .achievement-title {\n font-weight: bold;\n color: #FF69B4;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 1.3rem;\n }\n\n .achievement-desc {\n color: #666;\n font-size: 1rem;\n }\n\n .stars {\n font-size: 2rem;\n margin: 1rem 0;\n }\n\n .star {\n color: #FFD700;\n display: inline-block;\n animation: starPulse 1s ease-in-out infinite;\n }\n\n .star:nth-child(2) {\n animation-delay: 0.3s;\n }\n\n .star:nth-child(3) {\n animation-delay: 0.6s;\n }\n\n @keyframes starPulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n }\n\n \/* Credit Footer Styles *\/\n .credit-footer {\n position: fixed;\n bottom: 10px;\n right: 15px;\n z-index: 50;\n opacity: 0.8;\n transition: all 0.3s ease;\n }\n\n .credit-footer:hover {\n opacity: 1;\n transform: translateY(-2px);\n }\n\n .credit-link {\n display: inline-flex;\n align-items: center;\n gap: 0.3rem;\n padding: 0.5rem 1rem;\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n text-decoration: none;\n color: #FF69B4;\n font-size: 0.85rem;\n font-weight: bold;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;\n }\n\n .credit-link:hover {\n background: rgba(255, 255, 255, 1);\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);\n transform: translateY(-2px);\n }\n\n .credit-link:active {\n transform: translateY(0);\n }\n\n \/* --- MOBILE RESPONSIVE --- *\/\n @media (max-width: 768px) {\n header {\n padding: 0.8rem 1rem;\n }\n\n .header-content {\n justify-content: center;\n text-align: center;\n gap: 0.8rem;\n }\n\n h1 {\n font-size: 1.3rem;\n width: 100%;\n justify-content: center;\n }\n\n .stats {\n gap: 0.5rem;\n width: 100%;\n justify-content: center;\n }\n\n .stat-item {\n min-width: 70px;\n padding: 0.4rem 0.6rem;\n }\n\n .stat-label {\n font-size: 0.75rem;\n }\n\n .stat-value {\n font-size: 1.2rem;\n }\n\n .controls {\n width: 100%;\n justify-content: center;\n }\n\n button {\n padding: 0.6rem 1rem;\n font-size: 0.85rem;\n }\n\n .game-container {\n padding: 1rem;\n }\n\n .main-game {\n padding: 1.5rem 1rem;\n min-height: auto;\n border-radius: 20px;\n }\n\n .welcome-screen {\n padding: 1rem 0;\n }\n\n .character {\n font-size: 4rem;\n }\n\n .difficulty-selector {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n\n .difficulty-card {\n padding: 1.2rem;\n }\n\n .difficulty-icon {\n font-size: 2.5rem;\n }\n\n .difficulty-title {\n font-size: 1.2rem;\n }\n\n .difficulty-desc {\n font-size: 0.9rem;\n }\n\n .game-info {\n justify-content: center;\n gap: 0.5rem;\n margin-bottom: 1rem;\n }\n\n .moves-counter, .timer {\n padding: 0.6rem 1rem;\n font-size: 1rem;\n }\n\n .memory-grid {\n gap: 0.5rem;\n margin: 1rem 0;\n }\n \n .memory-grid.easy {\n grid-template-columns: repeat(3, 1fr);\n max-width: 280px;\n }\n \n .memory-grid.medium,\n .memory-grid.hard {\n grid-template-columns: repeat(3, 1fr);\n max-width: 300px;\n }\n \n .memory-card {\n font-size: 2rem;\n }\n\n .card-front {\n font-size: 2.5rem;\n }\n\n .card-back {\n font-size: 1.5rem;\n }\n\n .memory-card.matched::after {\n font-size: 1rem;\n top: 2px;\n right: 2px;\n }\n\n .achievement {\n max-width: 90%;\n left: 5%;\n right: auto;\n top: -150px;\n }\n\n .achievement.show {\n top: 20px;\n right: auto;\n }\n\n .credit-footer {\n bottom: 5px;\n right: 10px;\n }\n\n .credit-link {\n font-size: 0.7rem;\n padding: 0.3rem 0.7rem;\n }\n\n \/* Override inline style grid pada hasil akhir game *\/\n .main-game div[style*=\"grid-template-columns\"] {\n grid-template-columns: 1fr !important;\n }\n }\n\n \/* --- EXTRA SMALL SCREENS --- *\/\n @media (max-width: 400px) {\n h1 {\n font-size: 1.1rem;\n }\n\n .stat-item {\n min-width: 60px;\n }\n\n .stat-value {\n font-size: 1rem;\n }\n\n button {\n padding: 0.5rem 0.8rem;\n font-size: 0.8rem;\n }\n\n .memory-grid.easy {\n max-width: 240px;\n }\n\n .memory-grid.medium,\n .memory-grid.hard {\n max-width: 260px;\n }\n\n .card-front {\n font-size: 2rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <header>\n <div class=\"header-content\">\n <h1>\n <span>\ud83e\udde0<\/span>\n Memory Fun Game\n <\/h1>\n <div class=\"stats\">\n <div class=\"stat-item\">\n <span class=\"stat-label\">Skor<\/span>\n <span class=\"stat-value\" id=\"score\">0<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Langkah<\/span>\n <span class=\"stat-value\" id=\"moves\">0<\/span>\n <\/div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Level<\/span>\n <span class=\"stat-value\" id=\"level\">-<\/span>\n <\/div>\n <\/div>\n <div class=\"controls\">\n <button class=\"btn-primary\" onclick=\"showMainMenu()\">Menu<\/button>\n <button class=\"btn-success\" onclick=\"restartGame()\">Ulang<\/button>\n <button class=\"btn-warning\" onclick=\"showHint()\">Petunjuk<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <main class=\"game-container\">\n <div class=\"main-game\" id=\"mainGame\">\n <div class=\"welcome-screen\" id=\"welcomeScreen\">\n <div class=\"character\">\ud83e\udde9<\/div>\n <h2 style=\"color: #FF69B4; font-size: 2.5rem; margin-bottom: 1rem;\">Memory Fun!<\/h2>\n <p style=\"color: #666; font-size: 1.3rem; margin-bottom: 2rem;\">Cocokkan kartu yang sama!<\/p>\n \n <h3 style=\"color: #FF69B4; margin-bottom: 1rem;\">Pilih Tingkat Kesulitan:<\/h3>\n <div class=\"difficulty-selector\">\n <div class=\"difficulty-card\" onclick=\"selectDifficulty('easy')\">\n <div class=\"difficulty-icon\">\ud83c\udf1f<\/div>\n <div class=\"difficulty-title\">Mudah<\/div>\n <div class=\"difficulty-desc\">6 kartu (3 pasang)<\/div>\n <\/div>\n <div class=\"difficulty-card\" onclick=\"selectDifficulty('medium')\">\n <div class=\"difficulty-icon\">\ud83c\udf1f\ud83c\udf1f<\/div>\n <div class=\"difficulty-title\">Sedang<\/div>\n <div class=\"difficulty-desc\">8 kartu (4 pasang)<\/div>\n <\/div>\n <div class=\"difficulty-card\" onclick=\"selectDifficulty('hard')\">\n <div class=\"difficulty-icon\">\ud83c\udf1f\ud83c\udf1f\ud83c\udf1f<\/div>\n <div class=\"difficulty-title\">Sulit<\/div>\n <div class=\"difficulty-desc\">12 kartu (6 pasang)<\/div>\n <\/div>\n <\/div>\n \n <button class=\"btn-primary\" onclick=\"startGame()\" style=\"margin-top: 2rem; font-size: 1.3rem; padding: 1rem 2rem;\">Mulai Bermain!<\/button>\n <\/div>\n \n <div class=\"game-area\" id=\"gameArea\">\n <div class=\"game-info\">\n <div class=\"moves-counter\">Langkah: <span id=\"movesCount\">0<\/span><\/div>\n <div class=\"timer\">Waktu: <span id=\"timeCount\">0<\/span>s<\/div>\n <\/div>\n \n <div class=\"memory-grid\" id=\"memoryGrid\">\n <!-- Memory cards will be generated here -->\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <!-- Credit Footer -->\n <footer class=\"credit-footer\">\n <a href=\"https:\/\/rwb.my.id\" target=\"_blank\" class=\"credit-link\" title=\"Visit Rudi Web Builder\">\n \ud83d\udca1Created\ud83d\udc23Rudi Web Builder\n <\/a>\n <\/footer>\n\n <div class=\"streak-indicator\" id=\"streakIndicator\"><\/div>\n <div class=\"achievement\" id=\"achievement\">\n <div class=\"achievement-title\" id=\"achievementTitle\"><\/div>\n <div class=\"achievement-desc\" id=\"achievementDesc\"><\/div>\n <\/div>\n\n <script>\n \/\/ Card data for memory game\n const cardData = {\n easy: [\n { emoji: '\ud83c\udf4e', name: 'apel' },\n { emoji: '\ud83c\udf4c', name: 'pisang' },\n { emoji: '\ud83c\udf53', name: 'stroberi' }\n ],\n medium: [\n { emoji: '\ud83c\udf4e', name: 'apel' },\n { emoji: '\ud83c\udf4c', name: 'pisang' },\n { emoji: '\ud83c\udf53', name: 'stroberi' },\n { emoji: '\ud83c\udf4a', name: 'jeruk' }\n ],\n hard: [\n { emoji: '\ud83c\udf4e', name: 'apel' },\n { emoji: '\ud83c\udf4c', name: 'pisang' },\n { emoji: '\ud83c\udf53', name: 'stroberi' },\n { emoji: '\ud83c\udf4a', name: 'jeruk' },\n { emoji: '\ud83c\udf47', name: 'anggur' },\n { emoji: '\ud83c\udf52', name: 'ceri' }\n ]\n };\n\n \/\/ Game state\n let gameState = {\n score: 0,\n moves: 0,\n level: 1,\n difficulty: null,\n cards: [],\n flippedCards: [],\n matchedPairs: 0,\n startTime: null,\n timerInterval: null,\n isProcessing: false,\n hintsUsed: 0\n };\n\n \/\/ Audio context\n let audioContext;\n\n \/\/ Initialize audio\n function initAudio() {\n if (!audioContext) {\n audioContext = new (window.AudioContext || window.webkitAudioContext)();\n }\n }\n\n \/\/ Play sound\n function playSound(type) {\n if (!audioContext) return;\n\n const oscillator = audioContext.createOscillator();\n const gainNode = audioContext.createGain();\n \n oscillator.connect(gainNode);\n gainNode.connect(audioContext.destination);\n \n switch(type) {\n case 'flip':\n oscillator.frequency.value = 600;\n oscillator.type = 'sine';\n gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);\n break;\n case 'match':\n oscillator.frequency.value = 800;\n oscillator.type = 'sine';\n gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);\n break;\n case 'wrong':\n oscillator.frequency.value = 300;\n oscillator.type = 'sawtooth';\n gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);\n break;\n case 'win':\n const notes = [523, 659, 784, 1047]; \/\/ C, E, G, High C\n notes.forEach((freq, index) => {\n setTimeout(() => {\n const osc = audioContext.createOscillator();\n const gain = audioContext.createGain();\n osc.connect(gain);\n gain.connect(audioContext.destination);\n osc.frequency.value = freq;\n osc.type = 'sine';\n gain.gain.setValueAtTime(0.3, audioContext.currentTime);\n gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);\n osc.start(audioContext.currentTime);\n osc.stop(audioContext.currentTime + 0.3);\n }, index * 100);\n });\n return;\n }\n \n oscillator.start(audioContext.currentTime);\n oscillator.stop(audioContext.currentTime + 0.3);\n }\n\n \/\/ Select difficulty\n function selectDifficulty(difficulty) {\n gameState.difficulty = difficulty;\n \n \/\/ Update UI\n document.querySelectorAll('.difficulty-card').forEach(card => {\n card.classList.remove('selected');\n });\n event.target.closest('.difficulty-card').classList.add('selected');\n \n playSound('flip');\n }\n\n \/\/ Start game\n function startGame() {\n if (!gameState.difficulty) {\n showNotification('Pilih tingkat kesulitan dulu!', 'warning');\n return;\n }\n \n \/\/ Reset game state\n gameState.score = 0;\n gameState.moves = 0;\n gameState.matchedPairs = 0;\n gameState.flippedCards = [];\n gameState.startTime = Date.now();\n gameState.hintsUsed = 0;\n gameState.isProcessing = false;\n \n \/\/ Update UI\n document.getElementById('welcomeScreen').style.display = 'none';\n document.getElementById('gameArea').style.display = 'block';\n document.getElementById('level').textContent = gameState.difficulty === 'easy' ? 'Mudah' : \n gameState.difficulty === 'medium' ? 'Sedang' : 'Sulit';\n \n \/\/ Create cards\n createCards();\n \n \/\/ Start timer\n startTimer();\n \n \/\/ Update display\n updateDisplay();\n }\n\n \/\/ Create cards\n function createCards() {\n const cards = [...cardData[gameState.difficulty], ...cardData[gameState.difficulty]];\n gameState.cards = shuffleArray(cards);\n \n const grid = document.getElementById('memoryGrid');\n grid.className = `memory-grid ${gameState.difficulty}`;\n grid.innerHTML = '';\n \n gameState.cards.forEach((card, index) => {\n const cardElement = document.createElement('div');\n cardElement.className = 'memory-card';\n cardElement.dataset.index = index;\n cardElement.dataset.name = card.name;\n cardElement.onclick = () => flipCard(index);\n \n cardElement.innerHTML = `\n <div class=\"card-front\">${card.emoji}<\/div>\n <div class=\"card-back\"><\/div>\n `;\n \n grid.appendChild(cardElement);\n });\n }\n\n \/\/ Shuffle array\n function shuffleArray(array) {\n const newArray = [...array];\n for (let i = newArray.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [newArray[i], newArray[j]] = [newArray[j], newArray[i]];\n }\n return newArray;\n }\n\n \/\/ Flip card\n function flipCard(index) {\n if (gameState.isProcessing) return;\n \n const card = document.querySelector(`[data-index=\"${index}\"]`);\n \n \/\/ Check if card is already flipped or matched\n if (card.classList.contains('flipped') || card.classList.contains('matched')) {\n return;\n }\n \n \/\/ Check if two cards are already flipped\n if (gameState.flippedCards.length >= 2) {\n return;\n }\n \n \/\/ Flip the card\n card.classList.add('flipped');\n gameState.flippedCards.push(index);\n playSound('flip');\n \n \/\/ Check for match when two cards are flipped\n if (gameState.flippedCards.length === 2) {\n gameState.isProcessing = true;\n gameState.moves++;\n updateDisplay();\n \n setTimeout(() => {\n checkMatch();\n }, 1000);\n }\n }\n\n \/\/ Check for match\n function checkMatch() {\n const [first, second] = gameState.flippedCards;\n const firstCard = document.querySelector(`[data-index=\"${first}\"]`);\n const secondCard = document.querySelector(`[data-index=\"${second}\"]`);\n \n if (firstCard.dataset.name === secondCard.dataset.name) {\n \/\/ Match found!\n firstCard.classList.add('matched');\n secondCard.classList.add('matched');\n gameState.matchedPairs++;\n gameState.score += 10;\n \n playSound('match');\n showStreakIndicator('Cocok! \ud83c\udf89');\n checkAchievements();\n \n \/\/ Check for win\n if (gameState.matchedPairs === cardData[gameState.difficulty].length) {\n setTimeout(() => endGame(), 500);\n }\n } else {\n \/\/ No match\n playSound('wrong');\n showStreakIndicator('Coba lagi! \ud83d\ude0a');\n \n setTimeout(() => {\n firstCard.classList.remove('flipped');\n secondCard.classList.remove('flipped');\n }, 500);\n }\n \n gameState.flippedCards = [];\n gameState.isProcessing = false;\n updateDisplay();\n }\n\n \/\/ Show hint\n function showHint() {\n if (gameState.hintsUsed >= 3) {\n showNotification('Petunjuk sudah habis!', 'warning');\n return;\n }\n \n \/\/ Find unmatched cards\n const unmatchedCards = [];\n document.querySelectorAll('.memory-card:not(.matched)').forEach(card => {\n if (!card.classList.contains('flipped')) {\n unmatchedCards.push(card);\n }\n });\n \n if (unmatchedCards.length >= 2) {\n \/\/ Find a matching pair\n const cardName = unmatchedCards[0].dataset.name;\n const matchingCards = unmatchedCards.filter(card => card.dataset.name === cardName);\n \n if (matchingCards.length >= 2) {\n \/\/ Briefly show the matching cards\n matchingCards[0].classList.add('flipped');\n setTimeout(() => {\n matchingCards[0].classList.remove('flipped');\n }, 1000);\n \n gameState.hintsUsed++;\n gameState.score = Math.max(0, gameState.score - 5);\n updateDisplay();\n }\n }\n }\n\n \/\/ Start timer\n function startTimer() {\n gameState.timerInterval = setInterval(() => {\n const elapsed = Math.floor((Date.now() - gameState.startTime) \/ 1000);\n document.getElementById('timeCount').textContent = elapsed;\n }, 1000);\n }\n\n \/\/ End game\n function endGame() {\n clearInterval(gameState.timerInterval);\n \n const timeTaken = Math.floor((Date.now() - gameState.startTime) \/ 1000);\n const efficiency = Math.round((cardData[gameState.difficulty].length \/ gameState.moves) * 100);\n \n \/\/ Calculate stars\n let stars = 1;\n if (efficiency >= 80) stars = 3;\n else if (efficiency >= 60) stars = 2;\n \n \/\/ Show results\n showGameResults(stars, timeTaken, efficiency);\n }\n\n \/\/ Show game results\n function showGameResults(stars, time, efficiency) {\n const mainGame = document.getElementById('mainGame');\n \n mainGame.innerHTML = `\n <div style=\"text-align: center; padding: 2rem;\">\n <h2 style=\"color: #FF69B4; font-size: 3rem; margin-bottom: 2rem;\">\ud83c\udf89 Selesai!<\/h2>\n \n <div class=\"stars\">\n ${Array(stars).fill('\u2b50').join('')}\n <\/div>\n \n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 2rem 0;\">\n <div style=\"background: rgba(255, 182, 193, 0.3); padding: 1.5rem; border-radius: 15px;\">\n <div style=\"font-size: 2rem; font-weight: bold; color: #FF69B4;\">${gameState.score}<\/div>\n <div style=\"color: #666;\">Skor<\/div>\n <\/div>\n <div style=\"background: rgba(152, 251, 152, 0.3); padding: 1.5rem; border-radius: 15px;\">\n <div style=\"font-size: 2rem; font-weight: bold; color: #90EE90;\">${gameState.moves}<\/div>\n <div style=\"color: #666;\">Langkah<\/div>\n <\/div>\n <div style=\"background: rgba(255, 215, 0, 0.3); padding: 1.5rem; border-radius: 15px;\">\n <div style=\"font-size: 2rem; font-weight: bold; color: #FFD700;\">${time}s<\/div>\n <div style=\"color: #666;\">Waktu<\/div>\n <\/div>\n <\/div>\n \n <div style=\"margin: 2rem 0;\">\n ${efficiency >= 80 ? '<div style=\"background: linear-gradient(135deg, #FFD700, #FFA500); color: white; padding: 1rem 2rem; border-radius: 25px; display: inline-block; font-size: 1.3rem; font-weight: bold;\">\ud83c\udfc6 Sempurna!<\/div>' : ''}\n ${efficiency >= 60 ? '<div style=\"background: linear-gradient(135deg, #98FB98, #90EE90); color: white; padding: 1rem 2rem; border-radius: 25px; display: inline-block; font-size: 1.3rem; font-weight: bold;\">\ud83c\udf1f Hebat!<\/div>' : ''}\n ${efficiency < 60 ? '<div style=\"background: linear-gradient(135deg, #87CEEB, #FFB6C1); color: white; padding: 1rem 2rem; border-radius: 25px; display: inline-block; font-size: 1.3rem; font-weight: bold;\">\ud83d\udcaa Terus Belajar!<\/div>' : ''}\n <\/div>\n \n <button class=\"btn-primary\" onclick=\"location.reload()\" style=\"font-size: 1.3rem; padding: 1rem 2rem;\">Main Lagi!<\/button>\n <\/div>\n `;\n \n \/\/ Play celebration sound\n if (stars >= 2) {\n playSound('win');\n }\n }\n\n \/\/ Show streak indicator\n function showStreakIndicator(message) {\n const indicator = document.getElementById('streakIndicator');\n indicator.textContent = message;\n indicator.style.opacity = '1';\n indicator.style.animation = 'none';\n \n setTimeout(() => {\n indicator.style.animation = 'streakAnimation 1.5s ease-out';\n }, 10);\n }\n\n \/\/ Check achievements\n function checkAchievements() {\n if (gameState.matchedPairs === 2) {\n showAchievement('\u2b50 2 Pasang!', 'Kamu hebat!');\n } else if (gameState.matchedPairs === 4) {\n showAchievement('\ud83c\udfc6 4 Pasang!', 'Luar biasa!');\n } else if (gameState.matchedPairs === 6) {\n showAchievement('\ud83c\udf1f 6 Pasang!', 'Sempurna!');\n }\n }\n\n \/\/ Show achievement\n function showAchievement(title, description) {\n const achievement = document.getElementById('achievement');\n document.getElementById('achievementTitle').innerHTML = title;\n document.getElementById('achievementDesc').textContent = description;\n \n achievement.classList.add('show');\n playSound('match');\n \n setTimeout(() => {\n achievement.classList.remove('show');\n }, 3000);\n }\n\n \/\/ Update display\n function updateDisplay() {\n document.getElementById('score').textContent = gameState.score;\n document.getElementById('moves').textContent = gameState.moves;\n document.getElementById('movesCount').textContent = gameState.moves;\n }\n\n \/\/ Show main menu\n function showMainMenu() {\n document.getElementById('welcomeScreen').style.display = 'block';\n document.getElementById('gameArea').style.display = 'none';\n clearInterval(gameState.timerInterval);\n }\n\n \/\/ Restart game\n function restartGame() {\n if (gameState.difficulty) {\n startGame();\n } else {\n showNotification('Pilih tingkat kesulitan dulu!', 'warning');\n }\n }\n\n \/\/ Show notification\n function showNotification(message, type) {\n const notification = document.createElement('div');\n notification.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: ${type === 'warning' ? 'linear-gradient(135deg, #FFB6C1, #FF69B4)' : 'linear-gradient(135deg, #98FB98, #90EE90)'};\n color: white;\n padding: 2rem 3rem;\n border-radius: 20px;\n font-size: 1.5rem;\n font-weight: bold;\n z-index: 2000;\n animation: slideIn 0.5s ease-out;\n font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;\n `;\n notification.textContent = message;\n document.body.appendChild(notification);\n \n setTimeout(() => {\n notification.remove();\n }, 2000);\n }\n\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', function() {\n \/\/ Enable audio on first interaction\n document.addEventListener('click', function initAudioOnFirstClick() {\n initAudio();\n document.removeEventListener('click', initAudioOnFirstClick);\n }, { once: true });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Memory Fun Game – Game Memori Seru \ud83e\udde0 Memory Fun Game Skor 0 Langkah 0 Level – Menu Ulang Petunjuk \ud83e\udde9 Memory Fun! Cocokkan kartu yang sama! Pilih Tingkat Kesulitan: \ud83c\udf1f Mudah 6 kartu (3 pasang) \ud83c\udf1f\ud83c\udf1f Sedang 8 kartu (4 pasang) \ud83c\udf1f\ud83c\udf1f\ud83c\udf1f Sulit 12 kartu (6 pasang) Mulai Bermain! Langkah: 0 Waktu: 0s \ud83d\udca1Created\ud83d\udc23Rudi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-174","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":7,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/174\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/pages\/174\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/paud\/wp-json\/wp\/v2\/media?parent=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}