谷歌互动涂鸦

时间:2012-08-10 19:12:22

标签: javascript html5 google-doodle

有人知道Google Interactive Doodles for Olympics是如何运作的。 http://www.google.com/doodles/soccer-2012

我发现Div是hplogo 风格就在它上面,如:

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

我无法弄清楚分数的计算方式;如何移动对象等。它是一个可读的JS文件吗? 提前谢谢。

此致 同事开发者

2 个答案:

答案 0 :(得分:6)

您知道如何使用调试器查看页面源代码吗?在Google Chrome中,只需点击 F12 即可。打开调试器,您可以看到文件。您会注意到JavaScript file。您可以通过cleaning it up使其更具可读性,但它将是压缩变量名称。

答案 1 :(得分:6)

一些涂鸦使用Canvas来显示动画。使用javascript中的计时器绘制从加载的图像中获取的不同帧。

有些人使用CSS属性background-image。使用javascript计时器更改CSS属性background-position以创建动画。

动画使用更多javascript进行交互。

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