SPRITEBOX İLE JAVASCRIPT ÖĞRENİN!

Kodlamak için zıpla ve koş!

Spritebox, Süper Mario oyununa benzeyen eğlenceli bir kodlama oyunudur. Oyunun dili İngilizcedir. Fakat oyunu İngilizce bilginiz olmasa da oynayabilirsiniz. Ekrandaki görseller ve ipuçları oyunun mantığını ve kurallarını anlamanız için yeterli olacaktır.

SpriteBox maceralarınız sırasında; komutları sıralamayı, parametreleri değiştirmeyi, hatalı mantık hatalarını ayıklamayı ve sorunları çözmek için basit ve karmaşık döngüler kullanmayı öğreneceksiniz.

Oyunu isterseniz bilgisayardan isterseniz de telefonunuza ya da tabletinize indirerek oynayabilirsiniz.

Oyuna https://spritebox.com/flash.html adresinden ulaşabilirsiniz. Siteye girdiğinizde oyun açılmıyorsa bilgisayarınızda Flash Player yüklü değil demektir. Flash Player grafik ve web uygulamalarınızın çalışmasını sağlayan bir araçtır. https://get.adobe.com/tr/flashplayer/ adresinden “Flash Player’ı İndir” butonuna basarak oyunu kolaylıkla indirebilirsiniz.

Siteye ilk girdiğinizde karakterinizin ten rengini belirlemek için 3 tane seçenekten birini seçebilirsiniz. Oyunda isterseniz blok kodlama ya da metin kodlama yapabilirsiniz. Metin kodlamayı seçerek oyunu daha zorlu hale getirebilirsiniz. Fakat daha önce kodlama yapmadıysanız blok kodlamayı seçmeniz başlangıç seviyesi için daha uygun olacaktır.

Oyunda kullanılan programlama dili “JavaScript”tir. Oyunu tamamladığınızda JavaScript programlama dilini başlangıç seviyesinde öğrenmiş olacaksınız ve algoritmalar oluşturabileceksiniz.

SpriteBox kodlama oyunu, 4 bölümden oluşmaktadır. Bölümlerin zorluk seviyeleri her bölümde artacaktır.

Oyunda size eşlik edecek Spritebox adında bir de yardımcı karakteriniz olacak. Siz ana karakterinizi bayrağa ulaştırmaya çalışırken yolda bazı engellerle karşılaşacaksınız. Bu engelleri aşmanızda SpriteBox size yardımcı olacak ve bayrağa ulaşabileceksiniz.

Oyunu oynayabilmek için klavyedeki yön tuşlarını kullanmanız gerekmektedir.

Yukarı ok tuşu ile karakterinizin zıplamasını ve tırmanmasını sağlayabilirsiniz.

Sağ ve sol ok tuşları ile karakterinizi sağa ve sola hareket ettirebilirsiniz.

Şimdi ilk bölümü beraber inceleyelim!

Anasayfada ekrana gelen yeşil butona bastıktan sonra karşınıza bölümlerin olduğu kilitli kutucuklar gelecek. Her bölümü tamamladıktan sonra bir sonraki bölümün olduğu kutucuk açılacak. Birinci bölümü başlatmak için klavyedeki yön tuşlarından “yukarı ok” tuşunu kullanmanız yeterli olacaktır.

İşte oyunun ilk bölümü başladı bile “ileri ok” tuşuyla oyuna devam edebilirsiniz.

Devam ederken karşınıza çıkan yıldızları da toplamayı unutmayın bu size puan kazandıracaktır.

İlerledikçe 1. bölümde karşınıza toplam 5 tane engel çıkacaktır. Bu engelleri aşmak için karşınıza “Spritebox” kutucuğu çıkacak. Bu kutuya “yukarı ok” tuşuyla zıplayıp değdiğiniz zaman Spritebox karakteri size yardım etmek için hazır hale gelecektir.

Engelleri aşmak için kod yazarak Spritebox’ı yönetmelisiniz. İlk engelde oyunu daha iyi anlamanız için ilk kodlar sizin için hazır olarak verilmiştir. Bu kodlara baktığımızda Spritebox ilk olarak;
• Sağa doğru bir birim hareket edecek.
• Karakterinizin yukarıya rahat çıkması için 1 adet taş ekleyecek.
• Yukarı doğru bir birim hareket edecek.
• 1 adet taş daha ekleyecek.

Bu kodları yeşile basıp çalıştırabilirsiniz. Bu taşlara basarak yukarı rahatlıkla çıkabilirsiniz böylelikle ilk engeli aşmış olacaksınız. “sağ ok” tuşuyla ileri doğru devam edebilirsiniz.

