UYGULAMA OYUN DETAYLARI Hafıza Kategorisi – Renkli Çember Oyunu

Oyun Gerçekleştiriminde Kullanılan Araçlar

react-native-svg: React Native ortamında svg görüntüleri oluşturmak için kullanılan kütüphanedir.

Bileşenlerine geçirilen data parametresi sayesinde verilen path (yol) bilgilerini görüntüye çevirmekte kullanılır. Genelde bu data bilgisini oluşturmak için d3.js adlı kütüphaneyle birlikte veri görselleştirme işlemlerinde kullanılır. (Community, React Native)

d3.js: Veri görselleştirme işlemleri için kullanılan web standartları uyumu gözeterek oluşturulmuş açık

kaynak kodlu bir JavaScript kütüphanesidir. (Community) d3 kütüphanesi iç açı, dış açı, kenar açısı, başlangıç ve bitiş açısı gibi sunduğu birçok fonksiyon ile veri görselleştirmeyi kolaylaştırmaktadır.

Oyun İçeriği

Temel olarak oyunun işleyişine değinecek olursak, oyun kullanıcının hafızasını geliştirmek ve sınamak için öncelikle 5 renkten oluşan bir çember sunar. Kullanıcı bu renk dizilimini aklında tutar ve sonrasında gelen birçok çember içinden ilk aşamada gösterilmiş olan dizilime sahip çemberi seçer.

Oyunun en temel bileşeni olan renkli çemberler kullanılan araçlar bölümünde bahsedilen 2 kütüphane kullanılarak oluşturulmaktadır. Verilen başlangıç ve bitiş açıları kullanılarak rastgele yerleştirilmiş 5 farklı renge sahip çemberler oluşturulur. Renkli çember örneği Şekil 3’de gösterilmiştir.

Şekil 3: Renkli Çember

Her çember sorusunda farklı renk dizilimleri sorulabilmesi için permütasyon kullanılıp 120 farklı renk dizilimi oluşturulmakta ve bu dizilimler rastgele olarak her soruya atanmaktadır.

Renkli Çember oyunu temel olarak birbirine bağlı 6 seviyeden oluşmaktadır. Yani kullanıcının bir sonraki seviyeyi açabilmesi için bulunduğu seviyeyi tamamlaması gerekmektedir. Bu özellik ile kullanıcının oyundaki devamlılığının ve oyuna olan merakının arttırılması hedeflenmiştir. Kullanıcının ilgili oyunda aktif olan seviyeleri turuncu ve henüz aktif olmayan seviyeleri ise gri renkle sunulmaktadır. İlgili arayüz Şekil 4’de gösterilmektedir.

74

Şekil 4: Renkli Çember Oyunu Seviyeleri

Oyun içerisindeki seviye ve zorluk detayları Şekil 5’de gösterildiği gibidir.

Şekil 5: Renkli Çember Seviye Zorlukları

Seviye İçinden Seçim Yapılacak Çember Sayısı İstenen Çember Gösterim Süresi (s) Toplu çember Gösterim Süresi (s) Dönüş Durumu Rastgele Dönüş 1 3 5 5 Hayır Hayır 2 6 5 8 Hayır Hayır 3 6 6 10 Evet Hayır 4 9 6 12 Evet Hayır 5 9 7 14 Evet Evet 6 12 7 16 Evet Evet

Şekil 5 üzerinde üçüncü seviyeden itibaren Dönüş Durumu adında bir özelliğin aktif hale geldiğini görüyoruz. Dönüş durumu, istenen çemberin ve toplu gösterilecek olan çemberlerin saat yönünde dönüp dönmeyeceğini ifade eden bir özelliktir. Dönüş durumunun evet olduğu durumlarda çemberler saat yönünde döner ve renklerin belirlenip hafızaya kazınma süreci zorlaşır.

