240 tarayıcı sekmesinde çalışan Pong

240 tarayıcı sekmesinde Pong çalıştırmak

• Kullanılmayan sekmelerden yararlanma: 240 tarayıcı sekmesi 8x30'luk bir ızgara halinde düzenlenerek Pong oyunu çalıştırılıyor. Top ve raketler, ön plandaki pencerenin canvas'ı ile tüm sekmeler arasında akıcı biçimde hareket edebiliyor.

İlham

• Flappy Favi: Arkadaşım Tru'nun favicon'da çalışan bir Flappy Bird sürümü yapmasından ilham alındı. Favicon küçük olduğu için görmenin zor olması sorununu iyileştirmek amacıyla görüntüyü birden çok sekmeye çizme fikri ortaya çıktı.

Prototipleme

• Sekme ızgarası oluşturma: AppleScript kullanılarak 8 Chrome penceresinin her birinde 30 sekme açılıyor ve pencereler uygun şekilde yerleştirilerek büyük bir ızgara oluşturuluyor. Betik, Chrome'un kapanmış sekmeleri yeniden açma özelliğinin yarattığı sorunu çözmek için başlangıçta bunları temizliyor.

Hızlı favicon güncellemesi

• Favicon güncelleme: HTML'nin head öğesinde favicon konumu belirtilerek tarayıcının simgeyi değiştirmesi sağlanıyor. Chrome, simgeyi saniyede yaklaşık 4 kez güncelleyebiliyor. Arka plan sekmelerinde setInterval döngüsü saniyede yalnızca bir kez çalışıyor.

• Web Worker kullanımı: Zamanlayıcının ana belgeye mesaj göndermesi için Web Worker kullanılarak bunun arka plan sekmelerinde de akıcı çalışması sağlanıyor.

Sekmeler arası iletişim

• Sekme konumunu bilme: AppleScript kodunda mevcut pencere ve sekme indeksi sorgu parametresi olarak iletilerek her sekmenin kendi konumunu bilmesi sağlanıyor.

• Broadcast Channel kullanımı: WebSocket yerine Broadcast Channel kullanılarak aynı alan adındaki diğer sekmelere bilgi dağıtılıyor. Ana sekme, tüm arka plan sekmelerinin kayıt olaylarını aldıktan sonra animasyonu çalıştırıyor.

Canvas'tan sekme çubuğuna

• Canvas ile sekme çubuğunu bağlama: Ön plandaki pencerede çizilen şekillerin sekme çubuğuna geçmesi sağlanıyor. Hassas ölçümlerle canvas ve favicon hizalanıyor, şeklin konumuna göre favicon'a ve ana canvas'a çizim yapılıyor.

Hız artırma

• Kaynak kullanımını optimize etme: Her karede favicon'u güncellemek yerine yalnızca değişiklik olduğunda güncelleyerek performans iyileştiriliyor.

Ne yapılmalı?

• Oyun fikri: Önce Snake yapılmak istendi, ancak Pong'un canvas ile sekme çubuğu arasında geçiş yapan etkisinin daha iyi olacağı düşünülerek Pong seçildi.

Pong'un uygulanması

• Pong oyununun uygulanması: Bilgisayar oyuncusu, raketin merkezini topun merkezine hizalayacak şekilde çalışıyor. Top raketten sekince açı, basit trigonometriyle hesaplanıyor. Topun ve raketlerin favicon'a akıcı biçimde geçiş etkisini vurgulamak için topa bir iz eklendi.

Kapanış

• Proje deneyimi: Bu proje Recurse Center'da geliştirilirken çok ilham verici bulundu. Recurse Center, programlama için bir yazar inzivası gibi bir yer ve buradaki deneyim projeye motivasyon sağladı.

[GN⁺]

Hacker News görüşleri

• Merhaba! Bunu ben yaptım. Bunun HN topluluğuna hitap edip etmeyeceğini merak ediyordum

  • Animasyon kullanıldığında nasıl görüneceği gerçekten ilginç olurdu (Firefox animasyonlu favicon destekliyor) - örneğin topun gelecekteki konumunu tahmin edip animasyonlu SVG oluşturarak çok daha iyi kare hızı elde edebilirsiniz
  • Bir arkadaşım, canvas rasterization işleminin offline durumda (genel olarak) GPU'da yapıldığına dikkat çekti, bu yüzden animasyonumun takılmasıyla ilgili performans sezgim yanlış olabilir
  • Chrome'un favicon güncellemelerini saniyede 4 kezle sınırladığından orta derecede eminim; favicon güncellemenin pek çok farklı yolu var, benim gözden kaçırdığım bir şey olabilir

• Nolen'in yakın tarihli Recurse konuşmasına katıldım, bu tamamen çılgın ama özünde eğlenceli ve harika oyunlar gerçekten çok çekici

  • Eski interneti hatırlatıyor, insanların sırf eğlencesine bir şeyler yaptığı zamanları
  • Dün gece Nolen'in paylaştıklarından ilham alıp sayfanın kaynak kodunu yazdıran çok eğlenceli bir tür quine yaptım; BEAM decompilation ve başka hileler kullandım
  • Keşke böyle şeyler üretmeye vaktim olsa; birilerinin bu şekilde bir şeyler yapıyor olduğunu bilmek yüzümde bir gülümseme oluşturuyor
  • Gülmek isterseniz, bu quine'ı elde eden çalışma burada: bağlantı

• Nolen'in yaptığı her şeyi seviyorum. Bana göre o, internetin eskiden olduğu hali hatırlatan tek amaçlı uygulama/site geliştirmede tatlı noktayı bulmuş gibi görünüyor

• Matthew Rayfield'ın sekme favicon'ları yerine URL çubuğunu kullandığı benzer bir denemesi: bağlantı

• Şunu hatırlatıyor:

  • "Show HN: Bu inanılmaz deneyi görüp basit bir sürümünü yaptım" (2023.11.25) bağlantı
  • "Three.js ve localStorage kullanarak birden fazla pencerede 3D sahne senkronizasyonu" (2023.11.27) bağlantı

• Sıradaki şeyin Doom olacağını söylüyorum

• Keyifli derecede saçma, A+ efor

• "Ok Go" grubunun Google Chrome ile birlikte yaptığı, tarayıcı pencereleriyle dansçıların inanılmaz senkronizasyonunu ve kaleydoskop benzeri efektleri içeren bir müzik videosu vardı... bu bana onu hatırlattı

• Birkaç gün içinde bir Doom portu çıkacak gibi görünüyor

• Gerçekten harika, Chrome'un ne kadar değiştirilebilir olabildiğini seviyorum; bu web socket kullanıyor gibi görünüyor ama sekmeler arası iletişim için uzantılar da kullanılabilir