Br\u00fajula Din\u00e1mica con Calibraci\u00f3n<\/title>\r\n<style>\r\n body {\r\n text-align: center;\r\n font-family: Arial, sans-serif;\r\n }\r\n #arrow {\r\n width: 100px;\r\n height: 100px;\r\n transition: transform 0.2s ease; \/* Transici\u00f3n suave para el movimiento *\/\r\n }\r\n #calibrate-button {\r\n margin-top: 20px;\r\n padding: 10px 20px;\r\n font-size: 16px;\r\n cursor: pointer;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>Br\u00fajula Din\u00e1mica con Calibraci\u00f3n<\/h1>\r\n<img decoding=\"async\" id=\"arrow\" src=\"https:\/\/play.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Diseno-sin-titulo-2024-06-07T004310.676.png\" alt=\"Arrow\">\r\n<p id=\"distance-info\">Esperando ubicaci\u00f3n...<\/p>\r\n<button id=\"calibrate-button\">Calibrar Sensor<\/button>\r\n\r\n<script>\r\nlet calibrateButton = document.getElementById('calibrate-button');\r\nlet arrow = document.getElementById('arrow');\r\nlet distanceInfo = document.getElementById('distance-info');\r\n\r\n\/\/ Coordenadas de la cancha de Boca Juniors\r\nconst bocaCoordinates = {\r\n lat: -34.635926,\r\n lng: -58.364372\r\n};\r\n\r\n\/\/ Radio en metros\r\nconst radius = 100; \/\/ Radio de 100 metros\r\n\r\n\/\/ Event listener para el bot\u00f3n de calibraci\u00f3n\r\ncalibrateButton.addEventListener('click', () => {\r\n window.addEventListener('deviceorientation', handleOrientation);\r\n});\r\n\r\n\/\/ Funci\u00f3n para manejar el evento de orientaci\u00f3n del dispositivo\r\nfunction handleOrientation(event) {\r\n const alpha = event.alpha; \/\/ \u00c1ngulo de orientaci\u00f3n en grados (0 a 360)\r\n \r\n \/\/ Ajustar el \u00e1ngulo de la flecha basado en el \u00e1ngulo de orientaci\u00f3n\r\n arrow.style.transform = `rotate(${360 - alpha}deg)`; \/\/ Invertir el \u00e1ngulo para que coincida con la direcci\u00f3n de la br\u00fajula\r\n}\r\n\r\n\/\/ Verificar la ubicaci\u00f3n del usuario\r\nfunction checkLocation() {\r\n if (navigator.geolocation) {\r\n navigator.geolocation.watchPosition(function(position) {\r\n const userLat = position.coords.latitude;\r\n const userLng = position.coords.longitude;\r\n const distance = getDistanceFromLatLonInMeters(userLat, userLng, bocaCoordinates.lat, bocaCoordinates.lng);\r\n const angle = getBearing(userLat, userLng, bocaCoordinates.lat, bocaCoordinates.lng);\r\n\r\n arrow.style.transform = `rotate(${angle}deg)`;\r\n\r\n if (distance <= radius) {\r\n distanceInfo.innerText = 'Est\u00e1s dentro del \u00e1rea, redirigiendo...';\r\n window.location.href = 'https:\/\/play.exploragame.com.ar\/index.php\/la-boca-2-2-2-2\/'; \/\/ Reemplaza con la URL de redirecci\u00f3n\r\n } else {\r\n distanceInfo.innerText = `Distancia al destino: ${distance.toFixed(2)} metros`;\r\n }\r\n }, function(error) {\r\n console.error(error);\r\n distanceInfo.innerText = 'Error obteniendo la ubicaci\u00f3n';\r\n });\r\n } else {\r\n distanceInfo.innerText = 'Geolocalizaci\u00f3n no es soportada por este navegador';\r\n }\r\n}\r\n\r\n\/\/ Funci\u00f3n para calcular la distancia entre dos puntos usando la f\u00f3rmula de Haversine\r\nfunction getDistanceFromLatLonInMeters(lat1, lon1, lat2, lon2) {\r\n const R = 6371000; \/\/ Radio de la Tierra en metros\r\n const dLat = deg2rad(lat2 - lat1);\r\n const dLon = deg2rad(lon2 - lon1);\r\n const a = Math.sin(dLat \/ 2) * Math.sin(dLat \/ 2) +\r\n Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *\r\n Math.sin(dLon \/ 2) * Math.sin(dLon \/ 2);\r\n const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\r\n return R * c;\r\n}\r\n\r\nfunction deg2rad(deg) {\r\n return deg * (Math.PI \/ 180);\r\n}\r\n\r\n\/\/ Funci\u00f3n para calcular el \u00e1ngulo de orientaci\u00f3n hacia el objetivo\r\nfunction getBearing(startLat, startLng, destLat, destLng) {\r\n const startLatRad = deg2rad(startLat);\r\n const startLngRad = deg2rad(startLng);\r\n const destLatRad = deg2rad(destLat);\r\n const destLngRad = deg2rad(destLng);\r\n\r\n const y = Math.sin(destLngRad - startLngRad) * Math.cos(destLatRad);\r\n const x = Math.cos(startLatRad) * Math.sin(destLatRad) - \r\n Math.sin(startLatRad) * Math.cos(destLatRad) * Math.cos(destLngRad - startLngRad);\r\n\r\n const brng = Math.atan2(y, x);\r\n const brngDeg = (brng * (180 \/ Math.PI) + 360) % 360; \/\/ Convertir a grados y normalizar\r\n return brngDeg;\r\n}\r\n\r\n\/\/ Verificar la ubicaci\u00f3n al cargar la p\u00e1gina\r\nwindow.onload = checkLocation;\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\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>Br\u00fajula Din\u00e1mica con Calibraci\u00f3n Br\u00fajula Din\u00e1mica con Calibraci\u00f3n Esperando ubicaci\u00f3n… Calibrar Sensor<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"wf_page_folders":[],"class_list":["post-5444","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/5444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=5444"}],"version-history":[{"count":49,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/5444\/revisions"}],"predecessor-version":[{"id":5494,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/5444\/revisions\/5494"}],"wp:attachment":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=5444"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/wf_page_folders?post=5444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n\r\n\r\nBr\u00fajula Din\u00e1mica con Calibraci\u00f3n<\/title>\r\n<style>\r\n body {\r\n text-align: center;\r\n font-family: Arial, sans-serif;\r\n }\r\n #arrow {\r\n width: 100px;\r\n height: 100px;\r\n transition: transform 0.2s ease; \/* Transici\u00f3n suave para el movimiento *\/\r\n }\r\n #calibrate-button {\r\n margin-top: 20px;\r\n padding: 10px 20px;\r\n font-size: 16px;\r\n cursor: pointer;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<h1>Br\u00fajula Din\u00e1mica con Calibraci\u00f3n<\/h1>\r\n<img decoding=\"async\" id=\"arrow\" src=\"https:\/\/play.exploragame.com.ar\/wp-content\/uploads\/2024\/06\/Diseno-sin-titulo-2024-06-07T004310.676.png\" alt=\"Arrow\">\r\n<p id=\"distance-info\">Esperando ubicaci\u00f3n...<\/p>\r\n<button id=\"calibrate-button\">Calibrar Sensor<\/button>\r\n\r\n<script>\r\nlet calibrateButton = document.getElementById('calibrate-button');\r\nlet arrow = document.getElementById('arrow');\r\nlet distanceInfo = document.getElementById('distance-info');\r\n\r\n\/\/ Coordenadas de la cancha de Boca Juniors\r\nconst bocaCoordinates = {\r\n lat: -34.635926,\r\n lng: -58.364372\r\n};\r\n\r\n\/\/ Radio en metros\r\nconst radius = 100; \/\/ Radio de 100 metros\r\n\r\n\/\/ Event listener para el bot\u00f3n de calibraci\u00f3n\r\ncalibrateButton.addEventListener('click', () => {\r\n window.addEventListener('deviceorientation', handleOrientation);\r\n});\r\n\r\n\/\/ Funci\u00f3n para manejar el evento de orientaci\u00f3n del dispositivo\r\nfunction handleOrientation(event) {\r\n const alpha = event.alpha; \/\/ \u00c1ngulo de orientaci\u00f3n en grados (0 a 360)\r\n \r\n \/\/ Ajustar el \u00e1ngulo de la flecha basado en el \u00e1ngulo de orientaci\u00f3n\r\n arrow.style.transform = `rotate(${360 - alpha}deg)`; \/\/ Invertir el \u00e1ngulo para que coincida con la direcci\u00f3n de la br\u00fajula\r\n}\r\n\r\n\/\/ Verificar la ubicaci\u00f3n del usuario\r\nfunction checkLocation() {\r\n if (navigator.geolocation) {\r\n navigator.geolocation.watchPosition(function(position) {\r\n const userLat = position.coords.latitude;\r\n const userLng = position.coords.longitude;\r\n const distance = getDistanceFromLatLonInMeters(userLat, userLng, bocaCoordinates.lat, bocaCoordinates.lng);\r\n const angle = getBearing(userLat, userLng, bocaCoordinates.lat, bocaCoordinates.lng);\r\n\r\n arrow.style.transform = `rotate(${angle}deg)`;\r\n\r\n if (distance <= radius) {\r\n distanceInfo.innerText = 'Est\u00e1s dentro del \u00e1rea, redirigiendo...';\r\n window.location.href = 'https:\/\/play.exploragame.com.ar\/index.php\/la-boca-2-2-2-2\/'; \/\/ Reemplaza con la URL de redirecci\u00f3n\r\n } else {\r\n distanceInfo.innerText = `Distancia al destino: ${distance.toFixed(2)} metros`;\r\n }\r\n }, function(error) {\r\n console.error(error);\r\n distanceInfo.innerText = 'Error obteniendo la ubicaci\u00f3n';\r\n });\r\n } else {\r\n distanceInfo.innerText = 'Geolocalizaci\u00f3n no es soportada por este navegador';\r\n }\r\n}\r\n\r\n\/\/ Funci\u00f3n para calcular la distancia entre dos puntos usando la f\u00f3rmula de Haversine\r\nfunction getDistanceFromLatLonInMeters(lat1, lon1, lat2, lon2) {\r\n const R = 6371000; \/\/ Radio de la Tierra en metros\r\n const dLat = deg2rad(lat2 - lat1);\r\n const dLon = deg2rad(lon2 - lon1);\r\n const a = Math.sin(dLat \/ 2) * Math.sin(dLat \/ 2) +\r\n Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *\r\n Math.sin(dLon \/ 2) * Math.sin(dLon \/ 2);\r\n const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\r\n return R * c;\r\n}\r\n\r\nfunction deg2rad(deg) {\r\n return deg * (Math.PI \/ 180);\r\n}\r\n\r\n\/\/ Funci\u00f3n para calcular el \u00e1ngulo de orientaci\u00f3n hacia el objetivo\r\nfunction getBearing(startLat, startLng, destLat, destLng) {\r\n const startLatRad = deg2rad(startLat);\r\n const startLngRad = deg2rad(startLng);\r\n const destLatRad = deg2rad(destLat);\r\n const destLngRad = deg2rad(destLng);\r\n\r\n const y = Math.sin(destLngRad - startLngRad) * Math.cos(destLatRad);\r\n const x = Math.cos(startLatRad) * Math.sin(destLatRad) - \r\n Math.sin(startLatRad) * Math.cos(destLatRad) * Math.cos(destLngRad - startLngRad);\r\n\r\n const brng = Math.atan2(y, x);\r\n const brngDeg = (brng * (180 \/ Math.PI) + 360) % 360; \/\/ Convertir a grados y normalizar\r\n return brngDeg;\r\n}\r\n\r\n\/\/ Verificar la ubicaci\u00f3n al cargar la p\u00e1gina\r\nwindow.onload = checkLocation;\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\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>Br\u00fajula Din\u00e1mica con Calibraci\u00f3n Br\u00fajula Din\u00e1mica con Calibraci\u00f3n Esperando ubicaci\u00f3n… Calibrar Sensor<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"wf_page_folders":[],"class_list":["post-5444","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/5444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=5444"}],"version-history":[{"count":49,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/5444\/revisions"}],"predecessor-version":[{"id":5494,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/5444\/revisions\/5494"}],"wp:attachment":[{"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=5444"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/play.exploragame.com.ar\/index.php\/wp-json\/wp\/v2\/wf_page_folders?post=5444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}