Saklanmak için boyama temalı bir tarayıcı mini oyunu inşa etmek

Meccha Chameleon'dan esinlenerek bir tarayıcı oyunu geliştirdim. Bu oyunda, saklananlar vücutlarını duvarlara veya kasalara uyacak şekilde boyuyor. Arayanlar ise onları bulmaya çalışıyor.

Bu fikir etrafında iki araç geliştirdim.

  1. Camo Lab Bu araç, herhangi bir yüzey için size tam renkleri, desenleri ve pozları verir. Bukalemun için tek bir satır içi (inline) SVG kullandım. Renkler, yüzey paletine göre değişiyor.

SVG renklerini değişkenlerle değiştirmenin, görüntü oluşturmaktan daha kolay olduğunu fark ettim. Her yüzey küçük bir veri nesnesidir. Üç hex rengi, bir desen ve bir harmanlama puanı (blend score) içerir. Yeni bir yüzey eklemek sadece tek bir satır kod gerektiriyor.

  1. Mini Oyun Bu, oynanabilir bir karolardan oluşan bir ızgaradır (grid). Bazı karolar bir bukalemunu gizler. Süre bitmeden onları bulmak için karolara dokunursunuz. Bunu React state kullanarak inşa ettim. Bir canvas veya oyun motoru kullanmadım. Bu, dosya boyutunu küçük ve yükleme süresini hızlı tutuyor.

Teknoloji yığını:

Site, uç noktalarda (edge) statik sayfalar kullanır. Etkileşimli kısımlar istemci tarafında (client side) hydrate olur.

Araçları buradan deneyebilirsiniz: Camo Lab: [Link] Tarayıcı Oyunu: [Link]

SVG renklendirme veya OpenNext kurulumu hakkında bana sorular sorabilirsiniz.

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