Création d'un mini-jeu de navigateur de type « peindre pour se cacher »
J'ai conçu un jeu de navigateur inspiré de Meccha Chameleon. Dans ce jeu, les joueurs qui se cachent peignent leur corps pour s'accorder aux murs ou aux caisses. Les chercheurs tentent de les trouver.
J'ai développé deux outils autour de cette idée.
- Le Camo Lab Cet outil vous fournit les couleurs, les motifs et les poses exacts pour n'importe quelle surface. J'ai utilisé un seul SVG en ligne pour le caméléon. Les couleurs changent en fonction de la palette de la surface.
J'ai constaté que modifier les couleurs d'un SVG avec des variables est plus simple que de générer des images. Chaque surface est un petit objet de données. Il comprend trois couleurs hexadécimales, un motif et un score de mélange. Ajouter une nouvelle surface ne nécessite qu'une seule ligne de code.
- Le mini-jeu Il s'agit d'une grille de tuiles jouable. Certaines tuiles cachent un caméléon. Vous appuyez sur les tuiles pour les trouver avant la fin du compte à rebours. J'ai construit cela en utilisant l'état (state) de React. Je n'ai pas utilisé de canvas ni de moteur de jeu. Cela permet de garder une taille de fichier réduite et un temps de chargement rapide.
La pile technologique :
- Next.js
- Cloudflare Workers via OpenNext
Le site utilise des pages statiques à la périphérie (at the edge). Les parties interactives s'hydratent côté client.
Essayez les outils ici : Camo Lab : [Link] Jeu de navigateur : [Link]
Posez-moi des questions sur la coloration SVG ou la configuration d'OpenNext.
Source : https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn