Создание браузерной мини-игры «раскрасься, чтобы спрятаться»

Я создал браузерную игру, вдохновленную Meccha Chameleon. В этой игре те, кто прячется, раскрашивают свои тела под цвет стен или ящиков, а искатели пытаются их найти.

Вокруг этой идеи я разработал два инструмента.

  1. Camo Lab Этот инструмент предоставляет точные цвета, узоры и позы для любой поверхности. Для хамелеона я использовал один inline SVG. Цвета меняются в зависимости от палитры поверхности.

Я обнаружил, что менять цвета SVG с помощью переменных проще, чем генерировать изображения. Каждая поверхность представляет собой небольшой объект данных. Он включает три hex-цвета, узор и коэффициент смешивания (blend score). Добавление новой поверхности занимает всего одну строку кода.

  1. Мини-игра Это игровое поле из плиток. На некоторых плитках прячется хамелеон. Вам нужно нажимать на плитки, чтобы найти его, пока не истекло время. Я реализовал это с помощью React state. Я не использовал canvas или игровой движок. Это позволяет сохранить небольшой размер файла и обеспечить быструю загрузку.

Технологический стек:

Сайт использует статические страницы на edge-серверах. Интерактивные части гидратируются на стороне клиента.

Попробовать инструменты можно здесь: Camo Lab: [Link] Браузерная игра: [Link]

Задавайте мне вопросы о раскрашивании SVG или настройке OpenNext.

Источник: https://dev.to/hblai_filmlook/building-a-paint-to-hide-browser-minigame-with-nextjs-and-svg-18fn