Bir Tweete Kanvas Kar Yerleştirme

Geçen yıl Noel’den önce, bu kar yağışı animasyonunu 257 baytta oluşturdum:

Bu sadece JavaScript kısmı değil, tüm kaynak ve Twitter’ın 280 karakterlik sınırına çok iyi uyuyor. 278 baytlık Flappy Bird’ümü henüz kontrol etmediyseniz, bu kar yağışını benzer bir şekilde açıklığa kavuşturacağım.

Kod

Daha iyi okunabilirlik için satır sonları, sekmeler ve boşluklar içeren kodun tamamı burada.

Tam ekran moduna girin Tam ekran modundan çıkın

Burada ihtiyacımız olan tüm HTML, bir açılış ve etiket. Başka hiçbir öğe gelmeyeceğinden kapanış etiketlerini atlayabiliriz. Sonuç olarak, 16 bayt tasarruf ediyoruz ( ve 9 için ).

JavaScript, değişken olarak öğe kimliklerini kullanmamıza izin verdiğinden, burada tuval için yalnızca C’yi kullandım. Bir değerin öznitelikleri tırnak işareti gerektirmese de, bunlara gövdenin yükü için hala ihtiyacımız var çünkü .getContext’te ‘2d’ (‘2d’) tırnak içinde bir değer olarak, tarayıcı ondan önceki ve sonraki her şeyi ayrı bir öznitelik olarak ele alacaktır. -değer çiftleri. O zaman bazı = ‘ler geçersiz HTML sözdizimi olur.

Bağlam, Ana Değişkenler ve Kar Tanesi Dizisi

c = C.getContext (‘2d’); Tam ekran moduna girin Tam ekran modundan çıkın

