Física básica: velocidad, gravedad y rebote

Una bola que se mueve a velocidad constante es un dibujo animado. Una bola que CAE, acelera, golpea el suelo y rebota perdiendo fuerza es un objeto que tu cerebro cree real. La diferencia son tres ideas de física de secundaria, más simples de lo que parecen, y son las mismas que mueven personajes, proyectiles y partículas en cualquier juego.

Velocidad: pasos por fotograma

let x = 50, y = 50;    // posición
let vx = 3, vy = 2;    // velocidad: 3 px por fotograma en X, 2 en Y

function update() {
x += vx;             // cada fotograma, avanza un "paso"
y += vy;
}

Cambiar vx/vy cambia el rumbo: negativos van hacia arriba/izquierda, cero es quieto en ese eje. Toda la magia del movimiento sale de manipular estos dos números.

Gravedad: un empujón que se acumula

La gravedad no es una velocidad — es una ACELERACIÓN: no mueve el objeto, sino que aumenta su velocidad hacia abajo un poquito en cada fotograma. Por eso las cosas caen cada vez más rápido.

const gravedad = 0.4;   // el "empujón" por fotograma

function update() {
vy += gravedad;       // la velocidad vertical crece → caída acelerada
x += vx;
y += vy;
}

Rebote: invertir la velocidad al chocar

Cuando el objeto toca un borde, rebota invirtiendo su velocidad en ese eje: si iba hacia abajo (vy positivo), después del rebote va hacia arriba (vy negativo). Y como los rebotes reales pierden energía, multiplicamos por un factor menor que 1:

function update() {
vy += gravedad;
x += vx; y += vy;

// suelo: si la bola lo cruza, reubícala EN el borde e invierte vy
if (y + radio > canvas.height) {
  y = canvas.height - radio;   // no la dejes hundida en el suelo
  vy = vy * -0.75;             // rebota con 75% de la energía (pierde 25%)
}
// paredes laterales: invierte vx
if (x + radio > canvas.width || x - radio < 0) {
  vx = vx * -1;
}
}

Ese -0.75 es el factor de restitución: -1 sería un rebote perfecto (pelota de goma ideal, rebota para siempre), -0.5 una pelota más muerta (rebota poco). Y la línea y = canvas.height - radio es crucial: sin reubicar la bola justo EN el borde, puede quedar atrapada "temblando" dentro del suelo (el bug del sinking que enseguida diagnosticas).

La bola con vida

<canvas id="fisica" width="340" height="220"></canvas>

body { font-family: system-ui; padding: 16px; background: #f8fafc; }
canvas { background: linear-gradient(#e0f2fe, #f8fafc); border: 1px solid #e2e8f0; border-radius: 12px; }

const canvas = document.getElementById("fisica");
const ctx = canvas.getContext("2d");
const quieto = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

const radio = 16, gravedad = 0.45;
let x = 60, y = 30, vx = 2.4, vy = 0;

function dibujar() {
ctx.fillStyle = "#6d28d9";
ctx.beginPath();
ctx.arc(x, y, radio, 0, Math.PI * 2);
ctx.fill();
}

function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
vy += gravedad;
x += vx; y += vy;
if (y + radio > canvas.height) { y = canvas.height - radio; vy *= -0.78; }
if (x + radio > canvas.width || x - radio < 0) vx *= -1;
dibujar();
requestAnimationFrame(loop);
}

if (quieto) { y = canvas.height - radio; dibujar(); }
else requestAnimationFrame(loop);

Observa cómo la bola pierde altura en cada rebote hasta "asentarse": puro vy *= -0.78 acumulándose. Esas cuatro o cinco líneas de física son la base de proyectiles, saltos de personaje y partículas — todo el módulo se apoya aquí.

Mini-reto

Convierte la bola en una pelota que puedes "lanzar": dale un vx y un vy iniciales grandes y hacia arriba (vy negativo, ej. -12) y mira la parábola completa — sube frenándose, cae acelerando, rebota. Luego juega con el factor de restitución (-0.9 vs -0.4) y con la gravedad (0.2 vs 0.8) hasta que encuentres la sensación de una pelota de tenis y la de una de plastilina. Sentir cómo esos números CAMBIAN el "peso" es intuición de game designer.

Qué sigue

Tu bola obedece a la física, pero no a TI. La próxima lección conecta el teclado y el mouse al canvas: mover un objeto con las flechas, apuntar con el cursor, disparar con la barra. El momento en que la animación se convierte en algo JUGABLE.