谷歌互动涂鸦

Question

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

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

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

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

真诚的,一位开发者

Answer 1

您知道如何使用调试器查看页面源代码吗？在谷歌浏览器中,点击即可F12.打开调试器,您可以看到文件.您会注意到一个JavaScript文件.您可以通过清理它使其更具可读性,但它将是压缩变量名称.

Answer 2

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

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

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

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