Javascript ile Mayın Tarlası Oyunu Yapımı

Bu sefer Windows içinde bir klasik haline gelen mayın tarlası oyunun basit bir kopyasını kodlayacağız. Direk sonucu görmek isterseniz yukarıdaki kod yazım videosunu izleyebilirsiniz. Kodlara da buradan erişebilirsiniz. Basit bir HTML dosyası ile başlıyoruz. Bir div elementi oluşturup mineSweeper id’sini veriyoruz. İçine de grid sınıflı bir div elementi ekliyoruz. CSS tarafında karmaşık bir durum yok. … Okumaya devam et Javascript ile Mayın Tarlası Oyunu Yapımı

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.

Okumaya devam et Javascript’te Bitwise Operatörleri Kullanarak Sudoku Çözme

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 … Okumaya devam et Twitter Profilindeki Balonları Görsel Kullanmadan Oluşturma

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 … Okumaya devam et Javascript ile Oyun Yapımı: Hafıza Oyunu

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 … Okumaya devam et Javascript ve CSS ile Analog Saat Yapımı

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ı … Okumaya devam et Görseller için Öncesi&Sonrası Karşılaştırma

Yarım Saatte Web Tabanlı TIC-TAC-TOE Oyunu Geliştirme

Yukarıda videosunu izleyebileceğiniz bu örneğin kodlarına da buradan erişebilirsiniz. Bu örneği, oyunun oynandığı alanı saran bir wrapper sınıfı verdiğimiz bir div içinde başlatıyoruz. Bu wrapper içine hamleleri göstermek için kullanacağımız 9 tane cell ve bilgi göstermek için kullanılacak 1 tane info sınıflı div ekliyoruz. wrapper elementimize 300px genişlik ve 5px iç boşluk padding veriyoruz ki … Okumaya devam et Yarım Saatte Web Tabanlı TIC-TAC-TOE Oyunu Geliştirme

HTML, CSS ve Javascript ile Matrix Wall Yapımı

 Yukarıda videosunu izleyebileceğiniz bu örneğin kodlarına da buradan erişebilirsiniz. Bu örnekte meşhur Matrix filminde kullanılan akan yeşil yazıları simüle etmeye çalışacağız. DOM olarak HTML tarafında bir element yazmadan tüm elementler javascript ile yönetilecek. Javascript tarafında kolon ve satır sayılarını hesapladık ve iç içe iki döngü ile elementlerimizi yerleştirmeye başladık. Burada kolon genişliğini 30px vererek … Okumaya devam et HTML, CSS ve Javascript ile Matrix Wall Yapımı

Popüler Bir Javascript İşe Alım Sorusu

Medium’da denk geldiğim bir yazıyı buraya aktaracağım bu sefer. Yazıda verilen bir kod parçasının Amazon ve Google gibi büyük firmaların işe alım süreçlerinde sorulduğu söyleniyor. Hemen koda bakalım;

Soru bu kodun konsola çıktısı nedir? Javascript’e aşina olmayan biri için ilk bakışta basit bir for döngüsü gibi durabilir. Ama setTimeout ve Javascript için Event Loop … Okumaya devam et Popüler Bir Javascript İşe Alım Sorusu

Javascript’te Promise Kullanımı

Promise tanımı ES6 ile Javascript dünyasına girdi, aslında daha önce bazı kütüphaneler ile kullanılabiliyordu artık bağımsız olarak kullanılabilir oldu. Javascript’in en meşhur özelliklerinden olan asenkron çalışma yapısına çok uygundur. Bir işlemin o an bitmesini beklemeden başarılı ya da başarısız bir sonuç için girilen fonksiyonları sonuca bağlamamızı sağlar. Event‘ler ile de yapabiliyorduk aslında bu tarz bloklama … Okumaya devam et Javascript’te Promise Kullanımı