Animació i mini-joc

Com es fa una animació

Una animació és una il·lusió òptica: si dibuixes la mateixa cosa en posicions una mica diferents, una rere l'altra, molt ràpidament, el cervell ho veu com a moviment. Les pel·lícules fan exactament això a 24 imatges per segon. Nosaltres en farem 60.

El cicle a cada frame és sempre el mateix:

1. Esborrar el canvas (eliminar el dibuix anterior).
2. Actualitzar l'estat (per exemple, sumar 1 a la posició X).
3. Dibuixar a la nova posició.
4. Programar el següent frame.

La peça clau és requestAnimationFrame, que demana al navegador que cridi una funció el més aviat possible, sincronitzat amb la pantalla (uns 60 cops per segon).

Un quadrat que es mou

Comencem amb una animació simple: un quadrat blau que travessa el canvas d'esquerra a dreta. Llegeix el codi amb atenció:

Hi ha dues coses noves importants:

L'estat va fora de la funció. La variable x es declara una sola vegada (a 0), igual que vam fer amb el comptador al capítol 10. A cada frame la incrementem una mica. Si la declaréssim dins de frame, sempre tornaria a començar.

La funció es crida a si mateixa. Al final de frame() demanem que es torni a cridar amb requestAnimationFrame(frame). Així s'autoperpetua, frame rere frame. Com amb addEventListener, passem la funció sense parèntesis — la donem perquè el navegador la cridi.

Velocitat: una altra variable

Si el moviment és x = x + 2, el 2 és la velocitat. Si la guardem en una variable, podem fer-la canviar i tenir efectes interessants. Mira una pilota que rebota contra les vores:

Quan la pilota toca una vora, invertim la velocitat (vx = -vx): si anava cap a la dreta, ara va cap a l'esquerra. És el truc clàssic per simular un rebot.

Controlar amb el teclat

Per fer un joc, necessitem que el jugador pugui interactuar. Combinem el que vam aprendre al capítol 10 (esdeveniments de teclat) amb l'animació:

Clica primer dins del canvas perquè rebi les pulsacions de teclat, i després prem ← i → per moure el quadrat.

Fixa't en la separació de responsabilitats:

• El callback del keydown només canvia la variable x.
• La funció frame només dibuixa el que indica x.

Les dues parts no es parlen directament — comuniquen a través de l'estat. Aquest patró és la base de tot el desenvolupament de jocs.

Detecció de col·lisió

Per a un joc, sovint cal saber si dues coses estan tocant-se. Per a rectangles, la manera més fàcil és comprovar si NO estan separats:

function colisiona(a, b) {
  return a.x < b.x + b.amp  &&
         a.x + a.amp > b.x   &&
         a.y < b.y + b.alt  &&
         a.y + a.alt > b.y;
}

La funció rep dos objectes amb x, y, amp (amplada) i alt (alçada), i retorna true si es toquen. La lògica és «cap dels dos està completament a un costat de l'altre».

Provem-la amb un simulador. Mou el quadrat blau amb les fletxes i mira com canvia el color quan toca el quadrat vermell:

El jugador es pinta de verd clar quan toca el quadrat vermell, i de blau quan estan separats.

El mini-joc final: Atrapa el quadrat

Ajuntem-ho tot. Aquest mini-joc combina:

• Canvas i dibuix
• Animació amb requestAnimationFrame
• Estat: posicions, puntuació
• Esdeveniments de teclat
• Detecció de col·lisió
• Funcions, objectes, condicions… tot el que has après

L'objectiu: mou el quadrat blau amb les fletxes i atrapa els quadrats vermells. Cada vegada que un quadrat vermell és atrapat, suma 1 punt i n'apareix un de nou en una posició aleatòria.

L'has fet ja? Aquest petit programa té unes 30 línies efectives. Cada part és senzilla en si mateixa, però quan les poses juntes formen un joc real.

Ara modifica'l! El simulador deixa que editis el codi. Algunes idees:

• Canvia els colors del jugador i de l'objectiu.
• Fes que el quadrat blau es pugui sortir del canvas pel costat i tornar a entrar per l'altre (en comptes de quedar-se travat).
• Afegeix un comptador de temps que descompti des de 30 segons.
• Fes que els objectius es moguin per ells sols.

🎉 Has acabat el curs!

Has recorregut un camí llarg. Has après:

• Variables, tipus, operacions, decisions, bucles, arrays, objectes, funcions.
• Manipular el DOM: trobar elements, canviar text i estil.
• Reaccionar a esdeveniments del ratolí, teclat, formularis.
• Dibuixar al canvas i fer-ho moure amb animacions.
• Detectar col·lisions i construir un mini-joc.

Això són els fonaments. A partir d'aquí, tot el que vegis a internet sobre JavaScript construeix sobre aquesta base. Promeses, async/await, classes, frameworks com React o Vue, Node.js per servidors… tot són capes addicionals sobre el que ja saps.

🎓 Si has superat l'exercici de tots els capítols, a l'índex del curs tens el teu certificat de JSCat. I després, comença un projecte propi: la millor manera de millorar és construir coses.

Felicitats! 🚀