-
Javascript’te Bitwise Operatörleri Kullanarak Sudoku Çözme
Bu projede basit sudoku bulmacaları için programatik bir çözüm üreteceğiz. Yukarıda kod yazım videosunu izleyebilir ve kodlara buradan erişebilirsiniz. Bitwise operatörler nedir nasıl kullanılır bunu biraz anlatayım önce. MDN dokümanlarında gayet açıklayıcı anlatılmış. Bu operatörler kullanıldığı elemanların ikilik tabanda değerleri ile uygun işlemi yaparak yeni bir değer döndürür. Birkaç küçük örnek verip devam edelim. //…
-
Javascript ile 2048 Oyunu Yapma
Bu yazımda, yukarıda kod yazım videosu olan 2048 oyununun çok basit bir versiyonunun yapımını anlatacağım. Projeye ait kodlara buradan ulaşabilirsiniz. Buradan da oyunu oynayabilirsiniz. Bu tarz küçük oyunlar yazılım pratiği olarak çok faydalı olduğunu düşünüyorum. 2048; İtalyan geliştirici Gabriele Cirulli tarafından oluşturulmuş ve çok popüler olmuş bir mobil oyundur. Amaç, 4×4 karelerden oluşan oyunda…
-
ZTYPE Klonu Kelime Yazma Oyunu Yapımı
Bu örnekte ZTYPE klonu bir oyun yapacağız. Yukarıda kod yazım videosunu izleyebilirisiniz, kodların bulunduğu github sayfasına is buradan. Her zamanki gibi index.html dosyamızla başlıyoruz. ws-wrapper sınıflı bir element oluşturup diğer bütün elementlerimizi bunun içine yerleştiriyoruz. hero sınıflı bir element ekranın merkezinde olacak ve kelimeler bu merkeze yaklaşmadan yazarak yok etmeye çalışacağız. score ID’li bir element…
-
Görsellere Büyüteç Efekti ile Yakınlaştırma
Bu örneğimizde de alışveriş sitelerinde çok kullanılan görsel üzerine imleç ile gelindiğinde yakınlaşma, detay gösterme özelliğini yapacağız. Yukarıda kod yazım videosunu izleyerek sonucu görebilirsiniz. Kodlar için de github linki burada. Küçük ve basit ama kullanışlı bir örnek olacak. Diğer projeler gibi buna da html dosyamız ile başlıyoruz. index.html dosyamızı oluşturuyoruz, css ve javascript dosyalarına gerekli…
-
Twitter Profilindeki Balonları Görsel Kullanmadan Oluşturma
Twitter doğum günü olan kullanıcıların profilinde rengarenk balonlar uçurur. Bu örneğimizde biz de görsel kullanmadan bu balonları hazırlayıp uçurmayı deneyeceğiz. Yukarıda kod yazım videosu olan bu örneğin kodlarına da buradan ulaşabilirsiniz. Her zamanki gibi bir index.html dosyası oluşturup içerisine CSS ve Javascript dosyalarımızı ekliyoruz. Gerekli DOM elementleri Javascript ile dinamik olarak eklenecek bu yüzden bir…
-
Javascript ile Oyun Yapımı: Hafıza Oyunu
Bu yazımızdaki örneğimiz de bir hafıza oyunu olacak. Yukarıda kod yazım videosunu izleyebilirisiniz. Kodlara da buradan erişebilirsiniz. Oyun 4×4 boyutunda bir ızgara üzerinde karelerden oluşuyor. Bu karelerin arka tarafında belrli semboller var ve kareye tıklayarak art arda aynı iki aynı sembol açıldığında geri kapanmıyor bu kareler. Ve hiç kapalı kare kalmadığında oyun bitiyor. Her zamanki…
-
Javascript ve CSS ile Analog Saat Yapımı
Yukarıda videosu izleyebileceğiniz bu örnek web geliştirmeye yeni başlayanlar için güzel bir pratik olacaktır. Örneğin kodlarına buradan erişebilirsiniz. Her zaman olduğu gibi HTML etiketleri ile başlıyoruz. frame sınıflı bir div ile bütün diğer etiketleri sarıyoruz. Bu div‘in içine üç göstergemiz için stick sınıflı ve göstergeyi belirten minute hour ve second sınıflı elementler ekliyoruz. Ayrıca saat…
-
Sadece CSS Kullanarak 3 Boyutlu Gösterge Çubuğu Yapmak
Güzel bir CSS/transform pratiği olan bu örneği yukarıdaki videoda izleyebilirsiniz. Kodlara da buradan erişebilirsiniz. Öncelikle HTML elementlerini yazalım. Her yüz için ayrı bir element ve sağ ve sol yüz hariç süreci gösteren birer çocuk element ekleyeceğiz. Öncelikle bar-wrapper sınıfında bir element oluşturuyoruz. Bu sınıfa perspective stilini vereceğiz ki bu CSS için 3 boyutlu çalışmalarda çok…
-
Görseller için Öncesi&Sonrası Karşılaştırma
Bu yazımda da yukarıda hızlı kod yazımı videosunu izleyebileceğiniz başka bir örnekten bahsedeceğim. İki görseli üst üste koyacağız ve en üste koyacağımız bir element ile bu görselleri birbiri ile karşılaştırabileceğiz. Örneğin kodlarına buradan ulaşabilirsiniz. Öncelikle HTML elementlerimizi yerleştiriyoruz. ba-wrap sınıfında bir div oluşturup diğer elementlerimizi bunun içine yerleştirelim. Bu div içine left ve right sınıflı…