Budowanie przeglądarkowej minigry typu „pomaluj, aby się ukryć”

Stworzyłem grę przeglądarkową inspirowaną Meccha Chameleon. W tej grze osoby chowające się malują swoje ciała tak, aby pasowały do ścian lub skrzyń. Poszukiwacze próbują ich odnaleźć.

Stworzyłem dwa narzędzia oparte na tym pomyśle.

  1. Camo Lab To narzędzie podaje dokładne kolory, wzory i pozy dla każdej powierzchni. Do kameleona użyłem pojedynczego inline SVG. Kolory zmieniają się w zależności od palety danej powierzchni.

Odkryłem, że zmiana kolorów SVG za pomocą zmiennych jest łatwiejsza niż generowanie obrazów. Każda powierzchnia to mały obiekt danych. Zawiera on trzy kolory hex, wzór oraz współczynnik mieszania (blend score). Dodanie nowej powierzchni zajmuje jedną linię kodu.

  1. Minigra Jest to grywalna siatka kafli. Niektóre kafle skrywają kameleona. Klikasz w kafle, aby go odnaleźć, zanim skończy się czas. Zbudowałem to przy użyciu stanu React. Nie użyłem canvas ani silnika gry. Dzięki temu rozmiar pliku jest mały, a czas ładowania szybki.

Stos technologiczny:

Strona korzysta ze statycznych stron na brzegu sieci (at the edge). Części interaktywne są hydratowane po stronie klienta.

Wypróbuj narzędzia tutaj: Camo Lab: [Link] Gra przeglądarkowa: [Link]

Zadawaj pytania dotyczące kolorowania SVG lub konfiguracji OpenNext.

Źródło: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn