{"id":1743,"date":"2025-01-09T11:46:57","date_gmt":"2025-01-09T11:46:57","guid":{"rendered":"https:\/\/bcn.myplacenet.app\/?page_id=1743"},"modified":"2025-02-11T18:55:37","modified_gmt":"2025-02-11T18:55:37","slug":"memory","status":"publish","type":"page","link":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/","title":{"rendered":"Memory"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1743\" class=\"elementor elementor-1743 elementor-818\">\n\t\t\t\t<div class=\"elementor-element elementor-element-293c8a2 e-flex e-con-boxed e-con e-parent\" data-id=\"293c8a2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53a637e elementor-widget elementor-widget-mobiokit-minijuegos-widget\" data-id=\"53a637e\" data-element_type=\"widget\" data-widget_type=\"mobiokit-minijuegos-widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<style>\r\n    #game-container {\r\n        width:100%;\r\n        display: grid;\r\n        grid-template-columns: repeat(4, 100px);\r\n        gap: 4px;\r\n        justify-content: center;\r\n        margin-top: 20px;\r\n        display: none; \/* Hidden by default *\/\r\n    }\r\n\r\n    .card {\r\n        width: 100px;\r\n        height: 100px;\r\n        border: solid 1px #444;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        font-size: 38px;\r\n        color: white;\r\n        cursor: pointer;\r\n        user-select: none;\r\n        pointer-events: none;\r\n        background-image: url(\"https:\/\/bcn.myplacenet.app\/wp-content\/plugins\/lua-elementor-kit\/public\/games\/..\/assets\/images\/sun-pattern.webp\");\r\n    }\r\n\r\n    .flipped {\r\n        background-color: #FFF;\r\n        color: #000;\r\n        cursor: default;\r\n    }\r\n\r\n    #status {\r\n        text-align: center;\r\n        font-size: 18px;\r\n        margin-top: 20px;\r\n    }\r\n\r\n    #error-message {\r\n        display: none;\r\n        text-align: center;\r\n        font-size: 24px;\r\n        color: red;\r\n        margin-top: 20px;\r\n    }\r\n\r\n    #start-button, #restart-button {\r\n        display: block;\r\n        margin: 10px auto;\r\n        padding: 10px 20px;\r\n        font-size: 18px;\r\n        background-color: #28a745;\r\n        color: white;\r\n        border: none;\r\n        cursor: pointer;\r\n        border-radius: 5px;\r\n    }\r\n\r\n    #start-button:disabled, #restart-button:disabled {\r\n        background-color: #6c757d;\r\n        cursor: not-allowed;\r\n    }\r\n\r\n    #cover {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        height: 400px;\r\n        width: 100%;\r\n        margin: 20px auto;\r\n        background: url(https:\/\/bcn.myplacenet.app\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-09-12.18.57-A-vibrant-and-colorful-memory-game-cover-art-featuring-a-playful-and-modern-design.-The-image-includes-card-symbols-like-fruits-apple-banana-grape.webp) no-repeat center center;\r\n        background-size: cover;\r\n    }\r\n\r\n    @keyframes confetti {\r\n        0% {\r\n            transform: translateY(0) rotate(0deg);\r\n            opacity: 1;\r\n        }\r\n        100% {\r\n            transform: translateY(500px) rotate(720deg);\r\n            opacity: 0;\r\n        }\r\n    }\r\n\r\n    .confetti {\r\n        position: fixed;\r\n        width: 10px;\r\n        height: 10px;\r\n        background-color: randomColor;\r\n        animation: confetti 3s linear infinite;\r\n        opacity: 0;\r\n    }\r\n<\/style>\r\n<button onclick=\"window.history.back()\">\r\n    <i class=\"fas fa-arrow-left\"><\/i> Volver<\/button>\r\n\r\n<div id=\"cover\"><\/div>\r\n<button id=\"start-button\">Iniciar juego<\/button>\r\n<button id=\"restart-button\" style=\"display: none;\">Reiniciar juego<\/button>\r\n<div id=\"status\">\r\n    \u00a1Encuentra todos los pares iguales! Intentos restantes:     <span id=\"attempts\">20<\/span>\r\n<\/div>\r\n<div id=\"error-message\">\u00a1Juego terminado! Superaste el n\u00famero m\u00e1ximo de intentos..<\/div>\r\n<div id=\"game-container\"><\/div>\r\n\r\n\r\n<script>\r\n    const cover = document.getElementById('cover');\r\n    const gameContainer = document.getElementById('game-container');\r\n    const statusDisplay = document.getElementById('status');\r\n    const errorMessage = document.getElementById('error-message');\r\n    const attemptsDisplay = document.getElementById('attempts');\r\n    const startButton = document.getElementById('start-button');\r\n    const restartButton = document.getElementById('restart-button');\r\n    let totalMoves = 0;\r\n\r\n    const maxAttempts = 20;\r\n    let remainingAttempts = maxAttempts;\r\n\r\n    const symbols = ['\ud83c\udf4e', '\ud83c\udf4c', '\ud83c\udf47', '\ud83c\udf52', '\ud83c\udf4e', '\ud83c\udf4c', '\ud83c\udf47', '\ud83c\udf52', '\ud83c\udf4b', '\ud83c\udf49', '\ud83c\udf4b', '\ud83c\udf49', '\ud83c\udf53', '\ud83c\udf4d', '\ud83c\udf53', '\ud83c\udf4d'];\r\n    let shuffledSymbols;\r\n\r\n    let firstCard = null;\r\n    let secondCard = null;\r\n    let matchedPairs = 0;\r\n    function logMove(action) {\r\n        totalMoves++;\r\n    }\r\n\r\n    function checkForMatch() {\r\n        logMove(); \/\/ Incrementar movimientos\r\n        if (firstCard.dataset.symbol === secondCard.dataset.symbol) {\r\n            firstCard = null;\r\n            secondCard = null;\r\n            matchedPairs++;\r\n\r\n            if (matchedPairs === symbols.length \/ 2) {\r\n                statusDisplay.textContent = 'You found all pairs!';\r\n                saveGameRecord(); \/\/ Guardar el r\u00e9cord al completar el juego\r\n                showConfetti();\r\n                restartButton.style.display = 'block';\r\n            }\r\n        } else {\r\n            setTimeout(() => {\r\n                firstCard.classList.remove('flipped');\r\n                firstCard.textContent = '';\r\n                secondCard.classList.remove('flipped');\r\n                secondCard.textContent = '';\r\n                firstCard = null;\r\n                secondCard = null;\r\n            }, 1000);\r\n            decrementAttempts();\r\n        }\r\n    }\r\n    function saveGameRecord() {\r\n        fetch('\/wp-json\/memory-game\/v1\/record', {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json',\r\n            },\r\n            body: JSON.stringify({\r\n                moves: totalMoves,\r\n            }),\r\n        })\r\n            .then(response => response.json())\r\n            .then(data => {\r\n                console.log(data.message);\r\n                alert(`\u00a1Juego terminado! Tus movimientos totales: ${totalMoves}. ${data.message}`);\r\n            })\r\n            .catch(error => {\r\n                console.error('Error saving game record:', error);\r\n            });\r\n    }\r\n\r\n    function showRecord() {\r\n        fetch('\/wp-json\/memory-game\/v1\/record', {\r\n            method: 'GET',\r\n        })\r\n            .then(response => response.json())\r\n            .then(data => {\r\n                const recordMessage = data.record === PHP_INT_MAX\r\n                    ? 'A\u00fan no hay registro. Se el primero!'\r\n                    : `Record: ${data.record} moves`;\r\n                alert(recordMessage);\r\n            })\r\n            .catch(error => {\r\n                console.error('Error al recuperar el registro del juego:', error);\r\n            });\r\n    }\r\n\r\n    showRecord();\r\n\r\n    function createCard(symbol) {\r\n        const card = document.createElement('div');\r\n        card.classList.add('card');\r\n        card.dataset.symbol = symbol;\r\n        card.textContent = '';\r\n\r\n        card.addEventListener('click', () => {\r\n            if (card.classList.contains('flipped') || secondCard || remainingAttempts <= 0) return;\r\n\r\n            card.classList.add('flipped');\r\n            card.textContent = symbol;\r\n\r\n            if (!firstCard) {\r\n                firstCard = card;\r\n            } else {\r\n                secondCard = card;\r\n                checkForMatch();\r\n            }\r\n        });\r\n\r\n        return card;\r\n    }\r\n\r\n    function checkForMatch() {\r\n        if (firstCard.dataset.symbol === secondCard.dataset.symbol) {\r\n            firstCard = null;\r\n            secondCard = null;\r\n            matchedPairs++;\r\n\r\n            if (matchedPairs === symbols.length \/ 2) {\r\n                statusDisplay.textContent = 'Encontraste todos los pares!';\r\n                showConfetti();\r\n                restartButton.style.display = 'block';\r\n            }\r\n        } else {\r\n            setTimeout(() => {\r\n                firstCard.classList.remove('flipped');\r\n                firstCard.textContent = '';\r\n                secondCard.classList.remove('flipped');\r\n                secondCard.textContent = '';\r\n                firstCard = null;\r\n                secondCard = null;\r\n            }, 1000);\r\n            decrementAttempts();\r\n        }\r\n    }\r\n\r\n    function decrementAttempts() {\r\n        remainingAttempts--;\r\n        attemptsDisplay.textContent = remainingAttempts;\r\n\r\n        if (remainingAttempts <= 0) {\r\n            gameOver();\r\n        }\r\n    }\r\n\r\n    function gameOver() {\r\n        errorMessage.style.display = 'block';\r\n        statusDisplay.style.display = 'none';\r\n        gameContainer.style.pointerEvents = 'none';\r\n        restartButton.style.display = 'block';\r\n    }\r\n\r\n    function showAllCards() {\r\n        const cards = document.querySelectorAll('.card');\r\n        cards.forEach(card => {\r\n            card.classList.add('flipped');\r\n            card.textContent = card.dataset.symbol;\r\n        });\r\n\r\n        setTimeout(() => {\r\n            cards.forEach(card => {\r\n                card.classList.remove('flipped');\r\n                card.textContent = '';\r\n            });\r\n            startButton.disabled = true;\r\n            enableCards();\r\n        }, 5000);\r\n    }\r\n\r\n    function setupGame() {\r\n        gameContainer.innerHTML = '';\r\n        remainingAttempts = maxAttempts;\r\n        matchedPairs = 0;\r\n        shuffledSymbols = [...symbols].sort(() => Math.random() - 0.5);\r\n        shuffledSymbols.forEach(symbol => {\r\n            const card = createCard(symbol);\r\n            gameContainer.appendChild(card);\r\n        });\r\n        attemptsDisplay.textContent = remainingAttempts;\r\n        statusDisplay.style.display = 'block';\r\n        errorMessage.style.display = 'none';\r\n        restartButton.style.display = 'none';\r\n        startButton.disabled = false;\r\n    }\r\n\r\n    function enableCards() {\r\n        const cards = document.querySelectorAll('.card');\r\n        cards.forEach(card => {\r\n            card.style.pointerEvents = 'auto';\r\n        });\r\n    }\r\n\r\n    function showConfetti() {\r\n        for (let i = 0; i < 100; i++) {\r\n            const confetti = document.createElement('div');\r\n            confetti.classList.add('confetti');\r\n            confetti.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;\r\n            confetti.style.left = `${Math.random() * window.innerWidth}px`;\r\n            confetti.style.top = `${Math.random() * -50}px`;\r\n            confetti.style.animationDuration = `${Math.random() * 3 + 2}s`;\r\n            document.body.appendChild(confetti);\r\n\r\n            setTimeout(() => {\r\n                confetti.remove();\r\n            }, 5000);\r\n        }\r\n    }\r\n\r\n    startButton.addEventListener('click', () => {\r\n        cover.style.display = 'none';\r\n        gameContainer.style.display = 'grid';\r\n        showAllCards();\r\n    });\r\n\r\n    restartButton.addEventListener('click', setupGame);\r\n\r\n    setupGame();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\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>Volver Memory Iniciar juego Reiniciar juego \u00a1Encuentra todos los pares iguales! Intentos restantes:20 \u00a1Juego terminado! Superaste el n\u00famero m\u00e1ximo de intentos..<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1713,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1743","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Memory - Placenet BCN<\/title>\n<meta name=\"robots\" content=\"noindex, nofollow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Memory - Placenet BCN\" \/>\n<meta property=\"og:description\" content=\"Volver Memory Iniciar juego Reiniciar juego \u00a1Encuentra todos los pares iguales! Intentos restantes:20 \u00a1Juego terminado! Superaste el n\u00famero m\u00e1ximo de intentos..\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/\" \/>\n<meta property=\"og:site_name\" content=\"Placenet BCN\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-11T18:55:37+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/\",\"url\":\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/\",\"name\":\"Memory - Placenet BCN\",\"isPartOf\":{\"@id\":\"https:\/\/bcn.myplacenet.app\/en\/#website\"},\"datePublished\":\"2025-01-09T11:46:57+00:00\",\"dateModified\":\"2025-02-11T18:55:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/bcn.myplacenet.app\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Explore\",\"item\":\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Memory\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/bcn.myplacenet.app\/en\/#website\",\"url\":\"https:\/\/bcn.myplacenet.app\/en\/\",\"name\":\"Placenet BCN\",\"description\":\" Conoce Gente y \u00danete a Planes en Tu Zona en Tiempo Real\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/bcn.myplacenet.app\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Memory - Placenet BCN","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"en_US","og_type":"article","og_title":"Memory - Placenet BCN","og_description":"Volver Memory Iniciar juego Reiniciar juego \u00a1Encuentra todos los pares iguales! Intentos restantes:20 \u00a1Juego terminado! Superaste el n\u00famero m\u00e1ximo de intentos..","og_url":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/","og_site_name":"Placenet BCN","article_modified_time":"2025-02-11T18:55:37+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/","url":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/","name":"Memory - Placenet BCN","isPartOf":{"@id":"https:\/\/bcn.myplacenet.app\/en\/#website"},"datePublished":"2025-01-09T11:46:57+00:00","dateModified":"2025-02-11T18:55:37+00:00","breadcrumb":{"@id":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/memory\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/bcn.myplacenet.app\/en\/"},{"@type":"ListItem","position":2,"name":"Explore","item":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/"},{"@type":"ListItem","position":3,"name":"Memory"}]},{"@type":"WebSite","@id":"https:\/\/bcn.myplacenet.app\/en\/#website","url":"https:\/\/bcn.myplacenet.app\/en\/","name":"Placenet BCN","description":" Conoce Gente y \u00danete a Planes en Tu Zona en Tiempo Real","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bcn.myplacenet.app\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/bcn.myplacenet.app\/en\/wp-json\/wp\/v2\/pages\/1743","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bcn.myplacenet.app\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bcn.myplacenet.app\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bcn.myplacenet.app\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bcn.myplacenet.app\/en\/wp-json\/wp\/v2\/comments?post=1743"}],"version-history":[{"count":4,"href":"https:\/\/bcn.myplacenet.app\/en\/wp-json\/wp\/v2\/pages\/1743\/revisions"}],"predecessor-version":[{"id":1747,"href":"https:\/\/bcn.myplacenet.app\/en\/wp-json\/wp\/v2\/pages\/1743\/revisions\/1747"}],"up":[{"embeddable":true,"href":"https:\/\/bcn.myplacenet.app\/en\/wp-json\/wp\/v2\/pages\/1713"}],"wp:attachment":[{"href":"https:\/\/bcn.myplacenet.app\/en\/wp-json\/wp\/v2\/media?parent=1743"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}