Photo by Justice Thompson on Unsplash

JS OYUN SERISI

Resimdeki Karakteri Bul — (Mario)

Bu oyunda renk piksellerini metnin karmaşıklığına göre karıştıran bir oyun tasarladım.

Oyun hayatımızın her yerinde var. JS Oyun serisi içerisinde basit oyun mantıklarını anlatmaya devam ediyorum.

• Oyunun demosuna bu linkten ulaşabilirsiniz.
• Oyunun kaynak koduna bu linkten ulaşabilirsiniz

1. OYUN MANTIĞI

Uygulamada yapmanız gereken harflerin yerlerini değiştirerek resmin ve kelimenin düzelmesini sağlamak. Değişmesini istediğiniz harflerin üzerine bastığınızda ilk harf seçili hale gelir. Diğer seçtiğiniz harf ile yeri değişir. Yeni oluşan kelime , asıl kelimeye uzaklığına göre resim daha düzgün gözükmeye başlar.

En son tüm harfleri istenen pozisyona getirdiğimizde resim en düzgün halini alacaktır. Cevap MARIO :)

2. ALGORİTMA

[Kaynak Kodu]

Elimizde bir kelime olması lazım Örneğin orginalWord MARIO olsun. Renk paletimiz olması yani Pixel Resmimizde kullanacağımız Renk kodlarının tutulduğu renk paletimiz olması lazım cPalet. Bunun ile birlikte MARIO resminin pixel karşılıklarını tutan colorArray olması lazım. Bu MARIO resminin pixel pixel hangi renklerden oluştuğunu tutmaktadır.

Şimdi oyuncunun düzeltmesini istediğimiz kelimeyi sisteme gireceğiz currentWord: rimao. Birde elimizde maxComplexWord olarak en karmaşık harflerden oluşan kelimemiz mevcut.

Amacımız kullanıcının harflerin yerini değiştirerek oluşturduğu kelimenin asıl kelimeye olan uzaklığını bularak resmi karıştırmak. Bunun için Distance hesaplaması yapacağız. Levenshtein distance algoritmasını kullanarak kelimelerin birbirine uzaklıklarını tespit edebilirsiniz.

Levenshtein distance Algorithms

Maximum karışık duruma kelime sayımıza göre 4 dersek. Mevcut kelimenin uzaklığıda 4 ise kelime shuffleImage(1) geçirerek resmi maksimum şekilde karıştırmamız gerekir. Mevcut kelime düzeldikçe uzaklık azalacak örneğin 1 olduğunu varsayarsak shuffleImage(1/4) ile çağırarak resmin daha az karışmasını sağlayabileceğiz.

Ana Mantığı Çalıştıran Kod

Resim Pixellerini Karıştırma

Resmi istediğiniz düzeyde karıştırmak için mantığımız şu şekilde

• Asıl resmin bir kopyasını alıyoruz. Tüm karıştırma işlemlerini bunun üzerinde yapacağız.
• colorMap oluşturuyoruz. Hangi renk hangi adreste, bu renkten kaç tane var şeklinde

• Bundan sonra karışma miktarını hesaplamamız gerekiyor. Çünkü her renkten aynı sayıda yok Örneğin Sarı: 100 Beyazdan 20 varsa %25 oranında karıştıracaksak Sarı’dan 25 pixel’in yeri değişirken Beyazdan 4 pixel’in yeri değişecektir. Bulmamız gereken diğer şeyde hangi pixel adreslerinin karıştırılacağı. Ardaşık pixelleri karıştırmaktansa shuffle ederek rastgele pixelleri karıştırmak daha iyi bir çözüm sağlıyor.
• suffleCount: renk ile ilgili kaç tane pixel değiştirileceğini tutuyor. suffleAdress: karıştırılacak renk pixel adreslerini tutuyor.

Array’ı Shuffle eden kodda aşağıda. Ardaşık pixeller yerine adres pixellerini shuffle ederek iyice karıştırıyoruz.

Yukarıda shuffleCount ve shuffleAdress elde ettikten sonra bu map’tan changingObj array’i oluşturup bunu renk topluluklarının sayısı küçükten büyüğe olacak şekilde sort ediyoruz. Amacımız ilk önce küçük sayıdaki renklerin yerini değiştirmek olacak. Bu sayede daha fazla renk çeşidinin yerini değiştirebileceğiz.

• Ve bunlardan da hangi pixel nesneleri değişecekse bunlar için ChangingItem array’i oluşturup tüm değişecek pixelleri bu array içerisinde topluyoruz.

• Daha sonra işimiz değişecek renkleri bu changingItems havuzundan alarak diğer renk ile değiştirmek. Bunun için diğer ColorSpace’inden pixel adresi elde etmemiz gerekiyor. Bunun için yazdığımız metod getChangeItemFromOtherColorSpace

• getChangeItemFromOtherColorSpace metodunda 3 tane şeye dikkat etmemiz gerekiyor. Yerlerini değiştireceğimiz renklerin aynı olmaması. Yerleri değişen renklerin bir daha başka bir renkle yerinin değiştirilmemesi. Kendi rengi dışındaki otherSpace dediğimiz array’dan shuffle ederek pixelleri seçmek.

Uzun süredir farklı sektörlerde (Askeri, Telekomünikasyon, Devlet, Bankacılık, Sigortacılık, Tübitak, SaaS) yazılımlar geliştiriyorum. Bu süreçte Havelsan, Milsoft, T2, Cybersoft ve Thundra firmalarında yönetici ve yazılım mühendisi olarak çalıştım. Deneyimlerimi ve teknolojik bilgi birikimi mi olabildiğince OnurDayibasi.com adresinde toplamaya çalışıyorum. Tüm yazılarıma ve daha fazlasını bu site üzerinden erişebilirsiniz.