August 22, 2011 - Tagged as: javascript, tr.
Life.js, Javascript ile yazılmış basit bir Conway’s Game of Life oyunu(ya da adı her neyse işte).
Geçen hafta kurcalamaya başladığım Javascript ile dün yazdım. Amacım basit birkaç şey yazarak Javascript’i az da olsa anlayabilmekti. Grid’i çizdirmek ve hareketler için DOM ile, bir tablo çizdiriyorum ve tablodaki alanların arkaplan renklerini değiştiriyorum.
Aşağıdaki gibi, sayfanızın istediğiniz herine Game of Life gridi koyup, istediğiniz hücreleri canlandırabilirsiniz,
<div id="lifegrid" style="height: 300px;"></div>
<script src="life.js"></script>
<script>
var opts = {'height': 9,
'width': 22};
var life = new Life(opts);
life.revive(life.grid, 3, 4);
life.revive(life.grid, 4, 4);
life.revive(life.grid, 5, 4);
life.revive(life.grid, 6, 4);
life.revive(life.grid, 7, 4);
life.revive(life.grid, 8, 4);
life.revive(life.grid, 9, 4);
life.revive(life.grid, 10, 4);
life.revive(life.grid, 11, 4);
life.revive(life.grid, 12, 4);
life.drawTable(document.getElementById("lifegrid"));
life.run();
</script>Ya da rastgele oluşturulmuş bir oyun(yeniden oluşturmak için üstüne tıklayın):
<div id="lifegrid"></div>
<script>
var opts = {'height': 30,
'width': 30};
var life = new Life(opts);
life.fillRandom();
life.drawTable(document.getElementById("lifegrid"));
life.run();
</script>Henüz Javascript konusunda bir karara varamadım. Bir süre daha kurcalamaya devam edeceğim sanırım. Web programlama/tasarım olaylarından hiç hoşlanmayan biri olarak, Javascript’e başlama sebebim, neden sürekli farkı dillerden Javascript’e derleyicilerin yazıldığını(CoffeeScript, ClojureScript, Pyjamas, HaXe) ve Javascript içerisinde Linux veya Javascript PC emulator gibi uygulamaların nasıl ve neden yapıldığını, V8, Node.js tarayıcı eklentileri ve DOM gibi şeyleri az da olsa anlayabilmekti. DOM kısmı hariç henüz amacıma yaklaşamadım diyebilirim.
DOM kısmı işin en kolayı diyebilirim(ya da en azından başlangıç seviyesinde öyle gözüküyor). Daha önceden XML parse etmekle vs. uğraştıysanız muhtemelen yabancılık çekmeyeceksiniz. DOM öğrenmenin en eğlenceli yolu, bence, rastgele sayfaları açıp, resimler veya içeriği başka şeylerle değiştirmek, butonlar vb. şeyler eklemek. HTML konusunda iyi olmadığımdan çok fazla birşey yapamadım ama en azından Google logosu yerine lolcat veya osa1 logosu koymak güzel oluyor($('hplogo').style.cssText += "background-image: url(http://osa1.net/media/logo.png)" :)
Şurdan indirebilirsiniz. Javascript ile yazdığım ilk uygulamam olmasından ve öğrenmem + uygulamayı yazmamın toplam 4-5 akşam sürmesinden dolayı, kod iyi bir Javascript kodu sayılmaz muhtemelen. Tüm tarayıcılarda da çalışmayabilir(hatta içimden bir ses IE’de çalışmayacağını söylüyor nedense, test etme şansım yok), Firefox ve Chromium ile çalışıyor en azından. Onun dışında Javascript’de OOP konusunu hala tam olarak çözebilmiş değilim(prototype’lar hakkında kafama yatmayan birkaç şey, private methodların nasıl uygulanabileceği vs.). Onun dışında JSLint’de bir sürü uyarı veriyor ama henüz neden JSLint’i dinlemem gerektiğini bilmediğimden pek bir çaba sarfetmedim açıkçası.
Kaynak olarak ağırlıklı olarak Javascript: The Good Parts kullandım. Javascript gibi bir sürü ilk bakışta anlamsız gelen(ve çoğunun gerçekten anlamsız olduğu(inner fonksiyonlardaki this referansı, namespace problemleri, new keywordunun kullanımı vs.)) özelliklere sahip bir dili öğrenmek için mükemmel bir kitap(programlamaya yeni başlayanlar için değil). Onun dışında DOM ve eventlar hakkında Eloquent Javascript’e başvurdum. Bu aşamadan sonra sanırım Douglas Crockford’un Javascript videolarını izleyip, birkaç uygulama daha yazacağım. Daha sonra hoşuma giderse Javascript ile devam edebilirim.
Genel olarak programlama dilleri ve implementasyonları çok ilgimi çekiyor ve herhangi bir farklı özellik/yöntem için yeni bir programlama dili öğrenebilirim. Python ile başlayıp, dersler gereği Java, C, C++, daha sonra Common Lisp, Clojure ve şimdi de Javascript ile devam eden programlama dilleri maceram hakkında bir yazı yazıyorum. Eğer bitirip, sonuçtan memnun kalırsam herhande birkaç gün içinde ekleyeceğim.