İkinci engelle karşılaştığınızda ise size yardım etmek için bulunan Spritebox karakterinizi herhangi bir yöne ilerletmenize gerek yok. Sadece kırmızı ile belirtilmiş kısma bir taş eklemesini sağlamanız yeterli.
Bunun için;
• Fare yardımıyla alt kısımda bulunan “SET” yazısının üstüne gelin.
• Fare ile sürükleyip kodların olduğu bölüme bırakın.
• Yeşil butona basıp kodlarınızı çalıştırın.

Eğer ilerlediğinizde engeli rahatlıkla aşabiliyorsanız kodlarınız doğru demektir. Unutmayın ilerledikçe engellerin zorluğu artacaktır. Bölümü tamamlamak için ileriye doğru devam edebilirsiniz.

3. engelle karşılaştığımızda ise bu engelli aşabilmeniz için Spritebox’ınızı kırmızı ile belirtilen alandan 3 adım sağa hareket ettirmelisiniz ve ardından bir taş eklemesini sağlamalısınız. Sağa gitme komutu sizin için hazır halde ekrana gelecek, siz sadece bu komutların altına bir adet taş eklemelisiniz. Bu kısma kadar geldiyseniz artık taşı nasıl ekleyeceğinizi öğrenmişsiniz demektir.

Taşı ekleyip kodlarınızı çalıştırdıktan sonra ileriye doğru devam edebilirsiniz.

  1. engelimize geldiğimizde kodlar karışık bir biçimde karşımıza çıkmaktadır. Spritebox’ı uygun yere hareket ettirmek için kodları mantıksal olarak sıralamalısınız, Spritebox’ın nereye taş koyması gerektiğini belirlemelisiniz.

İlk olarak;
• Spritebox’ı kırmızı ile belirtilen alandan bir adım sola hareket ettirmelisiniz. Bunun için ilk sıraya fare yardımıyla “move(LEFT)” komutunu yerleştirin.
• Daha sonra SpriteBox’ı iki adım aşağı hareket ettirmelisiniz bunun için de “move(DOWN)” komutunu move(LEFT)’in altına sürükleyip bırakın.
• Artık taşı yerleştirebilirsiniz bunun için de en son kısma SET() komutunu yerleştirmeniz yeterli olacaktır.
• Yeşil butona basın ve kodlarınızı çalıştırın.

Bölümü tamamlamanıza az kaldı, ileri doğru hareket edebilirsiniz. Yıldızları toplamayı unutmayın.

  1. engele geldiğinizde karakterinizin yukarı çıkması için tekrar SpriteBox’tan yardım almanız gerekmektedir.

Kutucuğa doğru zıpladığınız zaman karşınıza tekrar bir kod ekranı gelecektir. Bu kısımda da kod ekranındaki kodları mantıksal bir şekilde sıralamanız gerekmektedir.

Burada Spritebox’ın bulunduğu kırmızı alandan iki adım sağa hareket etmelisiniz. Ardından iki adım da yukarı çıkmasını sağlamalısınız. Daha sonra geldiği konuma karakterin yukarı rahat çıkabilmesi için bir adet taş bırakmalısınız.

İlk olarak;
• İki adet bulunan Move(LEFT) komutu sürükleyip alt alta yerleştirin.
• Ardından yukarı doğru iki birim hareket etmek için Move(UP) komutlarını Move(LEFT)’in altına sürükleyip bırakın.
• Son olarak da Set() komutunu en alta sürükleyip bırakın.
• Kodlarınızı çalıştırmak için yeşil butona basın ve ileri doğru hareket edin.

Son SpriteBox kutusuna zıplayarak dokunduğunuzda karşınıza tekrar bir kod penceresi açılacaktır. Ekrana gelen kodlarda bazen şaşırtma olabilir, dikkatli olmalısınız. Burada herhangi bir taş eklemenize ya da herhangi bir kod kullanmanıza gerek yok o yüzden ekrandaki bütün kodları sola doğru sürükleyip silebilirsiniz. Buraya kadar geldiyseniz artık engel kalmadı demektir.
Karakterinizi yön tuşlarıyla ilerletin ve son olarak bayrağa ulaşın.

Bayrağa dokunduysanız 1. bölümü tamamladınız demektir! 🙂

1. bölümü tamamladıysanız daha zorlu ve macera dolu bölümler sizi bekliyor.

2. bölüme devam edebilirsiniz. 🙂

İyi eğlenceler 🙂

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir