javascript - 谷歌互动涂鸦

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

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

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

使用更多 javascript 使动画具有交互性。

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