Laberinto Interactivo<\/title>\n <style>\n body {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f4f4f9;\n font-family: Arial, sans-serif;\n }\n canvas {\n border: 2px solid #333;\n touch-action: none; \/* Deshabilitar zoom por gestos *\/\n }\n <\/style>\n<\/head>\n<body>\n <canvas id=\"mazeCanvas\"><\/canvas>\n\n <script>\n const canvas = document.getElementById(\"mazeCanvas\");\n const ctx = canvas.getContext(\"2d\");\n\n const cellSize = 40; \/\/ Tama\u00f1o de cada celda\n const cols = 10; \/\/ N\u00famero de columnas\n const rows = 10; \/\/ N\u00famero de filas\n\n canvas.width = cols * cellSize;\n canvas.height = rows * cellSize;\n\n let grid = [];\n let stack = [];\n let current;\n\n const ball = {\n x: 0,\n y: 0,\n size: cellSize \/ 4,\n color: \"blue\",\n };\n\n const goal = {\n x: cols - 1,\n y: rows - 1,\n size: cellSize \/ 4,\n color: \"green\",\n };\n\n class Cell {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.walls = [true, true, true, true]; \/\/ top, right, bottom, left\n this.visited = false;\n }\n\n draw() {\n const x = this.x * cellSize;\n const y = this.y * cellSize;\n\n ctx.strokeStyle = \"#333\";\n ctx.lineWidth = 2;\n\n \/\/ Dibuja las paredes\n if (this.walls[0]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x + cellSize, y), ctx.stroke(); \/\/ Top\n if (this.walls[1]) ctx.beginPath(), ctx.moveTo(x + cellSize, y), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \/\/ Right\n if (this.walls[2]) ctx.beginPath(), ctx.moveTo(x, y + cellSize), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \/\/ Bottom\n if (this.walls[3]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x, y + cellSize), ctx.stroke(); \/\/ Left\n }\n\n checkNeighbors() {\n const neighbors = [];\n\n const top = grid[index(this.x, this.y - 1)];\n const right = grid[index(this.x + 1, this.y)];\n const bottom = grid[index(this.x, this.y + 1)];\n const left = grid[index(this.x - 1, this.y)];\n\n if (top && !top.visited) neighbors.push(top);\n if (right && !right.visited) neighbors.push(right);\n if (bottom && !bottom.visited) neighbors.push(bottom);\n if (left && !left.visited) neighbors.push(left);\n\n if (neighbors.length > 0) {\n const r = Math.floor(Math.random() * neighbors.length);\n return neighbors[r];\n } else {\n return undefined;\n }\n }\n }\n\n function index(x, y) {\n if (x < 0 || y < 0 || x >= cols || y >= rows) return -1;\n return x + y * cols;\n }\n\n function setup() {\n grid = [];\n for (let y = 0; y < rows; y++) {\n for (let x = 0; x < cols; x++) {\n const cell = new Cell(x, y);\n grid.push(cell);\n }\n }\n current = grid[0];\n ball.x = 0;\n ball.y = 0;\n }\n\n function removeWalls(a, b) {\n const x = a.x - b.x;\n if (x === 1) {\n a.walls[3] = false;\n b.walls[1] = false;\n } else if (x === -1) {\n a.walls[1] = false;\n b.walls[3] = false;\n }\n\n const y = a.y - b.y;\n if (y === 1) {\n a.walls[0] = false;\n b.walls[2] = false;\n } else if (y === -1) {\n a.walls[2] = false;\n b.walls[0] = false;\n }\n }\n\n function drawMaze() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n grid.forEach(cell => cell.draw());\n\n \/\/ Dibuja el objetivo\n ctx.fillStyle = goal.color;\n ctx.beginPath();\n ctx.arc(\n goal.x * cellSize + cellSize \/ 2,\n goal.y * cellSize + cellSize \/ 2,\n goal.size,\n 0,\n Math.PI * 2\n );\n ctx.fill();\n\n \/\/ Dibuja la bolita\n ctx.fillStyle = ball.color;\n ctx.beginPath();\n ctx.arc(\n ball.x * cellSize + cellSize \/ 2,\n ball.y * cellSize + cellSize \/ 2,\n ball.size,\n 0,\n Math.PI * 2\n );\n ctx.fill();\n }\n\n function generateMaze() {\n current.visited = true;\n\n const next = current.checkNeighbors();\n if (next) {\n next.visited = true;\n\n stack.push(current);\n removeWalls(current, next);\n\n current = next;\n\n generateMaze();\n } else if (stack.length > 0) {\n current = stack.pop();\n generateMaze();\n }\n }\n\n function isInsideBall(x, y) {\n const ballCenterX = ball.x * cellSize + cellSize \/ 2;\n const ballCenterY = ball.y * cellSize + cellSize \/ 2;\n const distance = Math.sqrt((x - ballCenterX) ** 2 + (y - ballCenterY) ** 2);\n return distance <= ball.size;\n }\n\n let dragging = false;\n\n canvas.addEventListener(\"mousedown\", (e) => {\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n if (isInsideBall(x, y)) {\n dragging = true;\n }\n });\n\n canvas.addEventListener(\"mousemove\", (e) => {\n if (!dragging) return;\n\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n\n const newX = Math.floor(x \/ cellSize);\n const newY = Math.floor(y \/ cellSize);\n\n const currentCell = grid[index(ball.x, ball.y)];\n\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\n\n if (ball.x === goal.x && ball.y === goal.y) {\n alert(\"\u00a1Felicidades, completaste el laberinto!\");\n setup();\n generateMaze();\n }\n\n drawMaze();\n });\n\n canvas.addEventListener(\"mouseup\", () => {\n dragging = false;\n });\n\n canvas.addEventListener(\"touchstart\", (e) => {\n const rect = canvas.getBoundingClientRect();\n const x = e.touches[0].clientX - rect.left;\n const y = e.touches[0].clientY - rect.top;\n if (isInsideBall(x, y)) {\n dragging = true;\n }\n });\n\n canvas.addEventListener(\"touchmove\", (e) => {\n if (!dragging) return;\n\n const rect = canvas.getBoundingClientRect();\n const x = e.touches[0].clientX - rect.left;\n const y = e.touches[0].clientY - rect.top;\n\n const newX = Math.floor(x \/ cellSize);\n const newY = Math.floor(y \/ cellSize);\n\n const currentCell = grid[index(ball.x, ball.y)];\n\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\n\n if (ball.x === goal.x && ball.y === goal.y) {\n alert(\"\u00a1Felicidades, completaste el laberinto!\");\n setup();\n generateMaze();\n }\n\n drawMaze();\n });\n\n canvas.addEventListener(\"touchend\", () => {\n dragging = false;\n });\n\n setup();\n generateMaze();\n drawMaze();\n <\/script>\n<\/body>\n<\/html>\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>Laberinto Interactivo<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2507","page","type-page","status-publish","hentry"],"spectra_custom_meta":{"_customize_changeset_uuid":["7e275843-d2c9-4b78-9dbe-2a6af374f5ad"],"_edit_lock":["1754092771:1"],"_elementor_edit_mode":["builder"],"_elementor_template_type":["wp-page"],"_elementor_version":["3.26.4"],"_astra_content_layout_flag":["disabled"],"site-post-title":["disabled"],"ast-title-bar-display":["disabled"],"ast-featured-img":["disabled"],"site-content-layout":["page-builder"],"ast-site-content-layout":["full-width-container"],"site-sidebar-layout":["no-sidebar"],"_wp_page_template":["default"],"_elementor_data":["[{\"id\":\"3ba8dcd\",\"elType\":\"container\",\"settings\":[],\"elements\":[{\"id\":\"00a19ad\",\"elType\":\"widget\",\"settings\":{\"html\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n <title>Laberinto Interactivo<\\\/title>\\n <style>\\n body {\\n margin: 0;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n height: 100vh;\\n background-color: #f4f4f9;\\n font-family: Arial, sans-serif;\\n }\\n canvas {\\n border: 2px solid #333;\\n touch-action: none; \\\/* Deshabilitar zoom por gestos *\\\/\\n }\\n <\\\/style>\\n<\\\/head>\\n<body>\\n <canvas id=\\\"mazeCanvas\\\"><\\\/canvas>\\n\\n <script>\\n const canvas = document.getElementById(\\\"mazeCanvas\\\");\\n const ctx = canvas.getContext(\\\"2d\\\");\\n\\n const cellSize = 40; \\\/\\\/ Tama\\u00f1o de cada celda\\n const cols = 10; \\\/\\\/ N\\u00famero de columnas\\n const rows = 10; \\\/\\\/ N\\u00famero de filas\\n\\n canvas.width = cols * cellSize;\\n canvas.height = rows * cellSize;\\n\\n let grid = [];\\n let stack = [];\\n let current;\\n\\n const ball = {\\n x: 0,\\n y: 0,\\n size: cellSize \\\/ 4,\\n color: \\\"blue\\\",\\n };\\n\\n const goal = {\\n x: cols - 1,\\n y: rows - 1,\\n size: cellSize \\\/ 4,\\n color: \\\"green\\\",\\n };\\n\\n class Cell {\\n constructor(x, y) {\\n this.x = x;\\n this.y = y;\\n this.walls = [true, true, true, true]; \\\/\\\/ top, right, bottom, left\\n this.visited = false;\\n }\\n\\n draw() {\\n const x = this.x * cellSize;\\n const y = this.y * cellSize;\\n\\n ctx.strokeStyle = \\\"#333\\\";\\n ctx.lineWidth = 2;\\n\\n \\\/\\\/ Dibuja las paredes\\n if (this.walls[0]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x + cellSize, y), ctx.stroke(); \\\/\\\/ Top\\n if (this.walls[1]) ctx.beginPath(), ctx.moveTo(x + cellSize, y), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \\\/\\\/ Right\\n if (this.walls[2]) ctx.beginPath(), ctx.moveTo(x, y + cellSize), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \\\/\\\/ Bottom\\n if (this.walls[3]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x, y + cellSize), ctx.stroke(); \\\/\\\/ Left\\n }\\n\\n checkNeighbors() {\\n const neighbors = [];\\n\\n const top = grid[index(this.x, this.y - 1)];\\n const right = grid[index(this.x + 1, this.y)];\\n const bottom = grid[index(this.x, this.y + 1)];\\n const left = grid[index(this.x - 1, this.y)];\\n\\n if (top && !top.visited) neighbors.push(top);\\n if (right && !right.visited) neighbors.push(right);\\n if (bottom && !bottom.visited) neighbors.push(bottom);\\n if (left && !left.visited) neighbors.push(left);\\n\\n if (neighbors.length > 0) {\\n const r = Math.floor(Math.random() * neighbors.length);\\n return neighbors[r];\\n } else {\\n return undefined;\\n }\\n }\\n }\\n\\n function index(x, y) {\\n if (x < 0 || y < 0 || x >= cols || y >= rows) return -1;\\n return x + y * cols;\\n }\\n\\n function setup() {\\n grid = [];\\n for (let y = 0; y < rows; y++) {\\n for (let x = 0; x < cols; x++) {\\n const cell = new Cell(x, y);\\n grid.push(cell);\\n }\\n }\\n current = grid[0];\\n ball.x = 0;\\n ball.y = 0;\\n }\\n\\n function removeWalls(a, b) {\\n const x = a.x - b.x;\\n if (x === 1) {\\n a.walls[3] = false;\\n b.walls[1] = false;\\n } else if (x === -1) {\\n a.walls[1] = false;\\n b.walls[3] = false;\\n }\\n\\n const y = a.y - b.y;\\n if (y === 1) {\\n a.walls[0] = false;\\n b.walls[2] = false;\\n } else if (y === -1) {\\n a.walls[2] = false;\\n b.walls[0] = false;\\n }\\n }\\n\\n function drawMaze() {\\n ctx.clearRect(0, 0, canvas.width, canvas.height);\\n\\n grid.forEach(cell => cell.draw());\\n\\n \\\/\\\/ Dibuja el objetivo\\n ctx.fillStyle = goal.color;\\n ctx.beginPath();\\n ctx.arc(\\n goal.x * cellSize + cellSize \\\/ 2,\\n goal.y * cellSize + cellSize \\\/ 2,\\n goal.size,\\n 0,\\n Math.PI * 2\\n );\\n ctx.fill();\\n\\n \\\/\\\/ Dibuja la bolita\\n ctx.fillStyle = ball.color;\\n ctx.beginPath();\\n ctx.arc(\\n ball.x * cellSize + cellSize \\\/ 2,\\n ball.y * cellSize + cellSize \\\/ 2,\\n ball.size,\\n 0,\\n Math.PI * 2\\n );\\n ctx.fill();\\n }\\n\\n function generateMaze() {\\n current.visited = true;\\n\\n const next = current.checkNeighbors();\\n if (next) {\\n next.visited = true;\\n\\n stack.push(current);\\n removeWalls(current, next);\\n\\n current = next;\\n\\n generateMaze();\\n } else if (stack.length > 0) {\\n current = stack.pop();\\n generateMaze();\\n }\\n }\\n\\n function isInsideBall(x, y) {\\n const ballCenterX = ball.x * cellSize + cellSize \\\/ 2;\\n const ballCenterY = ball.y * cellSize + cellSize \\\/ 2;\\n const distance = Math.sqrt((x - ballCenterX) ** 2 + (y - ballCenterY) ** 2);\\n return distance <= ball.size;\\n }\\n\\n let dragging = false;\\n\\n canvas.addEventListener(\\\"mousedown\\\", (e) => {\\n const rect = canvas.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n if (isInsideBall(x, y)) {\\n dragging = true;\\n }\\n });\\n\\n canvas.addEventListener(\\\"mousemove\\\", (e) => {\\n if (!dragging) return;\\n\\n const rect = canvas.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n\\n const newX = Math.floor(x \\\/ cellSize);\\n const newY = Math.floor(y \\\/ cellSize);\\n\\n const currentCell = grid[index(ball.x, ball.y)];\\n\\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\\n\\n if (ball.x === goal.x && ball.y === goal.y) {\\n alert(\\\"\\u00a1Felicidades, completaste el laberinto!\\\");\\n setup();\\n generateMaze();\\n }\\n\\n drawMaze();\\n });\\n\\n canvas.addEventListener(\\\"mouseup\\\", () => {\\n dragging = false;\\n });\\n\\n canvas.addEventListener(\\\"touchstart\\\", (e) => {\\n const rect = canvas.getBoundingClientRect();\\n const x = e.touches[0].clientX - rect.left;\\n const y = e.touches[0].clientY - rect.top;\\n if (isInsideBall(x, y)) {\\n dragging = true;\\n }\\n });\\n\\n canvas.addEventListener(\\\"touchmove\\\", (e) => {\\n if (!dragging) return;\\n\\n const rect = canvas.getBoundingClientRect();\\n const x = e.touches[0].clientX - rect.left;\\n const y = e.touches[0].clientY - rect.top;\\n\\n const newX = Math.floor(x \\\/ cellSize);\\n const newY = Math.floor(y \\\/ cellSize);\\n\\n const currentCell = grid[index(ball.x, ball.y)];\\n\\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\\n\\n if (ball.x === goal.x && ball.y === goal.y) {\\n alert(\\\"\\u00a1Felicidades, completaste el laberinto!\\\");\\n setup();\\n generateMaze();\\n }\\n\\n drawMaze();\\n });\\n\\n canvas.addEventListener(\\\"touchend\\\", () => {\\n dragging = false;\\n });\\n\\n setup();\\n generateMaze();\\n drawMaze();\\n <\\\/script>\\n<\\\/body>\\n<\\\/html>\\n\"},\"elements\":[],\"widgetType\":\"html\"}],\"isInner\":false}]"],"_elementor_controls_usage":["a:2:{s:4:\"html\";a:3:{s:5:\"count\";i:1;s:15:\"control_percent\";i:1;s:8:\"controls\";a:1:{s:7:\"content\";a:1:{s:13:\"section_title\";a:1:{s:4:\"html\";i:1;}}}}s:9:\"container\";a:3:{s:5:\"count\";i:1;s:15:\"control_percent\";i:0;s:8:\"controls\";a:0:{}}}"],"_uag_css_file_name":["uag-css-2507.css"],"_elementor_page_assets":["a:1:{s:7:\"scripts\";a:1:{i:0;s:18:\"elementor-frontend\";}}"],"_elementor_css":["a:7:{s:4:\"time\";i:1778050260;s:5:\"fonts\";a:0:{}s:5:\"icons\";a:0:{}s:20:\"dynamic_elements_ids\";a:0:{}s:6:\"status\";s:6:\"inline\";i:0;s:0:\"\";s:3:\"css\";s:77:\".elementor-2507 .elementor-element.elementor-element-3ba8dcd{--display:flex;}\";}"],"_uag_page_assets":["a:9:{s:3:\"css\";s:260:\".uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media(max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media(max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:8:{i:0;s:11:\"core\/search\";i:1;s:10:\"core\/group\";i:2;s:12:\"core\/heading\";i:3;s:17:\"core\/latest-posts\";i:4;s:20:\"core\/latest-comments\";i:5;s:13:\"core\/archives\";i:6;s:15:\"core\/categories\";i:7;s:14:\"core\/paragraph\";}s:8:\"uag_flag\";b:0;s:11:\"uag_version\";s:10:\"1778046180\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"_elementor_element_cache":["{\"timeout\":1778111461,\"value\":{\"content\":\"<div class=\\\"elementor-element elementor-element-3ba8dcd e-flex e-con-boxed e-con e-parent\\\" data-id=\\\"3ba8dcd\\\" data-element_type=\\\"container\\\" data-e-type=\\\"container\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"e-con-inner\\\">\\n\\t\\t\\t\\t<div class=\\\"elementor-element elementor-element-00a19ad elementor-widget elementor-widget-html\\\" data-id=\\\"00a19ad\\\" data-element_type=\\\"widget\\\" data-e-type=\\\"widget\\\" data-widget_type=\\\"html.default\\\">\\n\\t\\t\\t\\t<div class=\\\"elementor-widget-container\\\">\\n\\t\\t\\t\\t\\t<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n <title>Laberinto Interactivo<\\\/title>\\n <style>\\n body {\\n margin: 0;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n height: 100vh;\\n background-color: #f4f4f9;\\n font-family: Arial, sans-serif;\\n }\\n canvas {\\n border: 2px solid #333;\\n touch-action: none; \\\/* Deshabilitar zoom por gestos *\\\/\\n }\\n <\\\/style>\\n<\\\/head>\\n<body>\\n <canvas id=\\\"mazeCanvas\\\"><\\\/canvas>\\n\\n <script>\\n const canvas = document.getElementById(\\\"mazeCanvas\\\");\\n const ctx = canvas.getContext(\\\"2d\\\");\\n\\n const cellSize = 40; \\\/\\\/ Tama\\u00f1o de cada celda\\n const cols = 10; \\\/\\\/ N\\u00famero de columnas\\n const rows = 10; \\\/\\\/ N\\u00famero de filas\\n\\n canvas.width = cols * cellSize;\\n canvas.height = rows * cellSize;\\n\\n let grid = [];\\n let stack = [];\\n let current;\\n\\n const ball = {\\n x: 0,\\n y: 0,\\n size: cellSize \\\/ 4,\\n color: \\\"blue\\\",\\n };\\n\\n const goal = {\\n x: cols - 1,\\n y: rows - 1,\\n size: cellSize \\\/ 4,\\n color: \\\"green\\\",\\n };\\n\\n class Cell {\\n constructor(x, y) {\\n this.x = x;\\n this.y = y;\\n this.walls = [true, true, true, true]; \\\/\\\/ top, right, bottom, left\\n this.visited = false;\\n }\\n\\n draw() {\\n const x = this.x * cellSize;\\n const y = this.y * cellSize;\\n\\n ctx.strokeStyle = \\\"#333\\\";\\n ctx.lineWidth = 2;\\n\\n \\\/\\\/ Dibuja las paredes\\n if (this.walls[0]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x + cellSize, y), ctx.stroke(); \\\/\\\/ Top\\n if (this.walls[1]) ctx.beginPath(), ctx.moveTo(x + cellSize, y), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \\\/\\\/ Right\\n if (this.walls[2]) ctx.beginPath(), ctx.moveTo(x, y + cellSize), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \\\/\\\/ Bottom\\n if (this.walls[3]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x, y + cellSize), ctx.stroke(); \\\/\\\/ Left\\n }\\n\\n checkNeighbors() {\\n const neighbors = [];\\n\\n const top = grid[index(this.x, this.y - 1)];\\n const right = grid[index(this.x + 1, this.y)];\\n const bottom = grid[index(this.x, this.y + 1)];\\n const left = grid[index(this.x - 1, this.y)];\\n\\n if (top && !top.visited) neighbors.push(top);\\n if (right && !right.visited) neighbors.push(right);\\n if (bottom && !bottom.visited) neighbors.push(bottom);\\n if (left && !left.visited) neighbors.push(left);\\n\\n if (neighbors.length > 0) {\\n const r = Math.floor(Math.random() * neighbors.length);\\n return neighbors[r];\\n } else {\\n return undefined;\\n }\\n }\\n }\\n\\n function index(x, y) {\\n if (x < 0 || y < 0 || x >= cols || y >= rows) return -1;\\n return x + y * cols;\\n }\\n\\n function setup() {\\n grid = [];\\n for (let y = 0; y < rows; y++) {\\n for (let x = 0; x < cols; x++) {\\n const cell = new Cell(x, y);\\n grid.push(cell);\\n }\\n }\\n current = grid[0];\\n ball.x = 0;\\n ball.y = 0;\\n }\\n\\n function removeWalls(a, b) {\\n const x = a.x - b.x;\\n if (x === 1) {\\n a.walls[3] = false;\\n b.walls[1] = false;\\n } else if (x === -1) {\\n a.walls[1] = false;\\n b.walls[3] = false;\\n }\\n\\n const y = a.y - b.y;\\n if (y === 1) {\\n a.walls[0] = false;\\n b.walls[2] = false;\\n } else if (y === -1) {\\n a.walls[2] = false;\\n b.walls[0] = false;\\n }\\n }\\n\\n function drawMaze() {\\n ctx.clearRect(0, 0, canvas.width, canvas.height);\\n\\n grid.forEach(cell => cell.draw());\\n\\n \\\/\\\/ Dibuja el objetivo\\n ctx.fillStyle = goal.color;\\n ctx.beginPath();\\n ctx.arc(\\n goal.x * cellSize + cellSize \\\/ 2,\\n goal.y * cellSize + cellSize \\\/ 2,\\n goal.size,\\n 0,\\n Math.PI * 2\\n );\\n ctx.fill();\\n\\n \\\/\\\/ Dibuja la bolita\\n ctx.fillStyle = ball.color;\\n ctx.beginPath();\\n ctx.arc(\\n ball.x * cellSize + cellSize \\\/ 2,\\n ball.y * cellSize + cellSize \\\/ 2,\\n ball.size,\\n 0,\\n Math.PI * 2\\n );\\n ctx.fill();\\n }\\n\\n function generateMaze() {\\n current.visited = true;\\n\\n const next = current.checkNeighbors();\\n if (next) {\\n next.visited = true;\\n\\n stack.push(current);\\n removeWalls(current, next);\\n\\n current = next;\\n\\n generateMaze();\\n } else if (stack.length > 0) {\\n current = stack.pop();\\n generateMaze();\\n }\\n }\\n\\n function isInsideBall(x, y) {\\n const ballCenterX = ball.x * cellSize + cellSize \\\/ 2;\\n const ballCenterY = ball.y * cellSize + cellSize \\\/ 2;\\n const distance = Math.sqrt((x - ballCenterX) ** 2 + (y - ballCenterY) ** 2);\\n return distance <= ball.size;\\n }\\n\\n let dragging = false;\\n\\n canvas.addEventListener(\\\"mousedown\\\", (e) => {\\n const rect = canvas.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n if (isInsideBall(x, y)) {\\n dragging = true;\\n }\\n });\\n\\n canvas.addEventListener(\\\"mousemove\\\", (e) => {\\n if (!dragging) return;\\n\\n const rect = canvas.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n\\n const newX = Math.floor(x \\\/ cellSize);\\n const newY = Math.floor(y \\\/ cellSize);\\n\\n const currentCell = grid[index(ball.x, ball.y)];\\n\\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\\n\\n if (ball.x === goal.x && ball.y === goal.y) {\\n alert(\\\"\\u00a1Felicidades, completaste el laberinto!\\\");\\n setup();\\n generateMaze();\\n }\\n\\n drawMaze();\\n });\\n\\n canvas.addEventListener(\\\"mouseup\\\", () => {\\n dragging = false;\\n });\\n\\n canvas.addEventListener(\\\"touchstart\\\", (e) => {\\n const rect = canvas.getBoundingClientRect();\\n const x = e.touches[0].clientX - rect.left;\\n const y = e.touches[0].clientY - rect.top;\\n if (isInsideBall(x, y)) {\\n dragging = true;\\n }\\n });\\n\\n canvas.addEventListener(\\\"touchmove\\\", (e) => {\\n if (!dragging) return;\\n\\n const rect = canvas.getBoundingClientRect();\\n const x = e.touches[0].clientX - rect.left;\\n const y = e.touches[0].clientY - rect.top;\\n\\n const newX = Math.floor(x \\\/ cellSize);\\n const newY = Math.floor(y \\\/ cellSize);\\n\\n const currentCell = grid[index(ball.x, ball.y)];\\n\\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\\n\\n if (ball.x === goal.x && ball.y === goal.y) {\\n alert(\\\"\\u00a1Felicidades, completaste el laberinto!\\\");\\n setup();\\n generateMaze();\\n }\\n\\n drawMaze();\\n });\\n\\n canvas.addEventListener(\\\"touchend\\\", () => {\\n dragging = false;\\n });\\n\\n setup();\\n generateMaze();\\n drawMaze();\\n <\\\/script>\\n<\\\/body>\\n<\\\/html>\\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\",\"scripts\":[],\"styles\":[]}}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"Laberinto Interactivo","_links":{"self":[{"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/pages\/2507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/comments?post=2507"}],"version-history":[{"count":10,"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/pages\/2507\/revisions"}],"predecessor-version":[{"id":2523,"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/pages\/2507\/revisions\/2523"}],"wp:attachment":[{"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/media?parent=2507"}],"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\t\t\n\n\n \n \n Laberinto Interactivo<\/title>\n <style>\n body {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f4f4f9;\n font-family: Arial, sans-serif;\n }\n canvas {\n border: 2px solid #333;\n touch-action: none; \/* Deshabilitar zoom por gestos *\/\n }\n <\/style>\n<\/head>\n<body>\n <canvas id=\"mazeCanvas\"><\/canvas>\n\n <script>\n const canvas = document.getElementById(\"mazeCanvas\");\n const ctx = canvas.getContext(\"2d\");\n\n const cellSize = 40; \/\/ Tama\u00f1o de cada celda\n const cols = 10; \/\/ N\u00famero de columnas\n const rows = 10; \/\/ N\u00famero de filas\n\n canvas.width = cols * cellSize;\n canvas.height = rows * cellSize;\n\n let grid = [];\n let stack = [];\n let current;\n\n const ball = {\n x: 0,\n y: 0,\n size: cellSize \/ 4,\n color: \"blue\",\n };\n\n const goal = {\n x: cols - 1,\n y: rows - 1,\n size: cellSize \/ 4,\n color: \"green\",\n };\n\n class Cell {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.walls = [true, true, true, true]; \/\/ top, right, bottom, left\n this.visited = false;\n }\n\n draw() {\n const x = this.x * cellSize;\n const y = this.y * cellSize;\n\n ctx.strokeStyle = \"#333\";\n ctx.lineWidth = 2;\n\n \/\/ Dibuja las paredes\n if (this.walls[0]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x + cellSize, y), ctx.stroke(); \/\/ Top\n if (this.walls[1]) ctx.beginPath(), ctx.moveTo(x + cellSize, y), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \/\/ Right\n if (this.walls[2]) ctx.beginPath(), ctx.moveTo(x, y + cellSize), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \/\/ Bottom\n if (this.walls[3]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x, y + cellSize), ctx.stroke(); \/\/ Left\n }\n\n checkNeighbors() {\n const neighbors = [];\n\n const top = grid[index(this.x, this.y - 1)];\n const right = grid[index(this.x + 1, this.y)];\n const bottom = grid[index(this.x, this.y + 1)];\n const left = grid[index(this.x - 1, this.y)];\n\n if (top && !top.visited) neighbors.push(top);\n if (right && !right.visited) neighbors.push(right);\n if (bottom && !bottom.visited) neighbors.push(bottom);\n if (left && !left.visited) neighbors.push(left);\n\n if (neighbors.length > 0) {\n const r = Math.floor(Math.random() * neighbors.length);\n return neighbors[r];\n } else {\n return undefined;\n }\n }\n }\n\n function index(x, y) {\n if (x < 0 || y < 0 || x >= cols || y >= rows) return -1;\n return x + y * cols;\n }\n\n function setup() {\n grid = [];\n for (let y = 0; y < rows; y++) {\n for (let x = 0; x < cols; x++) {\n const cell = new Cell(x, y);\n grid.push(cell);\n }\n }\n current = grid[0];\n ball.x = 0;\n ball.y = 0;\n }\n\n function removeWalls(a, b) {\n const x = a.x - b.x;\n if (x === 1) {\n a.walls[3] = false;\n b.walls[1] = false;\n } else if (x === -1) {\n a.walls[1] = false;\n b.walls[3] = false;\n }\n\n const y = a.y - b.y;\n if (y === 1) {\n a.walls[0] = false;\n b.walls[2] = false;\n } else if (y === -1) {\n a.walls[2] = false;\n b.walls[0] = false;\n }\n }\n\n function drawMaze() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n grid.forEach(cell => cell.draw());\n\n \/\/ Dibuja el objetivo\n ctx.fillStyle = goal.color;\n ctx.beginPath();\n ctx.arc(\n goal.x * cellSize + cellSize \/ 2,\n goal.y * cellSize + cellSize \/ 2,\n goal.size,\n 0,\n Math.PI * 2\n );\n ctx.fill();\n\n \/\/ Dibuja la bolita\n ctx.fillStyle = ball.color;\n ctx.beginPath();\n ctx.arc(\n ball.x * cellSize + cellSize \/ 2,\n ball.y * cellSize + cellSize \/ 2,\n ball.size,\n 0,\n Math.PI * 2\n );\n ctx.fill();\n }\n\n function generateMaze() {\n current.visited = true;\n\n const next = current.checkNeighbors();\n if (next) {\n next.visited = true;\n\n stack.push(current);\n removeWalls(current, next);\n\n current = next;\n\n generateMaze();\n } else if (stack.length > 0) {\n current = stack.pop();\n generateMaze();\n }\n }\n\n function isInsideBall(x, y) {\n const ballCenterX = ball.x * cellSize + cellSize \/ 2;\n const ballCenterY = ball.y * cellSize + cellSize \/ 2;\n const distance = Math.sqrt((x - ballCenterX) ** 2 + (y - ballCenterY) ** 2);\n return distance <= ball.size;\n }\n\n let dragging = false;\n\n canvas.addEventListener(\"mousedown\", (e) => {\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n if (isInsideBall(x, y)) {\n dragging = true;\n }\n });\n\n canvas.addEventListener(\"mousemove\", (e) => {\n if (!dragging) return;\n\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n\n const newX = Math.floor(x \/ cellSize);\n const newY = Math.floor(y \/ cellSize);\n\n const currentCell = grid[index(ball.x, ball.y)];\n\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\n\n if (ball.x === goal.x && ball.y === goal.y) {\n alert(\"\u00a1Felicidades, completaste el laberinto!\");\n setup();\n generateMaze();\n }\n\n drawMaze();\n });\n\n canvas.addEventListener(\"mouseup\", () => {\n dragging = false;\n });\n\n canvas.addEventListener(\"touchstart\", (e) => {\n const rect = canvas.getBoundingClientRect();\n const x = e.touches[0].clientX - rect.left;\n const y = e.touches[0].clientY - rect.top;\n if (isInsideBall(x, y)) {\n dragging = true;\n }\n });\n\n canvas.addEventListener(\"touchmove\", (e) => {\n if (!dragging) return;\n\n const rect = canvas.getBoundingClientRect();\n const x = e.touches[0].clientX - rect.left;\n const y = e.touches[0].clientY - rect.top;\n\n const newX = Math.floor(x \/ cellSize);\n const newY = Math.floor(y \/ cellSize);\n\n const currentCell = grid[index(ball.x, ball.y)];\n\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\n\n if (ball.x === goal.x && ball.y === goal.y) {\n alert(\"\u00a1Felicidades, completaste el laberinto!\");\n setup();\n generateMaze();\n }\n\n drawMaze();\n });\n\n canvas.addEventListener(\"touchend\", () => {\n dragging = false;\n });\n\n setup();\n generateMaze();\n drawMaze();\n <\/script>\n<\/body>\n<\/html>\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>Laberinto Interactivo<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2507","page","type-page","status-publish","hentry"],"spectra_custom_meta":{"_customize_changeset_uuid":["7e275843-d2c9-4b78-9dbe-2a6af374f5ad"],"_edit_lock":["1754092771:1"],"_elementor_edit_mode":["builder"],"_elementor_template_type":["wp-page"],"_elementor_version":["3.26.4"],"_astra_content_layout_flag":["disabled"],"site-post-title":["disabled"],"ast-title-bar-display":["disabled"],"ast-featured-img":["disabled"],"site-content-layout":["page-builder"],"ast-site-content-layout":["full-width-container"],"site-sidebar-layout":["no-sidebar"],"_wp_page_template":["default"],"_elementor_data":["[{\"id\":\"3ba8dcd\",\"elType\":\"container\",\"settings\":[],\"elements\":[{\"id\":\"00a19ad\",\"elType\":\"widget\",\"settings\":{\"html\":\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n <title>Laberinto Interactivo<\\\/title>\\n <style>\\n body {\\n margin: 0;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n height: 100vh;\\n background-color: #f4f4f9;\\n font-family: Arial, sans-serif;\\n }\\n canvas {\\n border: 2px solid #333;\\n touch-action: none; \\\/* Deshabilitar zoom por gestos *\\\/\\n }\\n <\\\/style>\\n<\\\/head>\\n<body>\\n <canvas id=\\\"mazeCanvas\\\"><\\\/canvas>\\n\\n <script>\\n const canvas = document.getElementById(\\\"mazeCanvas\\\");\\n const ctx = canvas.getContext(\\\"2d\\\");\\n\\n const cellSize = 40; \\\/\\\/ Tama\\u00f1o de cada celda\\n const cols = 10; \\\/\\\/ N\\u00famero de columnas\\n const rows = 10; \\\/\\\/ N\\u00famero de filas\\n\\n canvas.width = cols * cellSize;\\n canvas.height = rows * cellSize;\\n\\n let grid = [];\\n let stack = [];\\n let current;\\n\\n const ball = {\\n x: 0,\\n y: 0,\\n size: cellSize \\\/ 4,\\n color: \\\"blue\\\",\\n };\\n\\n const goal = {\\n x: cols - 1,\\n y: rows - 1,\\n size: cellSize \\\/ 4,\\n color: \\\"green\\\",\\n };\\n\\n class Cell {\\n constructor(x, y) {\\n this.x = x;\\n this.y = y;\\n this.walls = [true, true, true, true]; \\\/\\\/ top, right, bottom, left\\n this.visited = false;\\n }\\n\\n draw() {\\n const x = this.x * cellSize;\\n const y = this.y * cellSize;\\n\\n ctx.strokeStyle = \\\"#333\\\";\\n ctx.lineWidth = 2;\\n\\n \\\/\\\/ Dibuja las paredes\\n if (this.walls[0]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x + cellSize, y), ctx.stroke(); \\\/\\\/ Top\\n if (this.walls[1]) ctx.beginPath(), ctx.moveTo(x + cellSize, y), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \\\/\\\/ Right\\n if (this.walls[2]) ctx.beginPath(), ctx.moveTo(x, y + cellSize), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \\\/\\\/ Bottom\\n if (this.walls[3]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x, y + cellSize), ctx.stroke(); \\\/\\\/ Left\\n }\\n\\n checkNeighbors() {\\n const neighbors = [];\\n\\n const top = grid[index(this.x, this.y - 1)];\\n const right = grid[index(this.x + 1, this.y)];\\n const bottom = grid[index(this.x, this.y + 1)];\\n const left = grid[index(this.x - 1, this.y)];\\n\\n if (top && !top.visited) neighbors.push(top);\\n if (right && !right.visited) neighbors.push(right);\\n if (bottom && !bottom.visited) neighbors.push(bottom);\\n if (left && !left.visited) neighbors.push(left);\\n\\n if (neighbors.length > 0) {\\n const r = Math.floor(Math.random() * neighbors.length);\\n return neighbors[r];\\n } else {\\n return undefined;\\n }\\n }\\n }\\n\\n function index(x, y) {\\n if (x < 0 || y < 0 || x >= cols || y >= rows) return -1;\\n return x + y * cols;\\n }\\n\\n function setup() {\\n grid = [];\\n for (let y = 0; y < rows; y++) {\\n for (let x = 0; x < cols; x++) {\\n const cell = new Cell(x, y);\\n grid.push(cell);\\n }\\n }\\n current = grid[0];\\n ball.x = 0;\\n ball.y = 0;\\n }\\n\\n function removeWalls(a, b) {\\n const x = a.x - b.x;\\n if (x === 1) {\\n a.walls[3] = false;\\n b.walls[1] = false;\\n } else if (x === -1) {\\n a.walls[1] = false;\\n b.walls[3] = false;\\n }\\n\\n const y = a.y - b.y;\\n if (y === 1) {\\n a.walls[0] = false;\\n b.walls[2] = false;\\n } else if (y === -1) {\\n a.walls[2] = false;\\n b.walls[0] = false;\\n }\\n }\\n\\n function drawMaze() {\\n ctx.clearRect(0, 0, canvas.width, canvas.height);\\n\\n grid.forEach(cell => cell.draw());\\n\\n \\\/\\\/ Dibuja el objetivo\\n ctx.fillStyle = goal.color;\\n ctx.beginPath();\\n ctx.arc(\\n goal.x * cellSize + cellSize \\\/ 2,\\n goal.y * cellSize + cellSize \\\/ 2,\\n goal.size,\\n 0,\\n Math.PI * 2\\n );\\n ctx.fill();\\n\\n \\\/\\\/ Dibuja la bolita\\n ctx.fillStyle = ball.color;\\n ctx.beginPath();\\n ctx.arc(\\n ball.x * cellSize + cellSize \\\/ 2,\\n ball.y * cellSize + cellSize \\\/ 2,\\n ball.size,\\n 0,\\n Math.PI * 2\\n );\\n ctx.fill();\\n }\\n\\n function generateMaze() {\\n current.visited = true;\\n\\n const next = current.checkNeighbors();\\n if (next) {\\n next.visited = true;\\n\\n stack.push(current);\\n removeWalls(current, next);\\n\\n current = next;\\n\\n generateMaze();\\n } else if (stack.length > 0) {\\n current = stack.pop();\\n generateMaze();\\n }\\n }\\n\\n function isInsideBall(x, y) {\\n const ballCenterX = ball.x * cellSize + cellSize \\\/ 2;\\n const ballCenterY = ball.y * cellSize + cellSize \\\/ 2;\\n const distance = Math.sqrt((x - ballCenterX) ** 2 + (y - ballCenterY) ** 2);\\n return distance <= ball.size;\\n }\\n\\n let dragging = false;\\n\\n canvas.addEventListener(\\\"mousedown\\\", (e) => {\\n const rect = canvas.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n if (isInsideBall(x, y)) {\\n dragging = true;\\n }\\n });\\n\\n canvas.addEventListener(\\\"mousemove\\\", (e) => {\\n if (!dragging) return;\\n\\n const rect = canvas.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n\\n const newX = Math.floor(x \\\/ cellSize);\\n const newY = Math.floor(y \\\/ cellSize);\\n\\n const currentCell = grid[index(ball.x, ball.y)];\\n\\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\\n\\n if (ball.x === goal.x && ball.y === goal.y) {\\n alert(\\\"\\u00a1Felicidades, completaste el laberinto!\\\");\\n setup();\\n generateMaze();\\n }\\n\\n drawMaze();\\n });\\n\\n canvas.addEventListener(\\\"mouseup\\\", () => {\\n dragging = false;\\n });\\n\\n canvas.addEventListener(\\\"touchstart\\\", (e) => {\\n const rect = canvas.getBoundingClientRect();\\n const x = e.touches[0].clientX - rect.left;\\n const y = e.touches[0].clientY - rect.top;\\n if (isInsideBall(x, y)) {\\n dragging = true;\\n }\\n });\\n\\n canvas.addEventListener(\\\"touchmove\\\", (e) => {\\n if (!dragging) return;\\n\\n const rect = canvas.getBoundingClientRect();\\n const x = e.touches[0].clientX - rect.left;\\n const y = e.touches[0].clientY - rect.top;\\n\\n const newX = Math.floor(x \\\/ cellSize);\\n const newY = Math.floor(y \\\/ cellSize);\\n\\n const currentCell = grid[index(ball.x, ball.y)];\\n\\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\\n\\n if (ball.x === goal.x && ball.y === goal.y) {\\n alert(\\\"\\u00a1Felicidades, completaste el laberinto!\\\");\\n setup();\\n generateMaze();\\n }\\n\\n drawMaze();\\n });\\n\\n canvas.addEventListener(\\\"touchend\\\", () => {\\n dragging = false;\\n });\\n\\n setup();\\n generateMaze();\\n drawMaze();\\n <\\\/script>\\n<\\\/body>\\n<\\\/html>\\n\"},\"elements\":[],\"widgetType\":\"html\"}],\"isInner\":false}]"],"_elementor_controls_usage":["a:2:{s:4:\"html\";a:3:{s:5:\"count\";i:1;s:15:\"control_percent\";i:1;s:8:\"controls\";a:1:{s:7:\"content\";a:1:{s:13:\"section_title\";a:1:{s:4:\"html\";i:1;}}}}s:9:\"container\";a:3:{s:5:\"count\";i:1;s:15:\"control_percent\";i:0;s:8:\"controls\";a:0:{}}}"],"_uag_css_file_name":["uag-css-2507.css"],"_elementor_page_assets":["a:1:{s:7:\"scripts\";a:1:{i:0;s:18:\"elementor-frontend\";}}"],"_elementor_css":["a:7:{s:4:\"time\";i:1778050260;s:5:\"fonts\";a:0:{}s:5:\"icons\";a:0:{}s:20:\"dynamic_elements_ids\";a:0:{}s:6:\"status\";s:6:\"inline\";i:0;s:0:\"\";s:3:\"css\";s:77:\".elementor-2507 .elementor-element.elementor-element-3ba8dcd{--display:flex;}\";}"],"_uag_page_assets":["a:9:{s:3:\"css\";s:260:\".uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media(max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media(max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:8:{i:0;s:11:\"core\/search\";i:1;s:10:\"core\/group\";i:2;s:12:\"core\/heading\";i:3;s:17:\"core\/latest-posts\";i:4;s:20:\"core\/latest-comments\";i:5;s:13:\"core\/archives\";i:6;s:15:\"core\/categories\";i:7;s:14:\"core\/paragraph\";}s:8:\"uag_flag\";b:0;s:11:\"uag_version\";s:10:\"1778046180\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"],"_elementor_element_cache":["{\"timeout\":1778111461,\"value\":{\"content\":\"<div class=\\\"elementor-element elementor-element-3ba8dcd e-flex e-con-boxed e-con e-parent\\\" data-id=\\\"3ba8dcd\\\" data-element_type=\\\"container\\\" data-e-type=\\\"container\\\">\\n\\t\\t\\t\\t\\t<div class=\\\"e-con-inner\\\">\\n\\t\\t\\t\\t<div class=\\\"elementor-element elementor-element-00a19ad elementor-widget elementor-widget-html\\\" data-id=\\\"00a19ad\\\" data-element_type=\\\"widget\\\" data-e-type=\\\"widget\\\" data-widget_type=\\\"html.default\\\">\\n\\t\\t\\t\\t<div class=\\\"elementor-widget-container\\\">\\n\\t\\t\\t\\t\\t<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n<head>\\n <meta charset=\\\"UTF-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n <title>Laberinto Interactivo<\\\/title>\\n <style>\\n body {\\n margin: 0;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n height: 100vh;\\n background-color: #f4f4f9;\\n font-family: Arial, sans-serif;\\n }\\n canvas {\\n border: 2px solid #333;\\n touch-action: none; \\\/* Deshabilitar zoom por gestos *\\\/\\n }\\n <\\\/style>\\n<\\\/head>\\n<body>\\n <canvas id=\\\"mazeCanvas\\\"><\\\/canvas>\\n\\n <script>\\n const canvas = document.getElementById(\\\"mazeCanvas\\\");\\n const ctx = canvas.getContext(\\\"2d\\\");\\n\\n const cellSize = 40; \\\/\\\/ Tama\\u00f1o de cada celda\\n const cols = 10; \\\/\\\/ N\\u00famero de columnas\\n const rows = 10; \\\/\\\/ N\\u00famero de filas\\n\\n canvas.width = cols * cellSize;\\n canvas.height = rows * cellSize;\\n\\n let grid = [];\\n let stack = [];\\n let current;\\n\\n const ball = {\\n x: 0,\\n y: 0,\\n size: cellSize \\\/ 4,\\n color: \\\"blue\\\",\\n };\\n\\n const goal = {\\n x: cols - 1,\\n y: rows - 1,\\n size: cellSize \\\/ 4,\\n color: \\\"green\\\",\\n };\\n\\n class Cell {\\n constructor(x, y) {\\n this.x = x;\\n this.y = y;\\n this.walls = [true, true, true, true]; \\\/\\\/ top, right, bottom, left\\n this.visited = false;\\n }\\n\\n draw() {\\n const x = this.x * cellSize;\\n const y = this.y * cellSize;\\n\\n ctx.strokeStyle = \\\"#333\\\";\\n ctx.lineWidth = 2;\\n\\n \\\/\\\/ Dibuja las paredes\\n if (this.walls[0]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x + cellSize, y), ctx.stroke(); \\\/\\\/ Top\\n if (this.walls[1]) ctx.beginPath(), ctx.moveTo(x + cellSize, y), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \\\/\\\/ Right\\n if (this.walls[2]) ctx.beginPath(), ctx.moveTo(x, y + cellSize), ctx.lineTo(x + cellSize, y + cellSize), ctx.stroke(); \\\/\\\/ Bottom\\n if (this.walls[3]) ctx.beginPath(), ctx.moveTo(x, y), ctx.lineTo(x, y + cellSize), ctx.stroke(); \\\/\\\/ Left\\n }\\n\\n checkNeighbors() {\\n const neighbors = [];\\n\\n const top = grid[index(this.x, this.y - 1)];\\n const right = grid[index(this.x + 1, this.y)];\\n const bottom = grid[index(this.x, this.y + 1)];\\n const left = grid[index(this.x - 1, this.y)];\\n\\n if (top && !top.visited) neighbors.push(top);\\n if (right && !right.visited) neighbors.push(right);\\n if (bottom && !bottom.visited) neighbors.push(bottom);\\n if (left && !left.visited) neighbors.push(left);\\n\\n if (neighbors.length > 0) {\\n const r = Math.floor(Math.random() * neighbors.length);\\n return neighbors[r];\\n } else {\\n return undefined;\\n }\\n }\\n }\\n\\n function index(x, y) {\\n if (x < 0 || y < 0 || x >= cols || y >= rows) return -1;\\n return x + y * cols;\\n }\\n\\n function setup() {\\n grid = [];\\n for (let y = 0; y < rows; y++) {\\n for (let x = 0; x < cols; x++) {\\n const cell = new Cell(x, y);\\n grid.push(cell);\\n }\\n }\\n current = grid[0];\\n ball.x = 0;\\n ball.y = 0;\\n }\\n\\n function removeWalls(a, b) {\\n const x = a.x - b.x;\\n if (x === 1) {\\n a.walls[3] = false;\\n b.walls[1] = false;\\n } else if (x === -1) {\\n a.walls[1] = false;\\n b.walls[3] = false;\\n }\\n\\n const y = a.y - b.y;\\n if (y === 1) {\\n a.walls[0] = false;\\n b.walls[2] = false;\\n } else if (y === -1) {\\n a.walls[2] = false;\\n b.walls[0] = false;\\n }\\n }\\n\\n function drawMaze() {\\n ctx.clearRect(0, 0, canvas.width, canvas.height);\\n\\n grid.forEach(cell => cell.draw());\\n\\n \\\/\\\/ Dibuja el objetivo\\n ctx.fillStyle = goal.color;\\n ctx.beginPath();\\n ctx.arc(\\n goal.x * cellSize + cellSize \\\/ 2,\\n goal.y * cellSize + cellSize \\\/ 2,\\n goal.size,\\n 0,\\n Math.PI * 2\\n );\\n ctx.fill();\\n\\n \\\/\\\/ Dibuja la bolita\\n ctx.fillStyle = ball.color;\\n ctx.beginPath();\\n ctx.arc(\\n ball.x * cellSize + cellSize \\\/ 2,\\n ball.y * cellSize + cellSize \\\/ 2,\\n ball.size,\\n 0,\\n Math.PI * 2\\n );\\n ctx.fill();\\n }\\n\\n function generateMaze() {\\n current.visited = true;\\n\\n const next = current.checkNeighbors();\\n if (next) {\\n next.visited = true;\\n\\n stack.push(current);\\n removeWalls(current, next);\\n\\n current = next;\\n\\n generateMaze();\\n } else if (stack.length > 0) {\\n current = stack.pop();\\n generateMaze();\\n }\\n }\\n\\n function isInsideBall(x, y) {\\n const ballCenterX = ball.x * cellSize + cellSize \\\/ 2;\\n const ballCenterY = ball.y * cellSize + cellSize \\\/ 2;\\n const distance = Math.sqrt((x - ballCenterX) ** 2 + (y - ballCenterY) ** 2);\\n return distance <= ball.size;\\n }\\n\\n let dragging = false;\\n\\n canvas.addEventListener(\\\"mousedown\\\", (e) => {\\n const rect = canvas.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n if (isInsideBall(x, y)) {\\n dragging = true;\\n }\\n });\\n\\n canvas.addEventListener(\\\"mousemove\\\", (e) => {\\n if (!dragging) return;\\n\\n const rect = canvas.getBoundingClientRect();\\n const x = e.clientX - rect.left;\\n const y = e.clientY - rect.top;\\n\\n const newX = Math.floor(x \\\/ cellSize);\\n const newY = Math.floor(y \\\/ cellSize);\\n\\n const currentCell = grid[index(ball.x, ball.y)];\\n\\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\\n\\n if (ball.x === goal.x && ball.y === goal.y) {\\n alert(\\\"\\u00a1Felicidades, completaste el laberinto!\\\");\\n setup();\\n generateMaze();\\n }\\n\\n drawMaze();\\n });\\n\\n canvas.addEventListener(\\\"mouseup\\\", () => {\\n dragging = false;\\n });\\n\\n canvas.addEventListener(\\\"touchstart\\\", (e) => {\\n const rect = canvas.getBoundingClientRect();\\n const x = e.touches[0].clientX - rect.left;\\n const y = e.touches[0].clientY - rect.top;\\n if (isInsideBall(x, y)) {\\n dragging = true;\\n }\\n });\\n\\n canvas.addEventListener(\\\"touchmove\\\", (e) => {\\n if (!dragging) return;\\n\\n const rect = canvas.getBoundingClientRect();\\n const x = e.touches[0].clientX - rect.left;\\n const y = e.touches[0].clientY - rect.top;\\n\\n const newX = Math.floor(x \\\/ cellSize);\\n const newY = Math.floor(y \\\/ cellSize);\\n\\n const currentCell = grid[index(ball.x, ball.y)];\\n\\n if (newX === ball.x + 1 && !currentCell.walls[1]) ball.x = newX;\\n if (newX === ball.x - 1 && !currentCell.walls[3]) ball.x = newX;\\n if (newY === ball.y + 1 && !currentCell.walls[2]) ball.y = newY;\\n if (newY === ball.y - 1 && !currentCell.walls[0]) ball.y = newY;\\n\\n if (ball.x === goal.x && ball.y === goal.y) {\\n alert(\\\"\\u00a1Felicidades, completaste el laberinto!\\\");\\n setup();\\n generateMaze();\\n }\\n\\n drawMaze();\\n });\\n\\n canvas.addEventListener(\\\"touchend\\\", () => {\\n dragging = false;\\n });\\n\\n setup();\\n generateMaze();\\n drawMaze();\\n <\\\/script>\\n<\\\/body>\\n<\\\/html>\\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\",\"scripts\":[],\"styles\":[]}}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/author\/admin\/"},"uagb_comment_info":0,"uagb_excerpt":"Laberinto Interactivo","_links":{"self":[{"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/pages\/2507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/comments?post=2507"}],"version-history":[{"count":10,"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/pages\/2507\/revisions"}],"predecessor-version":[{"id":2523,"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/pages\/2507\/revisions\/2523"}],"wp:attachment":[{"href":"http:\/\/j05.a18.mytemp.website\/home\/hernandezhealth\/wp-json\/wp\/v2\/media?parent=2507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}