Canvas, estado y estrellas

1. Constantes y canvas

let W = 700, H = 480;
let shipW = 38, shipH = 18;
let bulletSpd = 7;

let cnv = p.createCanvas(W, H);
cnv.parent(ctx.container);
cnv.id('game-canvas');
cnv.tabIndex = 1;
p.textFont('monospace');

W y H definen el sistema de coordenadas. shipW y shipH se usan para dibujar la nave y calcular límites. bulletSpd es la velocidad vertical de los disparos del jugador. El canvas se inserta dentro de ctx.container, que es el contenedor preparado por la página de juegos.

2. Estado principal

let active = false;
let score = 0;
let lives = 3;
let level = 1;
let gameOver = false;
let player, bullets, enemyBullets, enemies, particles;
let enemyDir = 1;
let enemySpeed = 0.5;
let lastEnemyShot = 0;
let stars = [];
let shake = 0;

active controla si el juego avanza. gameOver corta la actualización cuando la partida terminó. Los arreglos guardan entidades activas. enemyDir y enemySpeed controlan la formación enemiga. lastEnemyShot guarda tiempo para disparos enemigos. shake mide la intensidad del temblor visual.

3. Estrellas iniciales

El fondo no usa una imagen. Se crean 100 objetos con posición, tamaño y brillo aleatorio.

for (let i = 0; i < 100; i++) {
    stars.push({ x: p.random(W), y: p.random(H), s: p.random(0.5, 2), b: p.random(60, 200) });
}

x e y ubican cada estrella. s define el tamaño. b funciona como brillo porque luego se usa en p.fill(s.b).