⚡ Recurso interactivo · 8-12 años

Aprende circuitos eléctricos jugando

Construye, prueba y entiende circuitos con piezas interactivas en 3D, polímetro y la ley de Ohm. Con Chispi, tu guía eléctrica.

🎮 Empezar tutorial 🧪 Abrir sandbox 🔬 Laboratorio de Ohm 🛠️ Ver cómo se ha creado

6 niveles guiadosLey de Ohm y polímetroVista 3D del circuitoSin registro

Teoría en 2 minutos

Lo que necesitas saber

De la pila a la ley de Ohm, pasando por el código de colores y Kirchhoff. Explora cada concepto en su pestaña, con metáforas y mini-retos.

⚡

¿Qué es la electricidad?

Son montones de partículas diminutas (electrones) corriendo a la vez por un material. Cuando todas corren en la misma dirección, tenemos corriente eléctrica.

🧠 Metáfora: Como agua corriendo por una tubería.

Tutorial guiado

6 niveles, de aprendiz a inventor

Cada nivel tiene un objetivo, piezas limitadas y validación automática. Si te atascas, pide una pista a Chispi.

💡

Nivel 1 de 6

Enciende la bombilla

Objetivo: Conecta la pila y la bombilla con cables formando un camino cerrado (¡de ida y vuelta!).

Elige una pieza y toca una casilla (o arrástrala). Toques especiales: el interruptor se abre/cierra, la pila cambia de voltaje y la resistencia de valor. Con 🔁 giras piezas, con 📟 mides valores y con 🧽 borras. El resto de piezas se quitan tocándolas.

🔋 Falta la pila

Sandbox

Laboratorio libre

Todas las piezas, sin límites ni objetivos. Cambia voltajes, gira piezas, mide con el polímetro 📟 y mira tu circuito en 3D 🧊. ¡Experimenta!

🔋 Falta la pila

Laboratorio

Juega con la ley de Ohm

Tres juegos rápidos: mueve voltios y ohmios para ver la corriente, aprende a leer resistencias por sus colores y supera retos de potencia.

Mueve los mandos y mira cómo responde la corriente. Más voltios = más corriente. Más ohmios = menos corriente. ¡Esa es toda la ley de Ohm!

🔋 Voltaje: 4.5 V

🎚️ Resistencia: 100 Ω

I = V ÷ R = 4.5 ÷ 100 →

CORRIENTE

45 mA

POTENCIA

202 mW

← las rayitas corren más deprisa cuanta más corriente pasa

Para docentes y familias

Cómo se ha creado este recurso

Esta herramienta no usa IA, APIs ni servidores: es HTML, CSS y JavaScript funcionando en tu navegador, con Three.js para el 3D. Aquí tienes la receta completa para recrearla paso a paso, y un prompt listo para pedírsela a un asistente de programación.

1🧱

Estructura de la página

Todo vive en una sola página: hero, teoría en pestañas, tutorial, sandbox, laboratorio y esta guía. No hay servidor ni base de datos: el estado completo (piezas, niveles, mensajes de Chispi) son variables de JavaScript en tu navegador.

hero → teoría → tutorial → sandbox → laboratorio → guía

2🔩

Componentes eléctricos en JavaScript

El tablero es una cuadrícula y cada pieza es un objeto guardado en un mapa cuya clave es su casilla. Cada pieza guarda lo que necesita: el interruptor si está abierto, la pila sus voltios, la resistencia sus ohmios y todas su rotación.

grid['3,1'] = { type: 'resistencia', ohms: 220, rot: 1 }

3🧊

Piezas 3D con Three.js

Three.js se carga por CDN y se usa dos veces: en el hero decorativo y en la vista 3D del tablero, que reconstruye tu circuito con geometrías básicas (cilindros, esferas, cajas) y una chispa que recorre el camino cuando hay corriente. Si Three.js no carga, se muestra una versión 2D en SVG.

new THREE.CylinderGeometry(0.28, 0.28, 0.7) // ¡la pila!

4🎯

Niveles y retos

Cada nivel es un objeto de un array: qué piezas puede usar el jugador (palette), qué piezas ya están colocadas (preset, como el circuito roto del nivel 4) y una función goal que decide si el reto está superado mirando el resultado de la validación.

goal: (r) => r.status === 'on' && r.hasSwitch

5✅

Validar el circuito y aplicar la ley de Ohm

Primero, una búsqueda en anchura (BFS) comprueba si hay camino cerrado entre los polos de la pila sin interruptores abiertos. Si lo hay, se suman las resistencias del camino (circuito en serie) y se aplica Ohm: I = V ÷ R total. Con la corriente se calcula la potencia de cada pieza (P = I² × R), que decide el brillo de cada bombilla y lo que marca el polímetro.

I = V / Rtotal · P = I² × R · brillo = f(P)

6🐿️

