Juegos de portero: cómo Keeper simula la presión de reacción real

Quería hacer un juego de fútbol sobre lo más difícil de una atajada: ese breve instante entre leer el tiro y poner una parte del cuerpo en su camino.

Eso descartaba casi de inmediato los botones. Hacer clic a la izquierda o a la derecha puede dar el mismo resultado, pero no la sensación de reaccionar. Yo quería que miraras la carrera previa, leyeras el vuelo del balón, te estiraras, te inclinaras y te la jugaras. La cámara web tenía que ser el control, y la persona frente a ella, el portero.

Así nació Keeper. Es de esos juegos de portero que desde fuera parecen simples: ataja cuatro de seis tiros para superar un nivel. Por dentro, cada nivel cambia el problema de reacción: el tiro sale más rápido, el balón se curva más, el arco se ensancha, los tiros a las esquinas son más frecuentes y tu portero cubre menos espacio.

No pretendo decir que un juego de navegador recrea un partido profesional o reemplaza el entrenamiento de un portero. No lo hace. La idea es tomar las restricciones importantes de atajar de verdad y comprimirlas en un juego seguro y fácil de leer que puedes jugar frente a una cámara web.

Cómo es la presión de reacción de un portero de verdad

Un penal no es difícil porque el portero nunca haya visto moverse un balón, sino porque la información disponible y el tiempo para moverse llegan casi a la vez.

Un análisis revisado por pares de 88 penales encontró un tiempo medio de vuelo del balón de 525 milisegundos. Los investigadores vieron además que las manos de los porteros empezaban a separarse, en tiros altos y bajos, unos 245 milisegundos después del contacto con el balón, mientras que el movimiento a izquierda o derecha podía empezar con señales disponibles antes del contacto. Lee el estudio sobre cómo detectan los porteros la dirección y la altura del penal.

Esa diferencia marcó el diseño de Keeper. Un portero de verdad no reacciona solo cuando el balón ya se mueve: lee la carrera, la postura del cuerpo y el golpeo, y luego corrige esa decisión con el inicio del vuelo. Por eso el juego muestra a un futbolista que corre y arma la pierna antes del contacto. Una vez que sale el balón, la velocidad, la curva y el lugar al que va deciden cuánto tiempo te queda para corregir.

Keeper no es una prueba de tiempo de reacción validada. La latencia de la cámara, el tamaño de la pantalla, el de tu cuarto y el modelo de movimiento amplificado lo separan de una cancha. Pero los niveles altos se acercan a propósito a una ventana de presión parecida a la de los profesionales. El nivel 9 da 520 milisegundos de vuelo, casi igual a los 525 milisegundos de promedio de ese estudio. Del nivel 10 en adelante se llega al mínimo del juego, 500 milisegundos.

Primero, que la cámara funcione como un espejo

Keeper empieza pidiéndole al navegador una transmisión de video de la cámara frontal. El navegador controla el aviso de permiso con MediaDevices.getUserMedia(). Esta API exige un contexto seguro y el permiso explícito de la persona, así que la cámara no puede abrirse a escondidas.

Pido el video con una resolución ideal de 1280 por 720, sin audio y prefiriendo la cámara orientada al usuario. Luego el modelo de pose procesa los cuadros de video en el navegador. Keeper usa MediaPipe Pose Landmarker en modo video, con una sola pose y el modelo ligero, ejecutado en la GPU cuando se puede. La guía de Pose Landmarker para la web de Google explica el mismo flujo con cuadros de video.

Los puntos llegan en coordenadas de la cámara, así que invierto cada coordenada x antes de usarla. Si te mueves hacia tu derecha, el portero debe moverse hacia la derecha de la pantalla desde tu punto de vista. Sin ese espejo, un juego con cámara web se siente raro incluso antes del primer tiro.

Una pose todavía no es un portero

Un modelo de pose me dice dónde aparecen en el cuadro de la cámara tu cabeza, tus hombros, codos, muñecas, caderas, rodillas y tobillos. No me dice dónde encajan esos puntos dentro del arco.

Lo resuelvo tratando el arco como su propio sistema de coordenadas. El centro de tus caderas pasa a ser el centro móvil del portero. Cada otro punto se mide en relación con esas caderas, se escala según el ancho y el alto del arco y se coloca en la boca del arco.

Así, cuerpos distintos comparten un mismo espacio de juego. Una muñeca puede llegar hacia el ángulo superior sin importar que seas alto o bajo, o que estés cerca de la cámara o más lejos. El juego no copia píxeles de la cámara a la pantalla: traslada la forma de tu pose a la forma del arco.

Por qué la inclinación tiene que moverte más de lo que se ve en cámara

Una sala no es una cancha. La mayoría no puede lanzarse con seguridad a un salto completo, y yo no quería que el juego te animara a hacerlo.

