FlubberWorld
Glisse en blob gélatineux et repeins le sol avec les autres joueurs
Un petit monde multijoueur où chaque joueur incarne un Flubber, un blob gélatineux qui cligne des yeux. En se déplaçant, il laisse une traînée de peinture sur un sol noir et brillant. La grille de 80×80 cases est partagée en temps réel via Firebase : chaque case peinte est sauvegardée, la minimap montre tous les joueurs, et on choisit son point d'apparition sur une carte avant d'entrer. Le tout a été codé en une journée.
Ce qui brille
- Personnage procédural très expressif : le corps se déforme, les yeux suivent la direction et clignent, la bouche s'ouvre avec la vitesse, les tentacules traînent derrière, avec des bulles et une traînée gélatineuse
- Peinture persistante case par case (une clé Firebase par cellule, donc pas de doublons), affichée via une texture Canvas 2D sur un sol métallique qui la reflète
- Écran d'accueil soigné : choix de couleur, aperçu animé du blob, carte de spawn qui montre déjà la peinture existante
- Minimap cliquable pour se téléporter, nettoyage des joueurs fantômes après 8 s sans signal
- Caméra à la troisième personne avec pointer lock, et doubles joysticks tactiles sur mobile
Mode d'emploi
Choisis pseudo, couleur et point d'apparition, puis ZQSD pour avancer et peindre. La souris oriente la caméra, 1/2/3 change la taille du pinceau, un clic sur la minimap téléporte.
Fabriqué avec
- Three.js r128 (cdnjs)
- Firebase Realtime Database 10.12
- Canvas 2D (texture de peinture, carte de spawn, minimap)
- Pointer Lock API
- Touch events (deux joysticks virtuels)
- Google Fonts (Fredoka One, Nunito)