Attrezzi che cadono

/* Attrezzi che cadono
   Gli attrezzi sono pillole HTML vere. Matter.js tiene un corpo per ognuna (un rettangolo con gli
   angoli arrotondati quanto metà dell'altezza) e a ogni fotogramma la pillola prende posizione e
   rotazione del suo corpo. Quando la cassetta entra nello schermo gli attrezzi cadono dall'alto uno
   dopo l'altro; si prendono col mouse o col dito, si trascinano e si lanciano. */

/* ---- valori da cambiare ---- */
const GRAVITA = 1.1;
const RIMBALZO = 0.3;       /* quanto rimbalzano (restitution) */
const ATTRITO = 0.4;
const RIGIDITA = 2.5;       /* moltiplica l'inerzia: più è alta, meno si capovolgono e restano leggibili */
const INTERVALLO = 90;      /* millisecondi fra un attrezzo e il successivo quando cadono */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const cassetta = document.querySelector('[data-cassetta]');
const scuoti = document.querySelector('.scuoti');
const elementi = [...document.querySelectorAll('.attrezzo')];

if (RIDOTTO || !window.Matter) {
  /* niente fisica: gli attrezzi stanno in fila, leggibili, e il pulsante non serve */
  document.documentElement.classList.add('ferma');
  scuoti.removeAttribute('data-autoclic');
} else {
  const { Engine, Bodies, Body, Composite, Constraint } = Matter;
  const motore = Engine.create();
  motore.gravity.y = GRAVITA;

Il codice di questa animazione è nell’accesso a vita.

L’anteprima resta libera: guardala, rallentala, provala sul telefono.