Jeu Simon Says - Portfolio

Presentation

Objectif principal : Recreer le jeu Simon, celui avec les 4 boutons de couleur qui s'allument et font un son. Faut memoriser la sequence et la reproduire. Plus on avance, plus c'est long.

Technologies utilisees : HTML, CSS avec des animations, JavaScript pour la logique, et Web Audio API pour les sons. Chaque couleur a une note differente comme le vrai jeu.

Fonctionnalites cles : Les boutons s'allument avec un effet lumineux CSS, chaque couleur joue une note, la sequence s'allonge a chaque tour, et y'a un mode strict ou t'as pas le droit a l'erreur.

Livrables attendus : Une page web avec le jeu qui ressemble au vrai Simon. Jouable sur ordi et sur telephone avec le tactile.

Calendrier previsionnel : 3 jours de dev. J'ai passe du temps sur les animations CSS pour que l'effet "allume" soit joli.

Parties prenantes & criteres de succes : Projet perso pour pratiquer les animations CSS et l'audio. Le but c'etait que ce soit satisfaisant visuellement et sonore.

Le Defi

Synchroniser les animations avec le son, c'etait pas evident. Si le bouton s'allume avant ou apres le son, ca fait bizarre. Et aussi empecher le joueur de cliquer pendant que la sequence se joue.

La Solution

J'utilise des Promises pour chainer l'affichage de la sequence. Chaque "flash" est une Promise qui resout apres 500ms. Pour le son, je le declenche en meme temps que j'ajoute la classe CSS d'animation. J'ai aussi un flag "isPlaying" qui bloque les clics pendant la demo.

Architecture Technique

Un tableau stocke la sequence de l'ordi, un autre stocke les clics du joueur. A chaque clic je compare avec la sequence attendue. Les sons sont des oscillateurs generes avec Web Audio API, chaque couleur a une frequence differente (Mi, Do#, La, Mi grave).

Points Cles

Animations CSS fluides avec glow effect
Sons generes via Web Audio API
Mode strict sans droit a l'erreur

Apercu

Resultats & Apprentissages

Le jeu est addictif, on veut toujours battre son score. J'ai bien progresse sur les animations CSS et j'ai decouvert Web Audio API qui permet de faire des sons sans fichiers mp3. Les Promises m'ont aussi bien aide pour gerer le sequencement.

Evolutions Futures

Ajouter un mode multijoueur ou chacun ajoute une couleur a la sequence. Sauvegarder les high scores en local. Peut-etre un mode avec plus de 4 couleurs pour les experts.