브라우저 숨바꼭질 페인팅 미니게임 만들기

Meccha Chameleon에서 영감을 받은 브라우저 게임을 만들었습니다. 이 게임에서 숨는 사람은 벽이나 상자와 색을 맞추기 위해 몸에 색을 칠하고, 찾는 사람은 그들을 찾아내야 합니다.

이 아이디어를 바탕으로 두 가지 도구를 만들었습니다.

  1. Camo Lab 이 도구는 어떤 표면에 대해서도 정확한 색상, 패턴, 포즈를 제공합니다. 카멜레온을 구현하기 위해 단일 인라인 SVG를 사용했습니다. 색상은 표면 팔레트에 따라 변경됩니다.

이미지를 생성하는 것보다 변수를 사용하여 SVG 색상을 변경하는 것이 더 쉽다는 것을 알게 되었습니다. 각 표면은 작은 데이터 객체입니다. 여기에는 세 가지 헥스(hex) 색상, 패턴, 그리고 블렌드 점수(blend score)가 포함됩니다. 새로운 표면을 추가하는 데는 단 한 줄의 코드만 필요합니다.

  1. 미니게임 플레이 가능한 타일 그리드 형태입니다. 일부 타일에는 카멜레온이 숨어 있습니다. 타이머가 종료되기 전에 타일을 탭하여 카멜레온을 찾아야 합니다. 이 게임은 React state를 사용하여 만들었습니다. canvas나 게임 엔진을 사용하지 않았습니다. 덕분에 파일 크기를 작게 유지하고 로딩 속도를 빠르게 할 수 있었습니다.

기술 스택:

이 사이트는 edge에서 정적 페이지를 사용합니다. 상호작용이 필요한 부분은 클라이언트 측에서 하이드레이션(hydrate)됩니다.

도구를 여기서 체험해 보세요: Camo Lab: [Link] 브라우저 게임: [Link]

SVG 색상 지정이나 OpenNext 설정에 대해 궁금한 점이 있다면 질문해 주세요.

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