En su lugar, Keeper mide el desplazamiento horizontal de las caderas desde tu posición de pie calibrada y lo amplifica a lo ancho del arco. Una inclinación intencionada se convierte en una lanzada. La posición de brazos y piernas sigue contando, pero ese desplazamiento amplificado de las caderas permite que todo el portero llegue a una esquina sin que tengas que tirarte al piso.

La posición base de pie se vuelve a centrar poco a poco entre tiro y tiro. Es importante porque, después de varias atajadas, la gente se va corriendo sin darse cuenta. Con un punto de calibración fijo, estar quieto acabaría pareciendo una inclinación permanente.

Antes de la primera cuenta regresiva, el juego comprueba que se vean la cabeza, los hombros y los dos brazos, y que estén más o menos quietos. Mantiene ese estado de listo un instante, en lugar de aceptar un solo cuadro afortunado. La pantalla de calibración no está aparte del diseño del juego: fija lo que la cámara necesita ver y te deja espacio para moverte.

Cómo todo el cuerpo se vuelve zona de atajada

La decisión técnica más importante fue que una atajada no dependiera solo de la muñeca. Los porteros de verdad detienen los tiros con las manos, los brazos, las piernas, el torso y, a veces, la cabeza. El sistema de colisiones tenía que reconocer toda la silueta.

Armo al portero con varias formas simples:

• El torso es un polígono relleno formado por los dos hombros y las dos caderas.
• Los brazos y las piernas son segmentos gruesos, tratados como cápsulas y no como huesos de un píxel.
• Las muñecas tienen zonas circulares de guante algo más grandes.
• La cabeza tiene su propia zona circular de atajada.

Cuando el balón llega a la línea de gol, el motor se hace una sola pregunta: ¿el balón se superpone con alguna de esas formas? En una extremidad, busco el punto más cercano del segmento y comparo esa distancia con el grosor de la extremidad más el radio del balón. En el torso, compruebo si el centro del balón cae dentro del polígono.

Los puntos con visibilidad por debajo de un umbral no cuentan para la atajada. Así, una muñeca adivinada o un tobillo oculto no crean un bloqueo invisible. El resultado es lo bastante permisivo para sentirse físico y lo bastante preciso para que tengas que moverte hacia el tiro.

Simular las señales antes de la reacción

Un juego de portero de fútbol justo necesita un tiro que se pueda leer. Si el balón aparece a toda velocidad sin ninguna pista, estás adivinando en vez de reaccionando.

Cada tiro empieza con una carrera corta. El futbolista se acerca al balón, la pierna de golpeo se carga y un anillo que se cierra marca el momento del golpe. Cuando el balón sale del botín, avanza hacia el arco acelerando. Además crece desde su tamaño lejano hasta el cercano, lo que da otra pista de profundidad.

El efecto usa un arco sinusoidal: la curva es cero cuando el balón sale del pie, crece a mitad del vuelo y vuelve a cero en el punto elegido. Así el balón se curva sin errar el destino que escogió el pateador.

Cuando atajas, el balón no desaparece: rebota unos instantes lejos del punto de contacto y la parte del cuerpo con la que lo paraste destella. Esa pequeña pausa hizo mucho más fácil entender la colisión, porque ves por qué se detuvo el tiro.

Los niveles altos simulan un problema de reacción más profesional

La forma obvia de hacer más difícil un juego de portero es subir la velocidad del balón. Intenté no depender solo de eso, porque la velocidad tiene un techo: pasado cierto punto, solo te quita la posibilidad de reaccionar.

Keeper cambia cinco variables conectadas a medida que suben los niveles:

1. El tiempo de vuelo baja, así que tienes menos tiempo para decidirte.
2. La curva lateral aumenta, así que la trayectoria inicial es menos directa.
3. El arco se ensancha, con más espacio que defender.
4. La cobertura de tu portero se reduce un poco, así que quedarte quieto protege menos arco.
5. El pateador apunta con más frecuencia a las esquinas.

En el primer nivel, el balón tarda cerca de un segundo en llegar. Esa cifra baja 0.06 segundos por nivel hasta tocar el suelo de medio segundo. A la vez, la curva y la probabilidad de esquina suben hacia topes fijos. El arco se ensancha poco a poco, sin saltos entre modos de dificultad arbitrarios.

Lo importante no es un número en particular, sino cómo trabajan juntas las variables. Los primeros niveles te enseñan la correspondencia. Los siguientes te piden sacar información de la carrera, seguir la curva, decidirte antes y aun así aprovechar todo el alcance de tu pose. Esa combinación se parece más a la presión de decisión de un portero con experiencia que hacer que el mismo tiro central vaya más rápido.

Las estadísticas por nivel muestran toda la progresión

Revisé el ajuste actual de producción directamente en la configuración del juego. Estos son los números que Keeper usa de verdad:

