{"id":323,"date":"2026-08-17T21:39:09","date_gmt":"2026-08-17T21:39:09","guid":{"rendered":"https:\/\/eppaltamirano.com.mx\/?p=323"},"modified":"2026-08-17T21:39:10","modified_gmt":"2026-08-17T21:39:10","slug":"juego-1-primaria-espanol-abecedario-magico","status":"publish","type":"post","link":"https:\/\/eppaltamirano.com.mx\/index.php\/2026\/08\/17\/juego-1-primaria-espanol-abecedario-magico\/","title":{"rendered":"Juego 1\u00b0 Primaria | Espa\u00f1ol | Abecedario M\u00e1gico"},"content":{"rendered":"

Escuela Primaria Ignacio Altamirano<\/a><\/h1>\n\n\n
\n
\n

\u00a1Bienvenidos al Abecedario M\u00e1gico! Un juego divertido donde los ni\u00f1os de primer grado pueden practicar el abecedario arrastrando las letras a su lugar correcto. Ideal para reforzar el aprendizaje de la lectoescritura en casa o en la escuela.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
<\/div>\n\n\n\n
\n\n\n\n \n \n Vocales y sus amigas V2<\/title>\n <style>\n \/* ==================== ESTILOS GENERALES ==================== *\/\n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n user-select: none;\n }\n\n body {\n font-family: 'Segoe UI', 'Comic Sans MS', 'Chalkboard SE', sans-serif;\n background: linear-gradient(145deg, #f0f8ff 0%, #d4e9ff 100%);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 0;\n padding: 16px;\n }\n\n #game-container {\n max-width: 820px;\n width: 100%;\n min-height: 520px;\n background: #ffffff;\n border-radius: 50px;\n padding: 28px 24px 32px;\n box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15), 0 8px 12px rgba(0, 0, 0, 0.08);\n border: 4px solid #f8d59e;\n text-align: center;\n transition: all 0.2s;\n display: flex;\n flex-direction: column;\n }\n\n \/* ===== ENCABEZADO ===== *\/\n .school-header {\n background: #2d4b6e;\n color: white;\n padding: 10px 14px;\n border-radius: 40px;\n margin-bottom: 8px;\n font-size: 1.1rem;\n font-weight: bold;\n letter-spacing: 1px;\n }\n\n .activity-title {\n font-size: 2.2rem;\n color: #2d4b6e;\n text-shadow: 2px 2px 0 #f8d59e;\n margin: 4px 0 2px;\n word-break: break-word;\n }\n\n .activity-meta {\n font-size: 1rem;\n color: #4a5f7a;\n background: #eef3f8;\n display: inline-block;\n padding: 4px 24px;\n border-radius: 40px;\n margin-bottom: 10px;\n font-weight: bold;\n }\n\n \/* ===== BOTONES ===== *\/\n .btn {\n background: #f9c23c;\n border: none;\n border-radius: 60px;\n padding: 16px 44px;\n font-size: 2rem;\n font-weight: bold;\n color: #1f3a4b;\n box-shadow: 0 8px 0 #b57c1a, 0 6px 12px rgba(0, 0, 0, 0.2);\n cursor: pointer;\n transition: all 0.06s linear;\n border: 2px solid #ffe19c;\n letter-spacing: 2px;\n margin: 6px 0;\n display: inline-block;\n }\n\n .btn:active {\n transform: translateY(6px);\n box-shadow: 0 2px 0 #b57c1a;\n }\n\n .btn-small {\n font-size: 1.2rem;\n padding: 10px 28px;\n box-shadow: 0 5px 0 #b57c1a;\n }\n\n .btn-restart {\n background: #e0d6c2;\n box-shadow: 0 5px 0 #a8987c;\n border-color: #cfc1a8;\n color: #3b2e1e;\n font-size: 1rem;\n padding: 10px 20px;\n }\n\n .btn-restart:active {\n transform: translateY(5px);\n box-shadow: 0 1px 0 #a8987c;\n }\n\n .btn-next {\n background: #7bb86c;\n box-shadow: 0 5px 0 #427a34;\n border-color: #a6d69a;\n color: #1d3a13;\n font-size: 1.2rem;\n padding: 10px 30px;\n }\n\n .btn-next:active {\n transform: translateY(5px);\n box-shadow: 0 1px 0 #427a34;\n }\n\n .btn-play-again {\n background: #f9c23c;\n box-shadow: 0 5px 0 #b57c1a;\n border-color: #ffe19c;\n font-size: 1.4rem;\n padding: 12px 36px;\n }\n\n \/* ===== PANTALLAS ===== *\/\n .screen {\n display: flex;\n flex-direction: column;\n flex: 1;\n justify-content: center;\n align-items: center;\n width: 100%;\n }\n\n .hidden-screen {\n display: none !important;\n }\n\n \/* ===== PANTALLA DE NOMBRE ===== *\/\n #name-screen .emoji-big {\n font-size: 4rem;\n line-height: 1.2;\n margin: 2px 0 0;\n }\n\n #name-screen p {\n font-size: 1.2rem;\n color: #3b2e1e;\n background: #f3e4cc;\n padding: 10px 20px;\n border-radius: 50px;\n display: inline-block;\n margin: 6px auto 10px;\n }\n\n .name-input {\n font-size: 2rem;\n padding: 12px 24px;\n border-radius: 40px;\n border: 4px solid #b39268;\n text-align: center;\n width: 80%;\n max-width: 300px;\n font-family: inherit;\n background: #fcf3e3;\n color: #1f3a4b;\n outline: none;\n transition: border 0.2s;\n }\n\n .name-input:focus {\n border-color: #f9c23c;\n box-shadow: 0 0 0 4px #f9c23c66;\n }\n\n \/* ===== PANTALLA DE SALUDO ===== *\/\n #greeting-screen .greeting-emoji {\n font-size: 4rem;\n }\n\n #greeting-screen .greeting-name {\n font-size: 2.8rem;\n color: #2d4b6e;\n font-weight: bold;\n }\n\n #greeting-screen .greeting-text {\n font-size: 1.3rem;\n color: #3b2e1e;\n background: #f3e4cc;\n padding: 10px 20px;\n border-radius: 50px;\n display: inline-block;\n margin: 6px auto;\n }\n\n \/* ===== PANTALLA DE INSTRUCCIONES ===== *\/\n #instructions-screen .instructions-box {\n background: #f3e4cc;\n border-radius: 40px;\n padding: 20px 24px;\n margin: 10px 0;\n text-align: left;\n font-size: 1.2rem;\n line-height: 1.8;\n width: 100%;\n max-width: 500px;\n }\n\n #instructions-screen .instructions-box li {\n list-style: none;\n padding: 4px 0;\n }\n\n #instructions-screen .instructions-box li::before {\n content: \"\u2728 \";\n }\n\n \/* ===== PANTALLA DE JUEGO ===== *\/\n #game-screen {\n width: 100%;\n }\n\n .game-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: #e7d7ba;\n border-radius: 50px;\n padding: 6px 16px 6px 22px;\n margin-bottom: 14px;\n flex-wrap: wrap;\n gap: 4px 10px;\n }\n\n .level-badge {\n font-size: 1.2rem;\n background: #2d4b6e;\n color: white;\n padding: 4px 20px;\n border-radius: 40px;\n font-weight: bold;\n letter-spacing: 1px;\n }\n\n .stars {\n font-size: 1.6rem;\n letter-spacing: 6px;\n background: #fcf3e3;\n padding: 2px 16px;\n border-radius: 40px;\n line-height: 1.4;\n }\n\n .player-name-badge {\n font-size: 1rem;\n background: #fcf3e3;\n padding: 4px 16px;\n border-radius: 40px;\n font-weight: bold;\n color: #2d4b6e;\n }\n\n .vowel-board {\n background: #e5d5b3;\n border-radius: 40px;\n padding: 20px 16px;\n margin: 8px 0 14px;\n border: 3px dashed #b39268;\n min-height: 150px;\n }\n\n .vowel-row {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n gap: 12px 20px;\n padding: 6px 0;\n }\n\n .vowel-row-label {\n font-size: 0.9rem;\n font-weight: bold;\n color: #4a3f2e;\n background: #fcf3e3;\n padding: 2px 14px;\n border-radius: 20px;\n margin-right: 4px;\n }\n\n .vowel-card {\n width: 80px;\n height: 90px;\n background: #fcf3e3;\n border-radius: 28px;\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: 1.8rem;\n font-weight: bold;\n color: #1f3a4b;\n border: 4px solid #b39268;\n box-shadow: 0 6px 0 #8b6e4b;\n cursor: pointer;\n transition: all 0.12s;\n touch-action: manipulation;\n gap: 2px;\n }\n\n .vowel-card .vowel-emoji {\n font-size: 2.4rem;\n line-height: 1;\n }\n\n .vowel-card .vowel-letter {\n font-size: 1.2rem;\n font-weight: bold;\n color: #4a3f2e;\n }\n\n .vowel-card:active {\n transform: scale(0.92);\n box-shadow: 0 2px 0 #8b6e4b;\n }\n\n .vowel-card.selected {\n border: 4px solid #f9c23c;\n box-shadow: 0 0 0 6px #f9c23c88, 0 6px 0 #8b6e4b;\n transform: scale(1.04);\n }\n\n .vowel-card.matched {\n background: #b8e0a8;\n border: 4px solid #4f7a2b;\n box-shadow: 0 4px 0 #3b5f1f;\n cursor: default;\n opacity: 0.7;\n transform: scale(0.96);\n }\n\n .vowel-card.matched:active {\n transform: scale(0.96);\n }\n\n .vowel-card.wrong {\n animation: wrongShake 0.4s ease;\n }\n\n @keyframes wrongShake {\n 0% { background: #f8b0b0; transform: translateX(0); }\n 25% { transform: translateX(-10px); }\n 50% { transform: translateX(10px); }\n 75% { transform: translateX(-6px); }\n 100% { background: #fcf3e3; transform: translateX(0); }\n }\n\n .feedback {\n font-size: 1.5rem;\n font-weight: bold;\n min-height: 3.4rem;\n padding: 6px 12px;\n margin: 8px 0 4px;\n border-radius: 60px;\n background: #fcf3e3;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n flex-wrap: wrap;\n }\n\n .feedback.success {\n color: #2b6e2b;\n }\n .feedback.error {\n color: #b13e3e;\n }\n .feedback.level-complete {\n color: #1f4d7a;\n background: #dae9fa;\n }\n .feedback.gameover {\n color: #7a4d1f;\n background: #faeacd;\n font-size: 1.8rem;\n }\n\n .game-actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 12px 18px;\n margin: 10px 0 2px;\n }\n\n \/* ===== RESPONSIVE ===== *\/\n @media (max-width: 600px) {\n #game-container { padding: 16px 12px; border-radius: 36px; }\n .activity-title { font-size: 1.7rem; }\n .vowel-card { width: 64px; height: 74px; }\n .vowel-card .vowel-emoji { font-size: 2rem; }\n .vowel-card .vowel-letter { font-size: 1rem; }\n .vowel-row { gap: 8px 14px; }\n .btn { font-size: 1.5rem; padding: 12px 28px; }\n .feedback { font-size: 1.2rem; min-height: 2.8rem; }\n .stars { font-size: 1.3rem; }\n .school-header { font-size: 0.9rem; padding: 6px 12px; }\n .greeting-name { font-size: 2rem; }\n .name-input { font-size: 1.5rem; padding: 10px 16px; }\n #instructions-screen .instructions-box { font-size: 1rem; padding: 14px 16px; }\n }\n\n @media (max-width: 400px) {\n .vowel-card { width: 52px; height: 60px; }\n .vowel-card .vowel-emoji { font-size: 1.6rem; }\n .vowel-card .vowel-letter { font-size: 0.8rem; }\n .vowel-row { gap: 4px 8px; }\n .activity-title { font-size: 1.4rem; }\n .game-header { flex-direction: column; align-items: stretch; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"game-container\">\n <!-- ===== PANTALLA DE NOMBRE ===== -->\n <div id=\"name-screen\" class=\"screen\">\n <div class=\"school-header\">\ud83c\udfeb Escuela Ignacio Altamirano<\/div>\n <div class=\"emoji-big\">\ud83d\udd24\u2728<\/div>\n <div class=\"activity-title\">Vocales y sus amigas<\/div>\n <div class=\"activity-meta\">1.\u00ba de Primaria \u00b7 6 a\u00f1os<\/div>\n <div class=\"activity-meta\">Creaci\u00f3n: H\u00e9ctor G S\u00e1nchez<\/div>\n <p>\ud83d\udc4b \u00a1Hola! Bienvenido(a)<\/p>\n <p style=\"font-size:1rem; background:transparent; padding:0; margin:4px 0;\">Vamos a jugar y aprender.<\/p>\n <p style=\"font-size:1rem; background:transparent; padding:0; margin:4px 0 12px;\">\u00bfC\u00f3mo te llamas?<\/p>\n <input type=\"text\" class=\"name-input\" id=\"name-input\" placeholder=\"Escribe tu nombre\" maxlength=\"20\">\n <br>\n <button class=\"btn btn-small\" id=\"btn-name-continue\" style=\"margin-top:12px;\">CONTINUAR<\/button>\n <\/div>\n\n <!-- ===== PANTALLA DE SALUDO ===== -->\n <div id=\"greeting-screen\" class=\"screen hidden-screen\">\n <div class=\"school-header\">\ud83c\udfeb Escuela Ignacio Altamirano<\/div>\n <div class=\"greeting-emoji\">\u2b50<\/div>\n <div class=\"greeting-name\" id=\"greeting-name-display\">\u00a1Muy bien, [Nombre]!<\/div>\n <div class=\"greeting-text\">\u00a1Qu\u00e9 gusto jugar contigo!<\/div>\n <br>\n <button class=\"btn btn-small\" id=\"btn-greeting-continue\">VER INSTRUCCIONES<\/button>\n <\/div>\n\n <!-- ===== PANTALLA DE INSTRUCCIONES ===== -->\n <div id=\"instructions-screen\" class=\"screen hidden-screen\">\n <div class=\"school-header\">\ud83c\udfeb Escuela Ignacio Altamirano<\/div>\n <div class=\"activity-title\" style=\"font-size:1.8rem;\">\ud83d\udcda \u00bfC\u00f3mo jugar?<\/div>\n <div class=\"instructions-box\">\n <li><strong>1.<\/strong> Observa las vocales may\u00fasculas y sus im\u00e1genes.<\/li>\n <li><strong>2.<\/strong> Toca una may\u00fascula y luego su min\u00fascula para unirlas.<\/li>\n <li><strong>3.<\/strong> Cada pareja correcta te da <strong>\u2b50 1 estrella<\/strong>.<\/li>\n <li><strong>4.<\/strong> Completa todas las parejas para avanzar de nivel.<\/li>\n <li><strong>5.<\/strong> \u00a1Gana todas las estrellas y convi\u00e9rtete en un experto!<\/li>\n <\/div>\n <div style=\"font-size:1.2rem; color:#2d4b6e; margin:6px 0;\">\n \u00bfListo(a), <span id=\"instructions-name\">[Nombre]<\/span>?\n <\/div>\n <button class=\"btn btn-small\" id=\"btn-instructions-start\">\u00a1EMPEZAR A JUGAR!<\/button>\n <\/div>\n\n <!-- ===== PANTALLA DE JUEGO ===== -->\n <div id=\"game-screen\" class=\"screen hidden-screen\">\n <div class=\"school-header\">\ud83c\udfeb Escuela Ignacio Altamirano<\/div>\n <div class=\"activity-title\" style=\"font-size:1.4rem; margin:2px 0;\">Vocales y sus amigas<\/div>\n <div class=\"activity-meta\" style=\"font-size:0.85rem; padding:2px 16px;\">1.\u00ba de Primaria \u00b7 6 a\u00f1os<\/div>\n\n <div class=\"game-header\">\n <span class=\"level-badge\" id=\"level-display\">Nivel 1<\/span>\n <span class=\"player-name-badge\" id=\"game-name-badge\">\ud83d\udc64 [Nombre]<\/span>\n <span class=\"stars\" id=\"stars-display\">\u2b50 0<\/span>\n <\/div>\n\n <div class=\"vowel-board\" id=\"vowel-board\">\n <div class=\"vowel-row\" id=\"row-uppercase\">\n <span class=\"vowel-row-label\">May\u00fasculas<\/span>\n <\/div>\n <div class=\"vowel-row\" id=\"row-lowercase\">\n <span class=\"vowel-row-label\">Min\u00fasculas<\/span>\n <\/div>\n <\/div>\n\n <div class=\"feedback\" id=\"feedback\">\ud83d\udd24 Toca una may\u00fascula y su min\u00fascula<\/div>\n\n <div class=\"game-actions\">\n <button class=\"btn btn-restart\" id=\"btn-restart\">\ud83d\udd04 Reiniciar<\/button>\n <button class=\"btn btn-next hidden-screen\" id=\"btn-next\">\u27a1\ufe0f Siguiente nivel<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n (function() {\n 'use strict';\n\n \/\/ ================================================================\n \/\/ CONFIGURACI\u00d3N\n \/\/ ================================================================\n\n const VOWEL_EMOJI = {\n 'A': '\ud83d\udd77\ufe0f',\n 'E': '\ud83d\udc18',\n 'I': '\ud83e\udd8e',\n 'O': '\ud83d\udc3c',\n 'U': '\ud83c\udf47'\n };\n\n const VOWEL_MAP = {\n 'A': 'a', 'E': 'e', 'I': 'i', 'O': 'o', 'U': 'u'\n };\n\n const LEVELS = [\n { vowels: ['A', 'E', 'I'] },\n { vowels: ['A', 'E', 'I', 'O'] },\n { vowels: ['A', 'E', 'I', 'O', 'U'] }\n ];\n\n \/\/ ================================================================\n \/\/ ESTADO\n \/\/ ================================================================\n\n let playerName = '';\n let currentLevel = 0;\n let totalStars = 0;\n let selectedUpper = null;\n let selectedLower = null;\n let isProcessing = false;\n let matchedPairs = 0;\n let totalPairs = 0;\n let levelComplete = false;\n\n \/\/ DOM\n const nameScreen = document.getElementById('name-screen');\n const greetingScreen = document.getElementById('greeting-screen');\n const instructionsScreen = document.getElementById('instructions-screen');\n const gameScreen = document.getElementById('game-screen');\n\n const nameInput = document.getElementById('name-input');\n const btnNameContinue = document.getElementById('btn-name-continue');\n const greetingNameDisplay = document.getElementById('greeting-name-display');\n const btnGreetingContinue = document.getElementById('btn-greeting-continue');\n const instructionsName = document.getElementById('instructions-name');\n const btnInstructionsStart = document.getElementById('btn-instructions-start');\n\n const rowUpper = document.getElementById('row-uppercase');\n const rowLower = document.getElementById('row-lowercase');\n const feedbackEl = document.getElementById('feedback');\n const levelDisplay = document.getElementById('level-display');\n const starsDisplay = document.getElementById('stars-display');\n const gameNameBadge = document.getElementById('game-name-badge');\n const btnRestart = document.getElementById('btn-restart');\n const btnNext = document.getElementById('btn-next');\n\n \/\/ ================================================================\n \/\/ UTILIDADES\n \/\/ ================================================================\n\n function shuffleArray(arr) {\n for (let i = arr.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [arr[i], arr[j]] = [arr[j], arr[i]];\n }\n return arr;\n }\n\n \/\/ ================================================================\n \/\/ NAVEGACI\u00d3N ENTRE PANTALLAS\n \/\/ ================================================================\n\n function showScreen(screenId) {\n const screens = ['name-screen', 'greeting-screen', 'instructions-screen', 'game-screen'];\n screens.forEach(id => {\n const el = document.getElementById(id);\n if (id === screenId) {\n el.classList.remove('hidden-screen');\n } else {\n el.classList.add('hidden-screen');\n }\n });\n }\n\n \/\/ ================================================================\n \/\/ INICIO - NOMBRE\n \/\/ ================================================================\n\n btnNameContinue.addEventListener('click', function() {\n const name = nameInput.value.trim();\n if (name === '') {\n alert('Por favor, escribe tu nombre para continuar.');\n return;\n }\n playerName = name;\n greetingNameDisplay.textContent = `\u2b50 \u00a1Muy bien, ${playerName}!`;\n instructionsName.textContent = playerName;\n gameNameBadge.textContent = `\ud83d\udc64 ${playerName}`;\n showScreen('greeting-screen');\n });\n\n nameInput.addEventListener('keydown', function(e) {\n if (e.key === 'Enter') {\n btnNameContinue.click();\n }\n });\n\n \/\/ ================================================================\n \/\/ SALUDO\n \/\/ ================================================================\n\n btnGreetingContinue.addEventListener('click', function() {\n showScreen('instructions-screen');\n });\n\n \/\/ ================================================================\n \/\/ INSTRUCCIONES\n \/\/ ================================================================\n\n btnInstructionsStart.addEventListener('click', function() {\n showScreen('game-screen');\n resetGame();\n });\n\n \/\/ ================================================================\n \/\/ JUEGO\n \/\/ ================================================================\n\n function initLevel(levelIndex) {\n const level = LEVELS[levelIndex];\n if (!level) return;\n\n levelComplete = false;\n matchedPairs = 0;\n selectedUpper = null;\n selectedLower = null;\n isProcessing = false;\n btnNext.classList.add('hidden-screen');\n\n const vowels = level.vowels;\n totalPairs = vowels.length;\n\n let uppers = [...vowels];\n let lowers = vowels.map(v => VOWEL_MAP[v]);\n\n shuffleArray(uppers);\n shuffleArray(lowers);\n\n renderRow(rowUpper, uppers, 'upper');\n renderRow(rowLower, lowers, 'lower');\n\n updateStars();\n updateLevelDisplay();\n setFeedback(`\ud83d\udd24 Toca una may\u00fascula y su min\u00fascula, ${playerName}`, '');\n }\n\n function renderRow(rowElement, items, type) {\n const label = rowElement.querySelector('.vowel-row-label');\n rowElement.innerHTML = '';\n if (label) rowElement.appendChild(label);\n\n items.forEach(letter => {\n const card = document.createElement('div');\n card.className = 'vowel-card';\n card.dataset.letter = letter;\n card.dataset.type = type;\n card.dataset.matched = 'false';\n\n if (type === 'upper') {\n const emojiSpan = document.createElement('span');\n emojiSpan.className = 'vowel-emoji';\n emojiSpan.textContent = VOWEL_EMOJI[letter] || '\ud83d\udd24';\n card.appendChild(emojiSpan);\n\n const letterSpan = document.createElement('span');\n letterSpan.className = 'vowel-letter';\n letterSpan.textContent = letter;\n card.appendChild(letterSpan);\n } else {\n card.textContent = letter;\n card.style.fontSize = '2.8rem';\n }\n\n card.addEventListener('click', onCardClick);\n card.addEventListener('touchstart', function(e) {\n e.preventDefault();\n onCardClick.call(this, e);\n }, { passive: false });\n\n rowElement.appendChild(card);\n });\n }\n\n function updateStars() {\n starsDisplay.textContent = `\u2b50 ${totalStars}`;\n }\n\n function updateLevelDisplay() {\n levelDisplay.textContent = `Nivel ${currentLevel + 1}`;\n }\n\n function setFeedback(text, type = '') {\n feedbackEl.textContent = text;\n feedbackEl.className = 'feedback';\n if (type) feedbackEl.classList.add(type);\n }\n\n \/\/ ================================================================\n \/\/ L\u00d3GICA DE SELECCI\u00d3N\n \/\/ ================================================================\n\n function onCardClick(e) {\n if (isProcessing || levelComplete) return;\n\n const card = this;\n const type = card.dataset.type;\n const letter = card.dataset.letter;\n\n if (card.dataset.matched === 'true') return;\n\n if (type === 'upper') {\n if (selectedUpper) {\n selectedUpper.classList.remove('selected');\n }\n card.classList.add('selected');\n selectedUpper = card;\n setFeedback(`\u2705 May\u00fascula seleccionada: ${letter}`, '');\n return;\n }\n\n if (type === 'lower') {\n if (!selectedUpper) {\n setFeedback(`\ud83d\udd39 Primero toca una may\u00fascula, ${playerName}`, 'error');\n return;\n }\n\n if (selectedLower) {\n selectedLower.classList.remove('selected');\n }\n\n card.classList.add('selected');\n selectedLower = card;\n setFeedback(`\u2705 Min\u00fascula seleccionada: ${letter}`, '');\n\n checkMatch();\n }\n }\n\n \/\/ ================================================================\n \/\/ VALIDACI\u00d3N\n \/\/ ================================================================\n\n function checkMatch() {\n if (!selectedUpper || !selectedLower) return;\n\n isProcessing = true;\n\n const upperLetter = selectedUpper.dataset.letter;\n const lowerLetter = selectedLower.dataset.letter;\n const expectedLower = VOWEL_MAP[upperLetter];\n\n if (lowerLetter === expectedLower) {\n setFeedback(`\ud83c\udf89 \u00a1Correcto, ${playerName}! +1 \u2b50`, 'success');\n\n selectedUpper.dataset.matched = 'true';\n selectedLower.dataset.matched = 'true';\n selectedUpper.classList.remove('selected');\n selectedLower.classList.remove('selected');\n selectedUpper.classList.add('matched');\n selectedLower.classList.add('matched');\n\n matchedPairs++;\n totalStars++;\n updateStars();\n\n selectedUpper = null;\n selectedLower = null;\n isProcessing = false;\n\n if (matchedPairs === totalPairs) {\n levelComplete = true;\n setFeedback(`\ud83c\udf8a \u00a1Nivel ${currentLevel + 1} completado, ${playerName}! \ud83c\udf1f`, 'level-complete');\n if (currentLevel < LEVELS.length - 1) {\n btnNext.classList.remove('hidden-screen');\n } else {\n setFeedback(`\ud83c\udfc6 \u00a1Eres un experto en vocales, ${playerName}! \ud83c\udfc6`, 'gameover');\n btnNext.classList.add('hidden-screen');\n btnRestart.textContent = '\ud83d\udd04 Jugar de nuevo';\n btnRestart.onclick = function() {\n resetGame();\n };\n }\n } else {\n setFeedback(`\u2705 \u00a1Bien, ${playerName}! ${matchedPairs}\/${totalPairs}`, 'success');\n }\n } else {\n setFeedback(`\u274c Int\u00e9ntalo de nuevo, ${playerName}`, 'error');\n selectedUpper.classList.add('wrong');\n selectedLower.classList.add('wrong');\n\n setTimeout(() => {\n selectedUpper.classList.remove('selected', 'wrong');\n selectedLower.classList.remove('selected', 'wrong');\n selectedUpper = null;\n selectedLower = null;\n isProcessing = false;\n setFeedback(`\ud83d\udd24 Toca una may\u00fascula y su min\u00fascula, ${playerName}`, '');\n }, 500);\n }\n }\n\n \/\/ ================================================================\n \/\/ NAVEGACI\u00d3N\n \/\/ ================================================================\n\n function goToNextLevel() {\n if (currentLevel < LEVELS.length - 1) {\n currentLevel++;\n initLevel(currentLevel);\n btnRestart.textContent = '\ud83d\udd04 Reiniciar';\n btnRestart.onclick = function() {\n restartLevel();\n };\n setFeedback(`\ud83d\udd24 Nivel ${currentLevel + 1}, ${playerName}`, '');\n }\n }\n\n function restartLevel() {\n initLevel(currentLevel);\n btnRestart.textContent = '\ud83d\udd04 Reiniciar';\n btnRestart.onclick = function() {\n restartLevel();\n };\n }\n\n function resetGame() {\n totalStars = 0;\n currentLevel = 0;\n updateStars();\n initLevel(0);\n btnRestart.textContent = '\ud83d\udd04 Reiniciar';\n btnRestart.onclick = function() {\n restartLevel();\n };\n btnNext.classList.add('hidden-screen');\n setFeedback(`\ud83d\udd24 Toca una may\u00fascula y su min\u00fascula, ${playerName}`, '');\n }\n\n \/\/ ================================================================\n \/\/ EVENTOS\n \/\/ ================================================================\n\n btnRestart.addEventListener('click', function() {\n restartLevel();\n });\n\n btnNext.addEventListener('click', function() {\n goToNextLevel();\n });\n\n document.addEventListener('dragstart', function(e) {\n e.preventDefault();\n });\n\n \/\/ ================================================================\n \/\/ INICIO\n \/\/ ================================================================\n\n showScreen('name-screen');\n\n })();\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:120px\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a1Bienvenidos al Abecedario M\u00e1gico! Un juego divertido donde los ni\u00f1os de primer grado pueden practicar el abecedario arrastrando las letras … <\/p>\n","protected":false},"author":1,"featured_media":290,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_lock_modified_date":false,"footnotes":""},"categories":[6,7],"tags":[8],"class_list":["post-323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-juegos","category-primero-de-primaria","tag-espanol"],"_links":{"self":[{"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/posts\/323"}],"collection":[{"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/comments?post=323"}],"version-history":[{"count":1,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/posts\/323\/revisions"}],"predecessor-version":[{"id":326,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/posts\/323\/revisions\/326"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/media\/290"}],"wp:attachment":[{"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/media?parent=323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/categories?post=323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eppaltamirano.com.mx\/index.php\/wp-json\/wp\/v2\/tags?post=323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}