2012-08-10 22 views
6

Herkes, Olimpiyatlar için Google Interactive Doodles'ın nasıl çalıştığını biliyor mu? http://www.google.com/doodles/soccer-2012Google Etkileşimli Doodle

ben Div hplogo bulmak ve stil gibi, sağ üstündedir:

 #hplogo{background:url(/logos/2012/soccer12-hp.png).... 

Ben skor nasıl hesaplandığını bilemiyorum; Nesneler nasıl taşınır, vb. Okunabilir bir JS dosyası mı? Şimdiden teşekkürler. Saygılarımızla

,

+2

daha önemli bir soru: Kaç altın almak gerekiyor kaydeder? –

+0

Haha harika bir soru. Yapamadım :) –

+0

Benzer bir soruya cevabımı kontrol et [Nasıl Google Doodle'ın Doctor Who gibi HTML5 oyunları nasıl yapılır?] (Http://stackoverflow.com/questions/20136141/how-to-makehtml5- Oyunlar-like-google-doodles-doctor-who/20150126 # 20150126) – nmoliveira

cevap

6

Bazı karalamalar, animasyonları göstermek için Tuval'i kullanır. Yüklenen bir görüntüden alınan farklı kareler javascript'te bir zamanlayıcı kullanılarak çizilir.

Bazıları CSS özelliği background-image'u kullanır. Animasyon oluşturmak için CSS özelliği background-position, bir javascript timer kullanılarak değiştirilmiştir.

Animasyonlar daha fazla javascript kullanılarak interaktif hale getirilir.

örn: http://www.google.com/logos/2012/hurdles12-hp-sprite.png, http://www.google.com/logos/2012/basketball12-hp-anim.png

+0

Şaşırtıcısınız! XNA ile bazı deneyimlerim vardı ve resimlere herhangi bir güncelleme yapıp yapmadıklarını veya vücut parçalarını elle JS ile değiştirip değiştirmediklerini merak ediyordum. Çok teşekkür ederim! Bu çok yardımcı olur. –

+0

Rica ederim :). Google karalamalar gerçekten harika. Bu en iyi bence - http://www.google.com/logos/2011/lespaul.html. Tuval, diğer HTML elemanları ve Ses kullanır. – Diode

+0

Bu gerçekten harika bir woah :) Sesin böyle kullanılabileceğini bilmiyordum. Sağol, bugün düşündüğümden çok şey öğrendim. –

6

bir hata ayıklayıcı ile sayfa kaynak kodunu görüntülemek için biliyor musunuz Bir geliştiricinin? Google Chrome’da F12’u tıklamanız yeterlidir. Hata ayıklayıcısını açın ve dosyaları görebilirsiniz. Bir JavaScript file göreceksiniz. cleaning it up tarafından daha okunabilir hale getirebilirsiniz, ancak sıkıştırılmış değişken adları olacaktır.

+0

Teşekkürler, aradığım şey bu! –

+0

Harika bağlantı http://jsbeautifier.org/ :) – mtk

İlgili konular