Tutorial Arcade · Vol. 2

Space Invaders con p5.js

Guía autocontenida basada en games/space-invaders.js. El tutorial explica el juego siguiendo su flujo real: registro, estado, reinicio, actualización, disparos, enemigos, colisiones, renderizado e integración con el launcher.

Introducción

Space Invaders usa una nave triangular en la parte inferior del canvas. El jugador se mueve en horizontal, dispara hacia arriba y destruye una formación de enemigos que avanza como grupo.

Este tutorial no reemplaza la página de código fuente. Cada capítulo extrae fragmentos reales del archivo del juego y los explica por comportamiento. Las demos visuales son representaciones aisladas: ayudan a ver una regla o efecto, aunque internamente puedan usar Canvas 2D para simplificar la demostración.

Cuando un fragmento omite líneas del código real, solo se explican las omisiones que agregan funcionalidad o un efecto observable.

Capítulo 01

Entrada de p5 y loop

Registro del módulo, objetos p/ctx, refresco por frames y función devuelta.

Capítulo 02

Canvas, estado y estrellas

Canvas, constantes, estado global y fondo estelar inicial.

Capítulo 03

Reset y enemigos

Reinicio de partida, creación de oleada, filas, columnas y tipos.

Capítulo 04

Movimiento del jugador

Entrada continua, posición horizontal y límites laterales.

Capítulo 05

Disparos

Disparo del jugador, disparos enemigos, temporizador y movimiento vertical.

Capítulo 06

Movimiento enemigo

Movimiento grupal, bordes, descenso, velocidad y nueva oleada.

Capítulo 07

Colisiones y efectos

Impactos, score, vidas, partículas, shake y derrota por invasión.

Capítulo 08

Render por capas

Fondo, estrellas móviles, escena con shake, entidades, partículas y HUD.

Capítulo 09

Overlays y estados

Pausa, game over, reinicio, activación externa y comunicación con el contenedor.

Capítulo 10

Loop final integrado

Orden definitivo: pausa, derrota, actualización y renderizado.