• Nivel 1: vuelo de 1.00 segundo, factor de curva del 5 por ciento, arco del 42 por ciento de ancho, probabilidad de esquina del 25 por ciento y alcance base del 102 por ciento.
• Nivel 4: vuelo de 0.82 segundos, factor de curva del 20 por ciento, arco del 54 por ciento de ancho, probabilidad de esquina del 43 por ciento y alcance base del 96 por ciento.
• Nivel 7: vuelo de 0.64 segundos, factor de curva del 35 por ciento, arco del 66 por ciento de ancho, probabilidad de esquina del 61 por ciento y alcance base del 90 por ciento.
• Nivel 9: vuelo de 0.52 segundos, factor de curva máximo del 45 por ciento, arco del 74 por ciento de ancho, probabilidad de esquina del 73 por ciento y alcance base mínimo del 88 por ciento.
• Nivel 12: vuelo de 0.50 segundos, factor de curva del 45 por ciento, arco del 86 por ciento de ancho, probabilidad de esquina del 90 por ciento y alcance base del 88 por ciento.

El factor de curva es un valor del espacio del juego, no una afirmación sobre los metros que se desvía un balón real. El ancho del arco y el alcance también son proporciones del arco en pantalla. Lo útil es comparar la progresión: entre el nivel 1 y el 12, el tiempo de vuelo se reduce a la mitad, el arco se vuelve más del doble de ancho, la probabilidad de esquina pasa de un tiro de cada cuatro a nueve de cada diez, y la cobertura al quedarte quieto se reduce.

Por eso las rondas finales se sienten como otra exigencia y no como el primer nivel con otro color. Desde el nivel 9, la ventana de reacción ya está en el mismo rango de medio segundo medido en tiros de penal profesionales, y además el tiro tiene más probabilidades de curvarse y terminar cerca de una esquina.

La meta de atajadas es una regla del juego, no una vara profesional

Cada nivel tiene seis tiros. Si atajas al menos el 60 por ciento, es decir, cuatro de seis, empieza el siguiente nivel. El puntaje es el número de niveles completos que superas.

Elegí un bloque fijo porque le da a cada nivel una pequeña historia. Siempre sabes cuál es la meta, en qué tiro vas y cuánto margen de error te queda. Si las cuatro atajadas necesarias se vuelven matemáticamente imposibles, la partida termina de inmediato en lugar de jugar tiros sin sentido.

Atajar cuatro de seis equivale a un 66.7 por ciento para superar un nivel. Eso no debe compararse con los porcentajes reales de atajadas en penales. Los tiros de Keeper, la escala del cuerpo y la distribución de objetivos están pensados para un juego de navegador que se pueda repetir, no para equivaler estadísticamente a la competición profesional. La referencia del mundo real está en la ventana de reacción y en la presión de decidir con lo que ves, no en el marcador.

Esta estructura también distingue la constancia de una atajada con suerte. Una sola atajada espectacular se siente genial, pero superar niveles exige decisiones y movimientos repetidos. Eso encaja mejor con un juego de portero online corto que con un flujo sin fin y sin ningún punto de control visible.

Separar el motor de la cámara

El motor central del juego no sabe nada de React, de la cámara web ni de los puntos de la pose. Se ocupa del pateador, la carrera, el vuelo del balón, la curva, los resultados de los tiros, las reglas de nivel y el puntaje. La página le pasa el tamaño del escenario y una función para comprobar atajadas.

Esa frontera permitió probar las reglas importantes sin encender una cámara. Puedo darle al motor una fuente aleatoria determinista, avanzar el tiempo, inspeccionar la trayectoria del balón y comprobar cuándo un nivel debe superarse o terminar. La geometría de la pose queda en un módulo aparte, donde se puede probar como geometría.

El ciclo del navegador usa requestAnimationFrame(). Calculo el tiempo transcurrido entre cuadros y se lo paso al motor, para que el balón no vaya más rápido solo porque una pantalla tenga una frecuencia de actualización mayor.

Lo que me enseñó hacer Keeper

Lo difícil no fue reconocer a una persona, sino decidir cómo debía ocupar esa persona un arco digital mientras el tiro se parecía cada vez más a una presión de reacción real.

El juego empezó a funcionar cuando dejé de ver los puntos de la pose como un control terminado. Son materia prima. El control sale de la calibración, el espejo, las coordenadas relativas, la inclinación amplificada, las comprobaciones de visibilidad y las formas de colisión. La sensación sale de una carrera que se lee bien, de un contacto visible y de una curva de dificultad que cambia el problema sin cambiar las reglas.

Eso es lo que me gusta de los juegos con cámara web: el sistema técnico es complicado, pero la instrucción para quien juega puede seguir siendo sencilla: lee la carrera, mira el tiro, estírate hacia el balón y ataja. Los primeros niveles te dan tiempo para aprender esa secuencia. Los más altos te piden hacerla en medio segundo.

Puedes jugar Keeper gratis en tu navegador. Para una visión rápida de la experiencia, lee mi guía complementaria sobre el juego de fútbol con realidad aumentada. Y si quieres ver cómo usé el mismo sistema de pose para correr en lugar de atajar, lee cómo hice Dino Survival.