Un jeu de mémoire comme prétexte technique
Simon (Milton Bradley, 1978) tient en une règle : la machine joue une séquence de couleurs qui s'allonge d'un pas à chaque manche, et vous devez la reproduire de mémoire. Chaque couleur s'illumine et chante. Derrière cette simplicité, deux sujets rarement traités proprement dans le navigateur : la synthèse audio et l'orchestration temporelle d'une machine qui joue puis écoute. Le tout sans moteur de jeu ni dépendance.
Un son synthétisé, pas un fichier
Aucun échantillon MP3 n'est chargé : chaque pad produit sa note à la volée avec
la Web Audio API. Un OscillatorNode génère une
onde à une fréquence propre au quadrant (de 220 à 415 Hz), reliée à la sortie
audio via un graphe de nœuds. Zéro octet de média à télécharger, une latence
nulle, et quatre timbres parfaitement distincts obtenus par le calcul plutôt
que par des enregistrements.
Une enveloppe d'amplitude pour éviter les clics
Démarrer et couper brutalement un oscillateur produit un « clic » désagréable :
la discontinuité du signal s'entend. Je façonne donc le volume dans le temps
avec un GainNode et une enveloppe d'amplitude — une
attaque de quelques millisecondes qui fait monter le son en douceur, un court
plateau, puis un relâchement progressif jusqu'au silence. Le résultat est une
note nette et musicale, sans artefact, exactement comme le fait un synthétiseur.
Une machine à états temporisée
Le jeu alterne deux rôles opposés : la machine qui joue la séquence,
puis le joueur qui la saisit. Je modélise cela par une machine à états
explicite (showing, input, over…) pilotée
par un ordonnanceur temporel : chaque illumination a une durée d'allumage et un
silence, mesurés sur l'horloge de requestAnimationFrame plutôt que
par des setTimeout empilés et fragiles. Pendant la lecture, les
clics sont ignorés ; la moindre erreur de reproduction met fin à la partie.
La contrainte du geste utilisateur, un détail qui compte
Les navigateurs interdisent de démarrer un son sans action explicite de
l'internaute, pour éviter les pages qui se mettent à jouer toutes seules. Je
crée donc l'AudioContext au premier clic ou premier appui
sur Espace, jamais avant. Ce genre de contrainte de plateforme, on la
découvre soit à la conception, soit en production quand le son reste muet chez
l'utilisateur. C'est précisément ce que j'apporte sur vos projets : anticiper
ces règles du web réel pour livrer des interfaces qui fonctionnent du premier
coup, partout.