La mascota Chispi

Chispi es un SVG dibujado a código (un rayo con cara) dentro de una tarjeta flotante. Hay un estado global con su mensaje y su humor; cada evento del circuito (cerrar el camino, cortocircuito, exceso de potencia, pista pedida) actualiza ese estado y Chispi reacciona al momento.

chispi('¡Cuidado! 2,7 W es demasiado para esta bombilla')

7🔁

Adáptalo a otras materias

La receta cuadrícula + piezas + validación + mascota sirve para casi todo: el ciclo del agua (conecta etapas), cadenas alimentarias (¿quién se come a quién?), rutas en un mapa, oraciones con sujeto y predicado... Cambia las piezas y la función de validación, y tendrás un recurso nuevo.

piezas nuevas + regla nueva = recurso nuevo

📋 Prompt para recrearlo

Copia este prompt y pégalo en un asistente de programación (Claude, ChatGPT, Copilot...). Es editable: cambia la materia, las piezas o los niveles y crea tu propia versión.

Actúa como desarrollador front-end educativo. Crea una herramienta web interactiva para que niños y niñas de 8 a 12 años aprendan circuitos eléctricos y la ley de Ohm, en un único archivo HTML con CSS y JavaScript puro (sin frameworks, sin APIs, sin IA, sin backend y sin imágenes externas). Puedes usar Three.js por CDN para el 3D, con una alternativa 2D en SVG si no carga.

La herramienta debe incluir:

1. TEORÍA EN PESTAÑAS con metáforas sencillas: electricidad, pila, cable, bombilla, interruptor, circuito abierto/cerrado, resistencia, polaridad, ley de Ohm (V = I × R), potencia (P = V × I), código de colores de las resistencias y leyes de Kirchhoff (con un mini-ejercicio del nudo: la corriente que entra es igual a la que sale).

2. CONSTRUCTOR sobre cuadrícula con piezas que se colocan tocando o arrastrando, se pueden girar y tienen valores reales: pila con voltaje seleccionable (1,5 / 4,5 / 9 V), cable, bombilla (30 Ω), interruptor que se abre y cierra, resistencia con valor cambiable (10 a 1000 Ω) y sus bandas de colores pintadas, motor (60 Ω) con animación de giro y zumbador (120 Ω) con animación de vibración.

3. SIMULACIÓN EN SERIE con ley de Ohm: detecta el camino cerrado entre los polos de la pila con una búsqueda en anchura (BFS); suma las resistencias del camino; calcula I = V ÷ R total y la potencia de cada pieza (P = I² × R). El brillo de cada bombilla depende de su potencia, con aviso de peligro si se pasa (se fundiría) y de cortocircuito si el camino no tiene resistencia.

4. POLÍMETRO: una herramienta para tocar cualquier pieza y leer en una pantalla tipo LCD su resistencia, voltaje, corriente y potencia, más los totales del circuito.

5. VISTA 3D del tablero construido con Three.js (cilindros, esferas y cajas; sin modelos externos), con la chispa recorriendo el camino cuando hay corriente y rotación arrastrando con el dedo o el ratón.

6. SEIS NIVELES guiados con objetivo, piezas limitadas, validación automática, pista y reinicio: encender una bombilla; añadir interruptor; dos bombillas en serie; arreglar un circuito roto; salvar una bombilla de una pila de 9 V usando una resistencia (ley de Ohm); reto libre de inventor.

7. LABORATORIO con tres juegos: ley de Ohm interactiva (deslizadores de V y R que calculan I y P al instante), lector del código de colores (resistencia con bandas aleatorias y 4 opciones de valor) y reto de potencia (conseguir una potencia objetivo eligiendo voltaje y resistencia).

8. SANDBOX libre con todas las piezas y botones Comprobar, Limpiar y Modo pista.

9. MASCOTA GUÍA dibujada en SVG por código (una chispa con cara) en una tarjeta flotante, que comente lo que pasa con mensajes amables: circuito abierto, cerrado, cortocircuito, demasiada potencia...

10. DISEÑO claro y responsive: fondo claro, azul tecnológico, amarillo/naranja para la energía, verde/turquesa para aciertos y rojo suave para errores. Colores como variables CSS y clases con un prefijo único para no chocar con otros estilos.

El código debe estar limpio, comentado y ser fácil de modificar para adaptar la herramienta a otras materias (ciclo del agua, cadenas alimentarias, rutas en mapas...).

💡 Adáptalo: Ciclo del agua💡 Adáptalo: Cadenas alimentarias💡 Adáptalo: Rutas en mapas💡 Adáptalo: Fracciones💡 Adáptalo: Sujeto y predicado

Chispi dice:

¡Hola! Soy Chispi ⚡ y te acompaño mientras aprendes circuitos. Empieza por la teoría o lánzate directo al tutorial. ¡Tú mandas!