Construindo um minijogo de navegador de "pintar para se esconder"
Eu construí um jogo de navegador inspirado em Meccha Chameleon. Nesse jogo, quem se esconde pinta o próprio corpo para combinar com paredes ou caixotes. Quem procura tenta encontrá-los.
Eu construí duas ferramentas em torno dessa ideia.
- O Camo Lab Esta ferramenta fornece cores, padrões e poses exatas para qualquer superfície. Usei um único SVG inline para o camaleão. As cores mudam com base na paleta da superfície.
Percebi que alterar as cores do SVG com variáveis é mais fácil do que gerar imagens. Cada superfície é um pequeno objeto de dados. Ele inclui três cores hexadecimais, um padrão e uma pontuação de mistura (blend score). Adicionar uma nova superfície requer apenas uma linha de código.
- O Minijogo Este é um grid de blocos jogável. Alguns blocos escondem um camaleão. Você toca nos blocos para encontrá-los antes que o tempo acabe. Construí isso usando o estado do React. Não utilizei canvas ou um motor de jogo (game engine). Isso mantém o tamanho do arquivo pequeno e o tempo de carregamento rápido.
A stack tecnológica:
- Next.js
- Cloudflare Workers via OpenNext
O site utiliza páginas estáticas na borda (edge). As partes interativas são hidratadas no lado do cliente (client side).
Experimente as ferramentas aqui: Camo Lab: [Link] Jogo de Navegador: [Link]
Faça-me perguntas sobre coloração de SVG ou sobre a configuração do OpenNext.
Fonte: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn