Costruire un minigioco browser "pittura per nascondersi"

Ho creato un gioco per browser ispirato a Meccha Chameleon. In quel gioco, chi si nasconde dipinge il proprio corpo per mimetizzarsi con pareti o casse. Chi cerca deve provare a trovarli.

Ho sviluppato due strumenti basati su questa idea.

  1. Il Camo Lab Questo strumento fornisce colori, pattern e pose esatti per qualsiasi superficie. Ho utilizzato un singolo SVG inline per il camaleonte. I colori cambiano in base alla palette della superficie.

Ho scoperto che cambiare i colori degli SVG tramite variabili è più semplice che generare immagini. Ogni superficie è un piccolo oggetto dati. Include tre colori esadecimali, un pattern e un punteggio di fusione (blend score). Aggiungere una nuova superficie richiede una sola riga di codice.

  1. Il Minigioco Si tratta di una griglia di tasselli giocabile. Alcuni tasselli nascondono un camaleonte. Tocchi i tasselli per trovarli prima che il timer scada. L'ho costruito utilizzando lo stato di React. Non ho usato un canvas o un motore di gioco. Questo mantiene la dimensione del file ridotta e i tempi di caricamento rapidi.

Lo stack tecnologico:

Il sito utilizza pagine statiche all'edge. Le parti interattive vengono idratate sul lato client.

Prova gli strumenti qui: Camo Lab: [Link] Browser Game: [Link]

Fammi domande sulla colorazione degli SVG o sulla configurazione di OpenNext.

Fonte: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn