ブラウザで遊べる「塗って隠れる」ミニゲームの制作

Meccha Chameleonにインスパイアされたブラウザゲームを制作しました。このゲームでは、隠れる側は壁や箱の色に合わせて自分の体を塗ります。探す側は、それらを見つけ出そうとします。

このアイデアをもとに、2つのツールを作成しました。

  1. Camo Lab このツールは、あらゆる表面に対して正確な色、パターン、ポーズを提供します。カメレオンには単一のインラインSVGを使用しました。色は表面のパレットに基づいて変化します。

画像を生成するよりも、変数を使ってSVGの色を変更する方が簡単だと分かりました。各表面は小さなデータオブジェクトになっており、3つの16進数カラーコード、パターン、ブレンドスコアが含まれています。新しい表面を追加するのも、わずか1行のコードで済みます。

  1. ミニゲーム タイル状のグリッドで遊べるゲームです。タイルの中にはカメレオンが隠れています。タイマーが終了する前に、タイルをタップしてカメレオンを見つけ出します。これはReactのstateを使用して構築しました。Canvasやゲームエンジンは使用していません。これにより、ファイルサイズを小さく抑え、ロード時間を高速化しています。

使用技術スタック:

このサイトはエッジで静的ページを使用しています。インタラクティブな部分はクライアントサイドでハイドレーションされます。

ツールはこちらから試せます: Camo Lab: [Link] ブラウザゲーム: [Link]

SVGの着色やOpenNextの設定について質問があれば、お気軽にどうぞ。

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