Prueba un juego web con botones grandes, pausa y dos orientaciones. Un taller para descubrir qué cambia cuando dejamos el teclado y usamos los dedos.
Parte de Crear en familia · Tutorial 06
En el ordenador tenemos flechas. En el móvil, dedos que además tapan un trocito de la pantalla. Un juego que se abre en ambos sitios todavía necesita una pregunta: ¿se puede manejar bien?
Hoy vamos a probarlo con una nave y diez meteoritos. Los botones ya están preparados. Nuestro trabajo será mover, parar, cambiar su tamaño y comprobar qué ocurre al girar la pantalla.
No hace falta venir de otra entrega ni escribir código. El juego completo está incluido.
Portada ilustrada. Representa la idea del taller; no es una fotografía de una prueba en dos teléfonos.
Captura del juego ejecutándose en Chrome, con pantalla y entrada táctil emuladas. No es una captura tomada en un móvil físico.
Abrir Meteoritos de bolsillo · Descargar el juego y la ficha de pruebas
La regla no cambia: deja pasar diez rocas sin chocar. Lo nuevo está en cómo lo manejamos: un toque mueve un carril, los botones pueden crecer y un giro de pantalla pausa la partida.
Taller para 10–14 años, con un adulto disponible y unos 20–30 minutos orientativos. Podemos empezar en un ordenador con navegador. Si la familia dispone de un móvil o tableta, la prueba física será una ampliación útil, no una compra necesaria.
El niño o la niña juega, decide qué botones resultan cómodos y anota lo que observa. El adulto abre el enlace o prepara el archivo, ayuda con las opciones del navegador y revisa cualquier traslado entre dispositivos.
El ejemplo descargado es un archivo HTML con su código y dibujo originales, bajo licencia MIT. No hay cuenta de jugador, chat, anuncios, compras ni llamadas de red desde ese archivo. No se utiliza un servicio de IA ni una cuota de generación. No hace falta tarjeta. Una conexión del dispositivo puede tener su coste habitual; el taller no contrata ninguna.
El enlace del juego permite abrirlo con un navegador de móvil cuando el artículo esté publicado. Antes de publicar, una dirección que empieza por 127.0.0.1 solo sirve en el equipo que la está mostrando. No la mandes al teléfono esperando que abra el mismo juego. El adulto puede preparar una vista de prueba en su red, pero aquí no se crea un servidor público ni se publica nada automáticamente.
Si tu móvil abre el HTML descargado como un documento sin ejecutar el juego, utiliza el enlace web del ejemplo cuando esté disponible, o realiza el taller en el ordenador. No todos los gestores de archivos móviles abren HTML del mismo modo. No hace falta quitar protecciones para seguir.
Pulsa Abrir Meteoritos de bolsillo. En ordenador también puedes descomprimir el ZIP y abrir index.html con el navegador.
Verás un tablero azul, una nave y dos botones: ← Izquierda y Derecha →.
Vista vertical emulada. En un teléfono, las barras del navegador pueden dejar menos espacio disponible.
Arriba están Jugar, Pausa y Reiniciar. Pausa aparece desactivado porque aún no hay partida.
Señálalo antes de jugar. No tenemos que esperar a un choque para encontrar cómo parar.
Pulsa Jugar. La nave comienza en el carril central y una roca baja desde arriba. Mira el carril de la roca.
En ordenador puedes seguir usando el teclado o el ratón. En un dispositivo táctil, toca los botones con un dedo.
Toca ← Izquierda una vez y levanta el dedo. La nave pasa al carril izquierdo. Toca Derecha → una vez: vuelve al centro.
En la prueba, el navegador recibió eventos de tipo touch. Un toque produjo un desplazamiento, sin salto doble.
Lleva la nave al extremo izquierdo y vuelve a tocar izquierda. Debe quedarse dentro del tablero. Haz la misma comprobación a la derecha.
No hace falta apretar más fuerte. Los botones no miden la fuerza del dedo.
Deja el dedo un momento sobre una flecha y suéltalo sin arrastrar. Este ejemplo no avanza continuamente por mantenerla pulsada: el movimiento se completa al activar el botón.
Si quieres otro carril, levanta y vuelve a tocar. En ordenador ocurre lo mismo con un clic. No hace falta deslizar el dedo por el tablero.
Pulsa Pausa. El botón cambia a Continuar y aparece un mensaje. La nave y el meteorito deben quedarse quietos.
Podemos pensar y cambiar opciones sin que el meteorito siga acercándose.
Debajo del juego, pulsa Ajusta los botones y tu nave. Si hace falta, desplázate hacia abajo. Al abrir esta sección durante una partida, el juego también se pausa.
Aparecen el tamaño de botones, el ritmo y el editor de píxeles. Hoy vamos a cambiar solo el primer ajuste.
En Tamaño de los botones, cambia Cómodos · 56 px por Extra grandes · 72 px.
Los números indican el alto mínimo en píxeles de la página, no milímetros del aparato. En algunos tamaños, el texto puede hacer que un botón ocupe más.
El tamaño se aplica al momento. No cambia la velocidad de las rocas.
Pulsa de nuevo Ajusta los botones y tu nave. Vuelve a los controles y pulsa Continuar.
Da dos toques separados. ¿Llegas mejor al botón? ¿Se ve la nave sin que la tape el dedo? Puedes volver al tamaño anterior; no hay una respuesta única para todas las manos y pantallas.
Con el dispositivo de pie, comprueba que los dos botones quedan debajo del tablero. No debe ser necesario desplazar la página hacia los lados.
Si estás en ordenador, estrecha la ventana para ver cómo se reorganiza. Eso comprueba el espacio, pero usar el ratón no se convierte por ello en una prueba táctil.
En un móvil o tableta, gira a horizontal. En la simulación, el adulto cambia las dimensiones. La partida debe quedar en pausa; el juego no obliga al dispositivo a girar ni cambia sus ajustes de orientación.
Si el teléfono tiene bloqueado el giro, seguirá vertical. El adulto puede revisar ese ajuste; jugar en vertical también sirve.
En una pantalla horizontal baja, las flechas se colocan a la derecha del tablero. Comprueba que ambas caben, que la nave sigue visible y que el texto Continuar es legible.
La captura horizontal del inicio muestra esta disposición. En pantallas grandes puede mantenerse otra distribución: el diseño responde al espacio disponible.
Pulsa Continuar cuando estés listo. El juego no debería reiniciarse solo al cambiar de tamaño.
Gira de nuevo y repite. Si la barra del navegador cambia el tamaño útil y provoca otra pausa, confirma que puedes continuar. Preferimos una pausa visible a una roca que cambie de posición mientras reorganizamos la pantalla.
En Chrome de escritorio, abre el menú de tres puntos → Más herramientas → Herramientas para desarrolladores. Pulsa el icono de teléfono y tableta (Toggle device toolbar). En la barra del simulador, elige Responsive y escribe 390 × 844.
Para emular también la entrada táctil, en el menú de esa barra busca Add device type / Añadir tipo de dispositivo, si no ves el selector, y elige Mobile. Recarga. Para horizontal, cambia a 844 × 390. Los nombres pueden variar con el idioma y versión del navegador. Guía oficial de Device Mode.
Esta preparación es del adulto; el niño puede volver al juego y a las flechas. La simulación ayuda a detectar botones que no caben, pero no reproduce el tacto, el rendimiento ni todas las barras de un aparato real. En esta entrega se probaron eventos táctiles con emulación automatizada de Chrome, no se capturó el panel de DevTools ni se probó un teléfono físico.
Esquiva las rocas hasta llegar a 10 / 10. Si chocas, pulsa Reiniciar y después Jugar. El contador debe empezar en cero.
Victoria alcanzada mediante pulsaciones táctiles emuladas. El resultado no se insertó ni se dibujó sobre la captura.
El descargable incluye FICHA-PRUEBAS.md. Puedes abrirla como texto o copiar estas preguntas en papel:
| Prueba | Qué observamos |
|---|---|
| Un toque | ¿Mueve exactamente un carril? |
| Borde | ¿La nave se queda dentro? |
| Pausa | ¿La roca se detiene? |
| Giro | ¿Se pausa y sigue siendo visible el juego? |
| Reinicio | ¿Vuelve a cero? |
Escribe si probaste ratón, tacto emulado o teléfono real. Basta con una observación concreta: «en horizontal veo las dos flechas». No necesitamos nombre, edad, foto ni datos del dispositivo de un menor.
Si abriste la cuadrícula y dibujaste algo, pulsa Guardar mi nave. Se descarga mi-nave.json. Para recuperarlo, Abrir mi nave permite seleccionar ese archivo.
El dibujo y el ritmo van en esa copia. El tamaño de botones no se guarda: al recargar vuelve a Cómodos. No hace falta adivinar qué conserva cada botón.
Guarda el ZIP original y tu ficha. Apunta una sola idea para otro día: cambiar las palabras de las flechas, buscar un sitio mejor para Pausa o comprobarlo en otro tamaño.
No necesitas añadir las tres mejoras ahora. La prueba ya sirve si has encontrado algo que funciona y algo que revisar.
El recorrido principal no necesita IA. Este prompt es una propuesta para un asistente que el adulto ya pueda utilizar según sus condiciones; no se ha enviado a un servicio ni se promete una cuota gratuita. El niño diseña y prueba, sin recibir una cuenta adulta.
Tengo una copia local de Meteoritos de bolsillo (index.html).
Quiero mejorar únicamente sus controles para pantallas estrechas.
Conserva el teclado y usa botones HTML: un toque debe mover un carril,
sin disparar dos veces por combinar touch y click. Mantén el zoom.
Los botones deben medir al menos 56 píxeles de alto y caber en
390x844 y 844x390. Al cambiar de orientación, pausa y espera a que
pulse Continuar. No añadas cuentas, rastreo, anuncios ni servicios.
Trabaja solo en una copia. Explica el cambio y comprueba movimiento,
bordes, pausa, giro y reinicio. Distingue emulación de móvil físico.
No instales herramientas ni publiques nada sin una nueva petición.El reto más pequeño: juega una partida con cada tamaño de botón y elige uno. Otro: compara vertical y horizontal. Si ya has abierto los archivos en T05, señala con el adulto dónde vive el texto de un botón, sin cambiar todavía sus reglas.
Probado el 28 de septiembre de 2026 en Chrome 153.0.8010.53, macOS, con entrada táctil emulada en una sesión aislada. Se verificaron un toque por carril, límites, pausa, tamaño de botones, giro con pausa, derrota, reinicio y victoria. Se revisaron anchos de 320, 390, 768 y 1280 píxeles y la disposición horizontal 844 × 390. El tiempo se aceleró durante las pruebas automáticas; no se alteró el estado para fingir la victoria.
No se ha probado un teléfono físico, Safari de iOS ni una familia real. La simulación es la ruta comprobada de esta entrega. La prueba física queda como ampliación y permite descubrir diferencias que un ordenador no muestra.
Fuentes consultadas: emulación de dispositivos en Chrome, eventos de puntero, comportamiento táctil de CSS y viewport sin bloquear el zoom. Estas tecnologías locales no requieren una cuenta de jugador; los servicios o aplicaciones ajenos conservan sus propias condiciones.
Código y dibujo de ejemplo: licencia MIT. Las seis capturas muestran el juego real ejecutado en navegador; la portada se identifica como ilustración.
Dibuja un personaje, muévelo con las flechas y recoge estrellas. Un primer juego con bloques para niños de 10–14 años y sus familias, sin cuenta ni consola.
Da vida a un robot con dos fotogramas en Microsoft MakeCode Arcade: duplica un dibujo, cambia los ojos y prueba tu primera animación en familia.
Construye una pared, comprueba que bloquea el paso y busca una llave que abre la puerta del laberinto. Mapas y colisiones con Microsoft MakeCode Arcade.