En esta entrada te compartiré un recurso educativo digital que puedes usar sin conexión a internet. Es perfecto para docentes de primaria que desean enseñar las tablas de multiplicar de forma divertida, interactiva y offline.
Con este material podrás crear un juego HTML sobre las tablas de multiplicar y ejecutarlo directamente desde tu computador, sin necesidad de conexión. Ideal para aulas rurales o zonas sin conectividad.
Déjanos apoyarte en demostrar que las matemáticas son fáciles si se enseñan bien.
¿Por qué usar juegos offline para enseñar matemáticas?
Los juegos educativos interactivos ayudan a que los niños aprendan las tablas de multiplicar de manera visual y entretenida.
Al no depender de internet, este material offline garantiza que el aprendizaje continúe en cualquier entorno.
Además, los profesores pueden proyectar el juego en clase o dejar que los estudiantes practiquen desde un computador escolar.
Existen varios tipos de juegos didácticos para practicar o enseñar matemáticas… aquí en nuestro sitio encontrarás muchos RETOS MATEMÁTICOS, además de MATEGRAMAS y CRUCIOPERACIONES!
¿Cómo juego memoria de tablas de multiplicar con mis estudiantes sin internet?
Lo primero es copiar el código que aparece a continuación y seguir las instrucciones de de nuestro vídeo YouTube (está después del código)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de Memoria - Multiplicaciones</title>
<style>
body {
font-family: "Poppins", sans-serif;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
height: 100vh;
margin: 0;
background: linear-gradient(90deg, #f0f4ff, #ffffff);
position: relative;
}
/* ESCUDO SUPERIOR DERECHO */
#escudo {
position: absolute;
top: 15px;
right: 15px;
width: 150px;
height: 150px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 100, 255, 0.7);
animation: brillo 2s infinite alternate ease-in-out;
}
@keyframes brillo {
0% { box-shadow: 0 0 10px rgba(0, 100, 255, 0.5); transform: scale(1); }
100% { box-shadow: 0 0 25px rgba(0, 150, 255, 1); transform: scale(1.05); }
}
/* PANEL IZQUIERDO */
#sidebar {
width: 280px;
background: #f8f9ff;
border-right: 2px solid #d9def5;
padding: 20px;
box-shadow: 3px 0 6px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
align-items: flex-start;
}
h1 {
font-size: 1.3rem;
color: #333;
margin-bottom: 10px;
text-align: left;
}
#controls {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
#table-select, #digits-select {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 0.9rem;
gap: 4px;
}
label {
cursor: pointer;
}
#actions {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
margin-top: 10px;
}
button {
background: #2b6ef6;
color: white;
border: none;
padding: 10px;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
width: 100%;
transition: background 0.2s ease;
}
button:hover {
background: #1e4fc9;
}
#timer {
font-weight: bold;
margin-top: 10px;
color: #222;
}
#status {
margin-top: 10px;
font-weight: 500;
color: #333;
}
#records {
margin-top: 15px;
width: 100%;
}
#records h3 {
margin-bottom: 5px;
font-size: 1rem;
color: #2b2b2b;
}
#bestTimes {
list-style: none;
padding: 0;
margin: 0;
}
#bestTimes li {
font-size: 0.9rem;
margin-bottom: 4px;
color: #333;
}
/* TABLERO DEL JUEGO */
#game-area {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
#game {
display: grid;
grid-template-columns: repeat(6, 100px);
grid-template-rows: repeat(6, 100px);
gap: 10px;
justify-content: center;
perspective: 1000px;
}
.card {
width: 100px;
height: 100px;
position: relative;
cursor: pointer;
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.card.flipped {
transform: rotateY(180deg);
}
.card.matched {
cursor: default;
animation: bounce 0.6s ease, glow 1.2s ease-in-out;
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.4rem;
backface-visibility: hidden;
box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.front {
transform: rotateY(180deg);
color: white;
}
.back {
color: white;
}
.operation .front, .operation .back {
background-color: #e03131;
}
.result .front, .result .back {
background-color: #0066cc;
}
.matched .front, .matched .back {
background-color: #00b341 !important;
}
@keyframes bounce {
0%, 100% { transform: scale(1); }
30% { transform: scale(1.2); }
50% { transform: scale(0.9); }
70% { transform: scale(1.1); }
}
@keyframes glow {
0% { box-shadow: 0 0 5px #00ff73, 0 0 10px #00ff73, 0 0 20px #00ff73; }
100% { box-shadow: 0 0 0px transparent; }
}
</style>
</head>
<body>
<!-- Escudo del colegio -->
<img id="escudo" src="escudo.png" alt="Escudo del Colegio">
<div id="sidebar">
<h1>🧮 Juego de Memoria</h1>
<div id="controls">
<div id="table-select">
<strong>Tablas:</strong>
<label><input type="checkbox" value="1">x1</label>
<label><input type="checkbox" value="2" checked>x2</label>
<label><input type="checkbox" value="3">x3</label>
<label><input type="checkbox" value="4">x4</label>
<label><input type="checkbox" value="5">x5</label>
<label><input type="checkbox" value="6">x6</label>
<label><input type="checkbox" value="7">x7</label>
<label><input type="checkbox" value="8">x8</label>
<label><input type="checkbox" value="9">x9</label>
</div>
<div id="digits-select">
<strong>Tipo de operación:</strong>
<label><input type="radio" name="digits" value="1x1" checked>1 cifra × 1
cifra</label>
<label><input type="radio" name="digits" value="1x2">1 cifra × 2 cifras</label>
<label><input type="radio" name="digits" value="2x2">2 cifras × 2 cifras</label>
</div>
<div id="actions">
<button id="start">INICIAR</button>
<button id="restart">REINICIAR</button>
</div>
<div id="timer">⏱️ Tiempo: 00:00</div>
<div id="status"></div>
<div id="records">
<h3>🏆 Mejores tiempos</h3>
<ul id="bestTimes"></ul>
</div>
</div>
</div>
<div id="game-area">
<div id="game"></div>
</div>
<script>
/* --- MISMO CÓDIGO DEL JUEGO --- */
const gameContainer = document.getElementById("game");
const timerDiv = document.getElementById("timer");
const statusDiv = document.getElementById("status");
const bestTimesList = document.getElementById("bestTimes");
let flippedCards = [];
let matchedCount = 0;
let seconds = 0;
let timerInterval;
let currentSettings = null;
function getSelectedSettings() {
const selectedTables = [...document.querySelectorAll('#table-select input:checked')].map(i
=> parseInt(i.value));
const digits = document.querySelector('input[name="digits"]:checked').value;
return { selectedTables, digits };
}
function startTimer() {
clearInterval(timerInterval);
seconds = 0;
timerDiv.textContent = "⏱️ Tiempo: 00:00";
timerInterval = setInterval(() => {
seconds++;
const min = String(Math.floor(seconds / 60)).padStart(2, "0");
const sec = String(seconds % 60).padStart(2, "0");
timerDiv.textContent = `⏱️ Tiempo: ${min}:${sec}`;
}, 1000);
}
function stopTimer() { clearInterval(timerInterval); }
function generatePairs(settings) {
const { selectedTables, digits } = settings;
const pairs = [];
const used = new Set();
while (pairs.length < 18) {
const a = selectedTables[Math.floor(Math.random() * selectedTables.length)];
const b = digits === "1x1" ? Math.floor(Math.random() * 9) + 1 :
digits === "1x2" ? Math.floor(Math.random() * 90) + 10 :
Math.floor(Math.random() * 90) + 10;
const res = a * b;
const key = `${a}x${b}`;
if (!used.has(key)) {
pairs.push({ op: `${a}×${b}`, res });
pairs.push({ op: `${b}×${a}`, res });
used.add(key);
if (pairs.length >= 18) break;
}
}
return pairs.slice(0, 18);
}
function setupGame(settings) {
currentSettings = settings;
stopTimer();
gameContainer.innerHTML = "";
statusDiv.textContent = "";
matchedCount = 0;
flippedCards = [];
const pairs = generatePairs(settings);
const allCards = [];
pairs.forEach(pair => {
allCards.push({ type: "operation", value: pair.op, result: pair.res });
allCards.push({ type: "result", value: String(pair.res), result: pair.res });
});
const shuffled = allCards.sort(() => Math.random() - 0.5);
shuffled.forEach(data => {
const card = document.createElement("div");
card.classList.add("card", data.type);
card.dataset.type = data.type;
card.dataset.result = data.result;
const front = document.createElement("div");
front.classList.add("card-face", "front");
front.textContent = data.value;
const back = document.createElement("div");
back.classList.add("card-face", "back");
back.textContent = "?";
card.appendChild(front);
card.appendChild(back);
card.addEventListener("click", () => flipCard(card));
gameContainer.appendChild(card);
});
startTimer();
}
function flipCard(card) {
if (card.classList.contains("flipped") || card.classList.contains("matched") ||
flippedCards.length === 2) return;
card.classList.add("flipped");
flippedCards.push(card);
if (flippedCards.length === 2) {
const [c1, c2] = flippedCards;
const match = c1.dataset.result === c2.dataset.result && c1.dataset.type !==
c2.dataset.type;
if (match) {
setTimeout(() => {
c1.classList.add("matched");
c2.classList.add("matched");
flippedCards = [];
matchedCount++;
if (matchedCount === 18) gameWon();
}, 400);
} else {
setTimeout(() => {
c1.classList.remove("flipped");
c2.classList.remove("flipped");
flippedCards = [];
}, 900);
}
}
}
function gameWon() {
stopTimer();
const name = prompt("🎉 ¡Ganaste! Escribe tu nombre para guardar el récord:");
if (name) saveBestTime(name, seconds);
renderBestTimes();
statusDiv.textContent = `👏 ¡Excelente, ${name}! Tiempo: ${formatTime(seconds)}.`;
}
function formatTime(totalSec) {
const min = String(Math.floor(totalSec / 60)).padStart(2, "0");
const sec = String(totalSec % 60).padStart(2, "0");
return `${min}:${sec}`;
}
function saveBestTime(name, sec) {
let records = JSON.parse(localStorage.getItem("memoriaMultiplicaciones")) || [];
records.push({ name, sec });
records.sort((a, b) => a.sec - b.sec);
records = records.slice(0, 5);
localStorage.setItem("memoriaMultiplicaciones", JSON.stringify(records));
}
function renderBestTimes() {
const records = JSON.parse(localStorage.getItem("memoriaMultiplicaciones")) || [];
bestTimesList.innerHTML = records.map(r => `<li>${r.name}: ${formatTime(r.sec)}
</li>`).join("");
}
document.getElementById("start").addEventListener("click", () => {
const settings = getSelectedSettings();
setupGame(settings);
});
document.getElementById("restart").addEventListener("click", () => {
if (currentSettings) setupGame(currentSettings);
});
renderBestTimes();
</script>
</body>
</html>
Beneficios de aprender con juegos matemáticos
Jugar con las matemáticas hace que el aprendizaje sea más interactivo, divertido y efectivo. Este tipo de actividades mejora la agilidad mental, el razonamiento lógico y la memoria visual.
Además, permite que los estudiantes asocien los números con emociones positivas, reduciendo el miedo o aburrimiento hacia la materia.
Por eso en lasmatesfaciles.com creemos firmemente que “las matemáticas son fáciles si se enseñan bien”.
No olvides suscribirte a nuestro Canal de YouTube y descubrir que las matemáticas son fáciles si se enseñan bien.
Si lo que deseas es imprimir nuestro mategrama de geometría te lo dejamos aquí en versión pdf para que te diviertas con tus estudiantes o pongas a prueba tus conocimientos.
¿Odias las matemáticas pero amas los crucigramas? Pues acá te tenemos más de nuestros Crucigramas Matemáticos – MATEGRAMAS para que odies ambas cosas al tiempo!
De momento tenemos disponibles estos mategramas pero iremos añadiendo muchos más!
Si te gustaría descargar más de nuestras actividades y material didáctico de matemáticas no dudes en visitar nuestra sección MATERIAL.
¿Te gusto nuestro MATEGRAMA DE GEOMETRÍA – CRUCIGRAMAS MATEMÁTICOS?
Suscríbete gratis para ser el primero en enterarte de cada nuevo mategrama:
Tal vez te interese el CRUCIGRAMA de Las Matemáticas en la vida cotidiana
Si deseas que te avisemos a tu correo electrónico cada vez que publicamos algo nuevo, no dudes en suscribirte gratis!
¿Por qué no miramos un poco hacia el espacio y la inmensidad del universo?
¿Sabías que tenemos varias app que pueden ayudarte con tus tareas?
Descubre una gran colección de herramientas para echarte una mano con los deberes de Matemáticas, Física, Trigonometría y Geometría!
Si lo tuyo es ir directo al grano… aquí tenemos el enlace de descarga!!
Nuestra App es gratuita y la puedes buscar en la tienda de aplicaciones de Google Play en tu teléfono Android con el nombre de Ayudante de Tareas (lo sentimos pero todavía no estamos disponibles para dispositivos iOS… pronto!)
¿Problemas con estadística?
Descargar GRATIS nuestra CALCULADORA DE ESTADÍSTICA
