{"id":1727,"date":"2025-01-09T12:07:30","date_gmt":"2025-01-09T12:07:30","guid":{"rendered":"https:\/\/bcn.myplacenet.app\/?page_id=1727"},"modified":"2025-02-11T18:56:32","modified_gmt":"2025-02-11T18:56:32","slug":"hit-the-diamond","status":"publish","type":"page","link":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/hit-the-diamond\/","title":{"rendered":"hit the diamond"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1727\" class=\"elementor elementor-1727 elementor-842\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d661e71 e-flex e-con-boxed e-con e-parent\" data-id=\"d661e71\" 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-89fd6c0 elementor-widget elementor-widget-mobiokit-minijuegos-widget\" data-id=\"89fd6c0\" 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        body {\r\n            margin: 0;\r\n        }\r\n\r\n        h1 {\r\n            margin-top: 20px;\r\n            font-size: 25px;\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-13.06.50-A-vibrant-and-colorful-game-cover-for-a-Whack-a-Mole-style-game-featuring-shiny-diamonds-popping-out-of-holes.-The-design-includes-a-playful-dynamic.webp) no-repeat center center;\r\n            background-size: cover;\r\n        }\r\n\r\n        #game-container {\r\n            display: grid;\r\n            grid-template-columns: repeat(3, 100px);\r\n            gap: 20px;\r\n            justify-content: center;\r\n            margin: 20px auto;\r\n            width: 100%;\r\n            display: none;\r\n            background: black;\r\n            padding: 20px;\r\n            border-radius: 10px;\r\n            background-image: url(\"https:\/\/bcn.myplacenet.app\/wp-content\/plugins\/lua-elementor-kit\/public\/games\/..\/assets\/images\/embossed-diamond.webp\");\r\n        }\r\n\r\n        .hole {\r\n            width: 100px;\r\n            height: 100px;\r\n            background-color: #ccc;\r\n            border: 2px solid #afafaf;\r\n            border-radius: 50%;\r\n            position: relative;\r\n            overflow: hidden;\r\n            cursor: pointer;\r\n            box-shadow: inset 0px -1px 3px 1px #adadad;\r\n        }\r\n        .hole:active{\r\n            box-shadow: none;\r\n        }\r\n        .hole.missed {\r\n            border-color: red;\r\n        }\r\n\r\n        #mensaje{\r\n            margin: 10px 0;\r\n            padding: 15px;\r\n            border: 1px solid transparent;\r\n            border-radius: 5px;\r\n            font-weight: bold;\r\n            display: none; \/* Se mostrar\u00e1 con slideDown() *\/\r\n            border-color: #00a32a;\r\n            background-color: #d7f7e7;\r\n            color: #00a32a;\r\n        }\r\n        .diamond {\r\n            width: 60px;\r\n            height: 60px;\r\n            background: url('https:\/\/bcn.myplacenet.app\/wp-content\/plugins\/lua-elementor-kit\/public\/games\/..\/assets\/images\/icons\/diamond.png') no-repeat center center;\r\n            background-size: cover;\r\n            position: absolute;\r\n            top: 20%;\r\n            left: 20%;\r\n            display: none;\r\n        }\r\n\r\n        #score, #timer {\r\n            font-size: 20px;\r\n            padding:0;\r\n        }\r\n\r\n        #start-button, #restart-button {\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            margin-top: 20px;\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        @keyframes confetti {\r\n            0% {transform: translateY(0) rotate(0deg); opacity: 1;}\r\n            100% {transform: translateY(500px) rotate(720deg); opacity: 0;}\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    <div id=\"cover\"><\/div>\r\n    <h1>Golpea el Diamante<\/h1>\r\n    <p id=\"score\">Puntos: 0<\/p>\r\n    <p id=\"timer\">Tiempo restante: 30s<\/p>\r\n    <p id=\"mensaje\"><\/p>\r\n\r\n    <div id=\"game-container\">\r\n        <div class=\"hole\"><div class=\"diamond\"><\/div><\/div>\r\n        <div class=\"hole\"><div class=\"diamond\"><\/div><\/div>\r\n        <div class=\"hole\"><div class=\"diamond\"><\/div><\/div>\r\n        <div class=\"hole\"><div class=\"diamond\"><\/div><\/div>\r\n        <div class=\"hole\"><div class=\"diamond\"><\/div><\/div>\r\n        <div class=\"hole\"><div class=\"diamond\"><\/div><\/div>\r\n        <div class=\"hole\"><div class=\"diamond\"><\/div><\/div>\r\n        <div class=\"hole\"><div class=\"diamond\"><\/div><\/div>\r\n        <div class=\"hole\"><div class=\"diamond\"><\/div><\/div>\r\n    <\/div>\r\n\r\n    <button id=\"start-button\">Iniciar Juego<\/button>\r\n\r\n    <script>\r\n        const cover = document.getElementById('cover');\r\n        const gameContainer = document.getElementById('game-container');\r\n        const scoreDisplay = document.getElementById('score');\r\n        const timerDisplay = document.getElementById('timer');\r\n        const startButton = document.getElementById('start-button');\r\n        const holes = document.querySelectorAll('.hole'); \/\/ Seleccionar todos los agujeros\r\n\r\n        let score = 0;\r\n        let timeLeft = 30;\r\n        let visibilityTime = 1000; \/\/ Tiempo inicial en el que el diamante es visible (ms)\r\n        let gameInterval;\r\n        let diamondTimeout;\r\n\r\n        function showRandomDiamond() {\r\n            \/\/ Ocultar todos los diamantes\r\n            holes.forEach(hole => {\r\n                hole.querySelector('.diamond').style.display = 'none';\r\n            });\r\n\r\n            \/\/ Mostrar un diamante en un agujero aleatorio\r\n            const randomHole = holes[Math.floor(Math.random() * holes.length)];\r\n            const diamond = randomHole.querySelector('.diamond');\r\n            diamond.style.display = 'block';\r\n\r\n            \/\/ A\u00f1adir un evento para contar puntos al hacer clic (se ejecuta solo una vez)\r\n            diamond.addEventListener('click', hitDiamond, { once: true });\r\n\r\n            \/\/ Ocultar el diamante despu\u00e9s del tiempo de visibilidad\r\n            diamondTimeout = setTimeout(() => {\r\n                diamond.style.display = 'none';\r\n            }, visibilityTime);\r\n        }\r\n\r\n        function hitDiamond(event) {\r\n            score++;\r\n            \/\/ Se actualiza el puntaje usando la cadena traducida para \"Puntos: \"\r\n            scoreDisplay.textContent = \"Puntos: \" + score;\r\n            event.target.style.display = 'none';\r\n\r\n            \/\/ Reducir el tiempo de visibilidad del diamante (nunca menos de 300 ms)\r\n            visibilityTime = Math.max(300, visibilityTime - 50);\r\n        }\r\n\r\n        function missHole(event) {\r\n            if (!event.target.querySelector('.diamond') || event.target.querySelector('.diamond').style.display === 'none') {\r\n                event.target.classList.add('missed');\r\n                setTimeout(() => {\r\n                    event.target.classList.remove('missed');\r\n                }, 1000);\r\n            }\r\n        }\r\n\r\n        holes.forEach(hole => {\r\n            hole.addEventListener('click', missHole);\r\n        });\r\n\r\n        function startGame() {\r\n            cover.style.display = 'none';\r\n            gameContainer.style.display = 'grid';\r\n            score = 0;\r\n            timeLeft = 30;\r\n            visibilityTime = 1000; \/\/ Reiniciar tiempo de visibilidad\r\n            scoreDisplay.textContent = \"Puntos: \" + score;\r\n            timerDisplay.textContent = \"Tiempo restante: \" + timeLeft + \"s\";\r\n            startButton.disabled = true;\r\n\r\n            \/\/ Temporizador del juego\r\n            gameInterval = setInterval(() => {\r\n                timeLeft--;\r\n                timerDisplay.textContent = \"Tiempo restante: \" + timeLeft + \"s\";\r\n\r\n                if (timeLeft <= 0) {\r\n                    endGame();\r\n                }\r\n            }, 1000);\r\n\r\n            \/\/ Mostrar diamantes continuamente\r\n            showDiamondsContinuously();\r\n        }\r\n\r\n        function showDiamondsContinuously() {\r\n            showRandomDiamond();\r\n\r\n            if (timeLeft > 0) {\r\n                setTimeout(showDiamondsContinuously, visibilityTime + 200); \/\/ Intervalo ajustado\r\n            }\r\n        }\r\n\r\n        function endGame() {\r\n            clearInterval(gameInterval);\r\n            clearTimeout(diamondTimeout);\r\n            holes.forEach(hole => {\r\n                hole.querySelector('.diamond').style.display = 'none';\r\n            });\r\n            startButton.disabled = false;\r\n            showConfetti();\r\n            \/\/ Mostrar mensaje final usando las cadenas traducidas\r\n            document.getElementById('mensaje').innerHTML =\r\n            \"\\u00a1Juego terminado! Puntos finales:\" +\r\n                score +\r\n            \" puntos\";\r\n            document.getElementById('mensaje').style.display = 'block';\r\n            setTimeout(() => {\r\n                document.getElementById('mensaje').style.display = 'none';\r\n            }, 5000);\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            startGame();\r\n        });\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 Golpea el Diamante Puntos: 0 Tiempo restante: 30s Iniciar Juego<\/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-1727","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>hit the diamond - 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=\"hit the diamond - Placenet BCN\" \/>\n<meta property=\"og:description\" content=\"Volver Golpea el Diamante Puntos: 0 Tiempo restante: 30s Iniciar Juego\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/hit-the-diamond\/\" \/>\n<meta property=\"og:site_name\" content=\"Placenet BCN\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-11T18:56:32+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\/hit-the-diamond\/\",\"url\":\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/hit-the-diamond\/\",\"name\":\"hit the diamond - Placenet BCN\",\"isPartOf\":{\"@id\":\"https:\/\/bcn.myplacenet.app\/en\/#website\"},\"datePublished\":\"2025-01-09T12:07:30+00:00\",\"dateModified\":\"2025-02-11T18:56:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/hit-the-diamond\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/hit-the-diamond\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/hit-the-diamond\/#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\":\"hit the diamond\"}]},{\"@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":"hit the diamond - Placenet BCN","robots":{"index":"noindex","follow":"nofollow"},"og_locale":"en_US","og_type":"article","og_title":"hit the diamond - Placenet BCN","og_description":"Volver Golpea el Diamante Puntos: 0 Tiempo restante: 30s Iniciar Juego","og_url":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/hit-the-diamond\/","og_site_name":"Placenet BCN","article_modified_time":"2025-02-11T18:56:32+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\/hit-the-diamond\/","url":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/hit-the-diamond\/","name":"hit the diamond - Placenet BCN","isPartOf":{"@id":"https:\/\/bcn.myplacenet.app\/en\/#website"},"datePublished":"2025-01-09T12:07:30+00:00","dateModified":"2025-02-11T18:56:32+00:00","breadcrumb":{"@id":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/hit-the-diamond\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/hit-the-diamond\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bcn.myplacenet.app\/en\/explore-placenet\/hit-the-diamond\/#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":"hit the diamond"}]},{"@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\/1727","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=1727"}],"version-history":[{"count":8,"href":"https:\/\/bcn.myplacenet.app\/en\/wp-json\/wp\/v2\/pages\/1727\/revisions"}],"predecessor-version":[{"id":1835,"href":"https:\/\/bcn.myplacenet.app\/en\/wp-json\/wp\/v2\/pages\/1727\/revisions\/1835"}],"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=1727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}