Diğer bir özellik olan Rastgele Dönüş’ün beşinci seviyeden itibaren aktif hale geldiğini görüyoruz. Bu özelliğin evet olduğu durumlarda dönecek olan çemberler saat yönüne ya da saat yönünün tersine doğru rastgele bir şekilde dönerler. Kullanıcıdan yalnızca doğru renk kombinasyonun seçilmesi istenmekte ve dönüş yönü verilecek yanıtın doğruluk kriterini değiştirmemektedir. Örneğin istenen çemberde a-b-c-d- e renkleri saat yönüne dönerken gösterilip toplu gösterilen çemberler içerisinde bu renkler doğru şık olarak saat yönünün tersine dönerek gösterilebilmektedir. Kullanıcının bu durumda yön farklı olsa bile ilgili renkleri barındıran renkli çemberi seçmesi beklenmektedir.

Oyun akışını görsel bir anlatımla desteklemek gerekirse, öncelikle Şekil 6’da gösterilen süre kısıdına (İstenen Çember Gösterim Süresi(s)) sahip arayüz ile kullanıcıya istenen çember sunulur.

75

Şekil 6: İstenen Çember Gösterimi

Şekil 6’da görüldüğü üzere ilgili arayüz Geç butonu içermektedir. Bu buton kullanıcının verilen süreyi beklemeden seçeneklerin gösterildiği ekrana geçmesini sağlamaktadır. Bu özellik kullanıldığı takdirde kullanıcının oyun için harcadığı toplam sürenin hesaplanmasında kullanılmak üzere toplanan süre değişkenini olumlu yönde etkilemesine yardımcı olacaktır. Yani kullanıcı şekli kısa süre görerek oyun içinde harcadığı toplam süreyi azaltacaktır. Bu durum raporlarda analiz edildiğinde ise kullanıcının gelişimini ölçmekte kullanılacaktır.

Şekil 7’de ise kullanıcıya belirli sayıdaki çemberlerin (İçinden Seçim Yapılacak Çember Sayısı) içinden seçim yapılmak üzere belirli süre kısıdıyla (Toplu çember Gösterim Süresi (s)) sunulduğu ekran gösterilmiştir.

Şekil 7: Toplu Çember Gösterimi

Kullanıcı, Şekil 7’de gösterilen çemberlerden doğru olanı belirlenen süre kısıdı dolmadan seçmelidir. Verdiği doğru yanıtların sayısı ise ekranın en altında bulunan bilgi çubuğunda gösterilmektedir.

76

Kullanıcının doğru seçim yaptığı, yanlış seçim yaptığı ve hiç seçim yapmadı senaryoların hepsinde doğru ve yanlış olan çemberler soru sonunda Şekil 8’de gösterildiği gibi sunulmaktadır.

Şekil 8: Soru Yanıtları Gösterimi

Kullanıcı oyunu tamamladığında ise geçirdiği toplam süre ve verdiği doğru yanıtlar sonucu oluşan puanı Şekil 9’da gösterilen arayüz yardımıyla sunulmaktadır.

Şekil 9: Sonuç Ekranı

Kullanıcı 80 puanı aştığı durumda ise yeni seviyenin kilidi açılmaktadır. Dilerse var olan seviyelerde dilerse de yeni açılan seviyelerde oyun oynamaya devam edebilmektedir.

İnce Motor Becerileri Kategorisi – Antik Saat Oyunu

Oyun Gerçekleştiriminde Kullanılan Araçlar

Antik saat oyunu gerçekleştirilirken herhangi bir 3. parti kütüphaneden yararlanılmamıştır. React- Native’in kendi çekirdek bileşenleri ve API’ları olan View, Text ve Animated kullanılmıştır.

Oyun İçeriği

Oyunun temel işleyişine bakacak olursak, kullanıcıya bir saat değeri sunulur ve kullanıcı bu saat bilgisini aklında tutar. Bir sonraki ekranda akrep ve yelkovanı rastgele bir saat değerini gösteren saat kullanıcıya

77

gösterilir. Kullanıcının saat ve dakika butonlarını kullanarak akrep ve yelkovanı oynatıp ilgili saat değerini bu verilmiş analog saat üzerinde göstermesi beklenmektedir.

