Come creare un animazione in JavaScript (2)

Partendo dall'animazione precedente, Come creare un animazione in JavaScript, è possibile riorganizzare un po' il codice per gestire più oggetti animati.

Per prima cosa definisco un array sprites per contenere tutti gli oggetti da animare:

JavaScriptCopia

const sprites = [];

poi creo una funzione per aggiungere gli sprite:

JavaScriptCopia

//e gestisco lo scpostamento sull'asse x (deltaX) e y (DeltaY)
function createSprites() {
  sprites.push({
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: 35,
    color: "red2",
    deltaX: 1,
    deltaY: 2,
  });

  sprites.push({
    x: 50,
    y: 50,
    radius: 15,
    color: "yellow",
    deltaX: 4,
    deltaY: 0,
  });
}

in questo caso ogni oggetto (sprite) ha le proprietà x, y e radius per rappresentare la posizione nel canvas e le dimensioni dell'oggetto. Una proprietà color che definisce il colore di riempimento e due proprietà deltaX e deltaY che specificano la velocità con cui si muoverà lo sprite.

Il passo successivo è aggiungere una funzione per animare gli sprites e aggiornare le coordinate x e y in funzione della velocità deltaX e deltaY:

JavaScriptCopia

function updatePosition() {
  sprites.forEach(sprite => {
    // per ogni oggetto calcolo la nuova posizione
    sprite.x += sprite.deltaX;
    sprite.y += sprite.deltaY;
  });
}

e un altra per disegnarli sul canvas

JavaScriptCopia

function draw() {
  ctx.beginPath();
  ctx.fillStyle = '#000';
  ctx.rect(0, 0, canvas.width, canvas.height);
  ctx.fill();
  //inizio l'animazione
  sprites.forEach(sprite => {
    //disegno gli oggetti nella nuova posizione
    ctx.beginPath();
    ctx.fillStyle = sprite.color;
    ctx.arc(sprite.x, sprite.y, sprite.radius, 0, 2 * Math.PI);
    ctx.fill();
  });
}

a questo punto non rimane che modificare la funzione animationLoop per richiamare updatePosition e draw:

JavaScriptCopia

function animationLoop() {
  updatePosition();
  draw();
  requestAnimationFrame(animationLoop);
}

ed infine inizializzare gli sprites e far partire l'animazione:

JavaScriptCopia

function init() {
  createSprites();
  animationLoop();
}
init();

Il risultato è l'animazione a inizio pagina con due palline, una gialla e una rossa che si muovono con differenti velocità.

• Come creare un animazione in JavaScript
• Come creare un animazione in JavaScript (2)
• Come creare un animazione in JavaScript (3)
• Come creare un animazione in JavaScript (4) - collisioni
• Come creare un animazione in JavaScript (5) - tastiera
• Come creare un animazione in JavaScript (6) - mouse
• Come creare un animazione in JavaScript (7) - immagini