Haz que se mueva

En una pantalla nada se mueve nunca. Lo que pasa es que el computador borra todo y lo vuelve a dibujar un poquito más allá, unas 60 veces por segundo. Tu ojo se encarga del resto.

Exactamente como los dibujos animados: muchas imágenes fijas, una tras otra.

Ese ciclo se llama requestAnimationFrame: "cuando estés listo para el siguiente cuadro, llámame".

<canvas id="c" width="400" height="200"></canvas>

<script>
  const pincel = document.getElementById("c").getContext("2d");
  let x = 20;

  function cuadro() {
    pincel.clearRect(0, 0, 400, 200);   // borrar todo

    pincel.fillStyle = "#34a2fd";
    pincel.beginPath();
    pincel.arc(x, 100, 20, 0, Math.PI * 2);
    pincel.fill();

    x = x + 2;              // avanzar
    if (x > 420) x = -20;   // volver al inicio

    requestAnimationFrame(cuadro);   // otra vez
  }
  cuadro();
</script>

Rebotar suena complicado y son dos líneas. La pelota guarda su velocidad en vx y vy. Cuando toca un borde, esa velocidad se invierte: si iba hacia la derecha, ahora va a la izquierda.

Eso es todo. El signo menos es la física completa.

<canvas id="c" width="400" height="300"></canvas>

<script>
  const pincel = document.getElementById("c").getContext("2d");
  let x = 200, y = 60;
  let vx = 3.2, vy = 0;      // velocidad
  const gravedad = 0.25;
  const rebote = 0.86;       // cuánta energía conserva al botar
  const r = 18;

  function cuadro() {
    pincel.clearRect(0, 0, 400, 300);

    vy = vy + gravedad;      // la gravedad tira hacia abajo
    x += vx;
    y += vy;

    if (x < r || x > 400 - r) vx = -vx;          // paredes
    if (y > 300 - r) { y = 300 - r; vy = -vy * rebote; }   // piso

    pincel.beginPath();
    pincel.arc(x, y, r, 0, Math.PI * 2);
    pincel.fillStyle = "#8cfdfd";
    pincel.fill();

    requestAnimationFrame(cuadro);
  }
  cuadro();
</script>

Agrégale una paleta que sigas con el dedo y ya es un juego. En serio: esto es literalmente el motor de un pong.

Mueve el mouse o el dedo sobre el recuadro.

<canvas id="c" width="400" height="300"></canvas>

<script>
  const lienzo = document.getElementById("c");
  const pincel = lienzo.getContext("2d");
  let x = 200, y = 60, vx = 3, vy = 0, paleta = 200, puntos = 0;

  function mover(cx) {
    paleta = cx - lienzo.getBoundingClientRect().left;
  }
  lienzo.addEventListener("mousemove", e => mover(e.clientX));
  lienzo.addEventListener("touchmove", e => { e.preventDefault(); mover(e.touches[0].clientX); });

  function cuadro() {
    pincel.clearRect(0, 0, 400, 300);

    vy += 0.25; x += vx; y += vy;
    if (x < 14 || x > 386) vx = -vx;

    // ¿pegó en la paleta?
    if (y > 268 && Math.abs(x - paleta) < 45 && vy > 0) {
      vy = -8.5;
      vx += (x - paleta) * 0.06;   // efecto según dónde le pegue
      puntos++;
    }
    if (y > 340) { y = 60; x = 200; vy = 0; vx = 3; puntos = 0; }

    pincel.fillStyle = "#34a2fd";
    pincel.fillRect(paleta - 45, 278, 90, 10);

    pincel.beginPath();
    pincel.arc(x, y, 14, 0, Math.PI * 2);
    pincel.fillStyle = "#8cfdfd";
    pincel.fill();

    pincel.fillStyle = "#93a1bd";
    pincel.font = "bold 20px system-ui";
    pincel.fillText(puntos, 16, 30);

    requestAnimationFrame(cuadro);
  }
  cuadro();
</script>

El bucle de animación: borrar, calcular, dibujar, repetir. Todos los juegos que existen funcionan así, desde este pong hasta los de consola. La diferencia es cuántas cosas se calculan en cada vuelta.

Nuestro juego Swipong usa este mismo bucle. Solo que la paleta, en vez de seguir tu dedo, sigue tu mano de verdad.

Make it move