Oyunun en temel bileşeni olan saat kullanılan araçlar bölümünde bahsedilen çekirdek react-native bileşenleri kullanılarak oluşturulmuştur. Saat bileşeni saat yüzeyi ve el adı altında iki temel bileşenden oluşmaktadır. El adı verilen bileşen parametre olarak aldığı dereceye göre açısını değiştirecek ve saat ya da dakika gösterimini sağlayacaktır. Ayrıca bu bileşenin aldığı uzunluk parametresi ile akrep ve yelkovan gibi iki farklı uzunluğa sahip el yaratılabilmektedir. Saat yüzeyi ise sayı renkleri, arka plan rengi ve büyüklük gibi parametreler alarak akrep ve yelkovanın üstünde bulunacağı alanı yaratmaktadır.

Şekil 10: Antik Saat Oyunu Temel Bileşeni

Antik saat oyunu da Renkli Çember oyunu gibi 6 seviyeden oluşmakta ve bu seviyeler gene birbirine bağlıdır. Zorluk kriteri olarak gösterilecek saat değerleri seçilmiştir. Örneğin, ilk seviyede kullanıcıya yalnızca rastgele oluşturulmuş tam saatler sorulabilecekken ileriki seviyelerde bu saat değerleri buçuk ve çeyrek zaman aralıklarında uygulanacaktır. Antik Saat oyununa giriş ekranı Şekil 11’de gösterilmektedir.

Şekil 11: Antik Saat Oyunu Giriş Ekranı

78

Şekil 12: Antik Saat Seviye Zorlukları

Seviye Saat Aralığı Dakika Türü

İstenen Saat Gösterim Süresi (s) Saat Yapımı için Verilen Süre (s) 1 1 - 12 Tam Dakika 5 7 2 13 – 24 Tam Dakika 5 7 3 1-12 Tam ve Buçuklu Dakikalar 5 9 4 13-24 Tam ve Buçuklu Dakikalar 5 9

5 1-24 Tam, Buçuklu ve Çeyrek _{Süreli Dakikalar} 6 11

6 1-24 5’ in katı olan herhangi bir

dakika değeri 6 13

Antik Saat oyununun bir diğer amacı kullanıcıya analog saat düzenini ve işleyişini öğretmektir. Bu sebepten dolayı seviye zorlukları belirlenirken tam saatlerden başlanmış ve 5’in katı olan dakikalara kadar saat değerleri detaylandırılmıştır.

Oyun başlangıcında Saat Aralığı ve Dakika Türü kriterleri dikkate alınarak rastgele bir saat değeri üretilir. Üretilen bu saat değeri ekranda İstenen Saat Gösterim Süresi (s) kadar sunulmaktadır. İlgili ekran Şekil 13’de görülmektedir.

Şekil 13: İstenen Saat Değeri Gösterimi

Renkli Çember oyununda olduğu gibi “Antik Saat” oyununda da oyun içinde toplam harcanan süre bir sıralama değeri olarak kullanılacağı için, Şekil 11’de görülen sunum ekranında da bir “Geç” butonu yer almaktadır. Geç butonuna basıldığı ya da sürenin dolduğu durumda analog saat bileşenini içeren ekrana geçiş yapılır. Bu ekranda 5 adet buton bulunmaktadır. İki tanesi akrebi ileri – geri hareket ettirmek için, iki tanesi yelkovanı hareket ettirmek için ve 1 tanesi de saat değeri gösterildikten sonra süre arttırıp bir

79

diğer soruya geçmek için kullanılan “Tamamla” butonudur. Rastgele bir saat değerine sahip analog saat değerini içeren ekran Şekil 14’de gösterilmektedir.

Şekil 14: Analog Saat Sunum Ekranı

Kullanıcı saat değerini gösterip “Tamamla” butonuna bastığında ya da süresi dolduğunda saat üzerinde doğru saat değeri gösterilir ve bir sonraki soruya geçilir. Oyun sonuna gelindiğinde ise Şekil 9’de gösterilen ekran aracılığıyla kullanıcıya topladığı puanı ve oyunu tamamlama süresi gösterilmektedir.