Eğitici Mobilde oynanır

Oyun açılmazsa

Sayfayı yenileyip “Oyna” düğmesine yeniden bas.
Reklam engelleyici kullanıyorsan bu sitede duraklat.
Tarayıcını güncelle ya da başka bir tarayıcı dene.
Gizli sekmede çerezler kısıtlıysa normal bir sekmede aç.

Bunları dene

Flexbox Froggy

CSS flexbox yazarak kurbağaları nilüferlere taşı · tek kişilik

Thomas Park (Codepip)

Mobilde oynanır

Benzer oyunlar

Hakkında

Flexbox Froggy, tarayıcıda indirmeden oynanan eğitici bir oyundur.

Kod alanına CSS satırları yazıyor, gölün üzerindeki kurbağaların kendi renklerindeki nilüfer yapraklarına kayışını anında izliyorsun. Flexbox Froggy, web sayfası düzenlemede kullanılan flexbox özelliklerini öğreten bir kodlama bulmacası.

Her bölüm tek bir kavrama odaklanıyor. Başta justify-content ile kurbağaları yatayda hizalıyor, sonra align-items ile dikey konumu ayarlıyorsun. İlerledikçe flex-direction, order ve flex-wrap gibi özellikler devreye giriyor ve birden fazla satırı birlikte yazman gerekiyor. Soldaki açıklama ne istendiğini anlatıyor, vurgulanan kod kelimelerine tıklayınca değerlerin örneklerini görüyorsun. Doğru kodu yazdığında bütün kurbağalar yaprağına oturuyor ve Sonraki düğmesi yanıyor.

Toplam 24 bölüm var. Ayarlar menüsünden dili ve zorluk seviyesini değiştirebiliyor, renkleri ayırt etmekte zorlananlar için renk körlüğü modunu açabiliyorsun. Web tasarımına yeni başlayan ya da flexbox kurallarını pekiştirmek isteyen biri için yazdığın her satırın sonucunu görerek öğrenmeni sağlıyor.

İlgili rehber

Tüm rehberler

Sezon seçkisi7 dk okuma Ara tatilde ne yapılır? Evde açılacak 8 tarayıcı oyunu Kardeşle aynı bilgisayarda taktik maç, aileyle sırayla çözülen Solo Test ve mahjong, tek başına skor kovalanan 2048 ve Hextris: tatil haftası için kurulumsuz sekiz oyun.

Sık sorulan sorular

Flexbox Froggy'de kaç bölüm var?

Oyunda 24 bölüm bulunuyor. Her bölüm justify-content, align-items, flex-direction gibi bir flexbox özelliğini tanıtıyor; ilerledikçe birden fazla özelliği birlikte kullanman gereken düzenler geliyor.

Flexbox Froggy nasıl oynanır?

Soldaki açıklamayı okuyup kod alanına istenen CSS özelliklerini yazıyorsun. Yazdığın kod kurbağaları anında hareket ettiriyor; hepsi kendi rengindeki nilüfer yaprağına oturunca Sonraki düğmesi aktif oluyor.

Künye ve lisans

Geliştirici: Thomas Park (Codepip)
Lisans: MIT
Kaynak: github.com/thomaspark/flexboxfroggy
Atıf: Flexbox Froggy by Thomas Park (Codepip). Code MIT; frog and lily pad images by Thomas Park, licensed CC BY 3.0 (https://creativecommons.org/licenses/by/3.0/). Fonts PT Sans, Fredoka One, Source Code Pro under SIL OFL 1.1.

Oyun, lisans koşullarına uygun olarak barındırılmaktadır.

Puanlar ve yorumlar

İlk puanı sen ver

Ortalama, yeterli oy toplandığında burada görünür.

Bu oyunu puanla

İlk yorumu sen yaz

Bu oyunu oynadıysan ne düşündüğünü paylaş: zorluk, en sevdiğin bölüm, bir ipucu.

Yorumlar yüklenemedi.

Eğitici oyunlar

Tümü

Popüler oyunlar