Renderizado por capas

1. Fondo y estrellas móviles

El fondo no solo dibuja estrellas. También las desplaza y recicla. Esa parte sí produce un efecto visible, por eso debe explicarse.

p.background(10, 10, 26);
for (let s of stars) {
    p.fill(s.b); p.noStroke(); p.ellipse(s.x, s.y, s.s);
    s.y += 0.12;
    if (s.y > H) { s.y = 0; s.x = p.random(W); }
}

s.y += 0.12 baja cada estrella en cada frame. Cuando s.y supera la altura del canvas, la estrella vuelve a 0 y recibe una nueva x aleatoria.

2. Shake aislado de la escena

p.push();
if (shake > 0.5) p.translate(p.random(-shake, shake), p.random(-shake, shake));

Después de estas líneas se dibujan nave, balas, enemigos y partículas. El cierre con p.pop() restaura la transformación para que el HUD no tiemble.

p.pop();

3. Entidades y HUD

La nave usa vértices, los disparos usan rectángulos con halo, los enemigos vivos usan color por tipo, y las partículas reducen su alpha según life. El HUD se dibuja al final para quedar encima.

p.text('SCORE ' + score, 12, 10);
p.textAlign(p.CENTER, p.TOP); p.text('LV ' + level, W / 2, 10);
p.textAlign(p.RIGHT, p.TOP);
p.fill(255, 100, 100);
let h = ''; for (let i = 0; i < lives; i++) h += '♥ ';
p.text(h.trim(), W - 12, 10);