Daha önce de belirtildiği gibi, canvas ID’yi bir değişken gibi kullanabiliriz; document.getElementById (‘C’) veya document.querySelector (‘# C’) kullanmak masrafı artıracaktır.

R = Math.random; Tam ekran moduna girin Tam ekran modundan çıkın

Başlangıç ​​kar tanesi konumlarını rastgele hale getirmek için Math.random () ‘u birden fazla kullandığımız için, R işlevini atayabiliriz. O zaman R () kullanımı başına 10 bayt tasarruf etmiş oluruz!

H = 164; Tam ekran moduna girin Tam ekran modundan çıkın

H kanvasın yüksekliği (150) artı tabandan geçen yeterli boşluktur (14), böylece kar taneleri üste geri taşındığında, sihirli bir şekilde yok olmuş gibi görünmüyorlar.

F = []; f = 99; süre (f–) F[f] = {y: R () * H, s: R ()}; Tam ekran moduna girin Tam ekran modundan çıkın

SetInterval () öncesindeki son kod parçası, 99 kar tanesi ürettiğimiz ve bunların başlangıç ​​y konumlarını (y) ve hızları belirlediğimiz yerdir. Rastgele değerler için bayt tasarrufu sağlayan R () fonksiyonumuzu kullanıyoruz. F dizisini sağlamak için herhangi bir türden for döngüsü ve .push () kullanmak yerine, 99’dan başlayan bir sayaç ile bir while döngüsü ile daha az bayt kullanabiliriz. Daha sonra her bir kar tanesi nesnesini F kullanarak ekleyebiliriz.[f]=, F.push () ‘den 3 bayt daha ucuzdur.

Animasyon Döngüsü

setInterval (`c.fillRect (x = 0,0,300, H); for (f of F) {c.font = 28 * fs + ‘q a’; fy = fy% H + fs; c.fillText (‘* ‘, x, fy); x + = 3; c.fillStyle = x> 296?’ # 000 ‘:’ #fff ‘} `, 9) Tam ekran moduna gir Tam ekran modundan çık

Buradaki setInterval (), tüm mantık ve çizimin gerçekleştiği yerdir. Yine de güvenlik kaygıları nedeniyle bunu yapmayı önermesem de, tüm işlevi bir dizgi veya şablon hazır bilgisi olarak sağlayabilirsiniz.

c.fillRect (x = 0,0,300, H); for (f of F) {. . . } Tam ekran moduna girin Tam ekran modundan çıkın

İlk ifade için ekranı varsayılan olarak siyah doldururken, ilk kar tanesinin x konumu için x’i 0’a eşit olarak ayarladık. Keşfetmek üzere olduğumuz for … of döngü içeriklerinde, x, çok fazla bayt kullanmadan kar tanelerini yatay olarak yerleştirmek için kullanışlı olacak ve bunu daha sonra göreceğiz.

c.font = 28 * fs + ‘q a’; Tam ekran moduna girin Tam ekran modundan çıkın

For … of döngüsündeki ilk ifadede, maksimum 28q yazı tipi boyutu ayarladık. Normalde q birimini kullanmıyorum, ancak kod golfü için harika oluyor çünkü diğer her birim en azından bir karakter daha uzun. Daha sonra yazı tipi boyutunu kar tanesi hızıyla (fs) çarparak istediğimiz görsel derinliği elde edeceğiz. Kar tanesi ne kadar küçükse, o kadar uzak ve hareket halinde daha yavaş görünür. Bu arada, kodun tamamında daha önce gördüğünüz gibi yıldız işareti

kar tanesi olacak. Ardından, istenen şekli elde etmenin bir parçası olarak, tarayıcı varsayılanı olarak işlenecek tek harfli sahte yazı tipi ailesi olarak kullanabiliriz. Ancak 2 bayt daha tasarruf etmek için onu dışarıda bırakırsak, kar taneleri nokta olarak sarılır.

fy = fy% H + fs; Tam ekran moduna girin Tam ekran modundan çıkın

Bir sonraki ifade, her kar tanesini aşağı doğru hareket ettirir. Fy% H kullanarak, y değeri fs ekleyerek H’yi aştığında her bir kar tanesi 0-164 aralığında tutulacaktır.

c.fillText (‘*’, x, fy); x + = 3; Tam ekran moduna girin Tam ekran modundan çıkın

Gerekli pozisyona sahip olduktan sonra, kar tanesinin kendisini atıyoruz. Bundan sonra, varsayılan tuval genişliği olan 300’ü 99’a bölerek ve sonucu 3 olacak şekilde yuvarlayarak 99 kar tanesini mümkün olduğunca tuval boyunca eşit aralıklarla yerleştiririz. X’i artırmak için bunu kullanırız. Kar tanelerine kendi x özelliğini vermememizin nedeni, fx kullanırsak açıkça daha fazla baytın boşa gitmesidir. Bu, daha önceki .fillRect () içindeki x kullanımımızı açıklıyor.

c.fillStyle = x> 294? ‘# 000’: ‘#fff’ Tam ekran moduna gir Tam ekran modundan çık

Döngüdeki son ifade, dolguların ne zaman değiştirileceğini belirler. Son kar tanesi, x = 294 ((x artış 3) × (99 kar tanesi) – (x 3 artış)) konumunda olacağından, x nihayet ondan daha büyük olduğunda arka plan için dolgu siyahını ayarlayabiliriz.

setInterval (“…”, 9) Tam ekran moduna gir Tam ekran modundan çık

Son olarak, bayt kesme uğruna, 9 milisaniyelik tek basamaklı bir aralık rahat bir animasyon hızı belirler.

Sonuç

İşte karşınızda, yaklaşık çeyrek kilobaytlık bir kış sahnesi! Bunun anahtar kısımları şunlar olmuştur:

Yerleşik bir JavaScript işlevini birden fazla kullanılıyorsa Math.random’u tek bir harfe dönüştürmek Dizileri normalde nasıl doldurabileceğimizi değiştirme Bir desen onsuz belirlenebiliyorsa belirli bir özelliği kullanmama (x) Varsayılanları tolere etme