2012-08-10 8 views
6

オリンピックのためのGoogle Interactive Doodlesの仕組みを知っている人はいませんか?私は事業部がhplogo で、同じようなスタイルは、右のそれを上回っていることがわかり http://www.google.com/doodles/soccer-2012Google Interactive Doodle

:私は、スコアを計算する方法を見つけ出すことはできません

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

。オブジェクトがどのように動かされるか等。読みやすいJSファイルですか? ありがとうございます。敬具

+2

もっと重要な質問:あなたは金を得るためにどのように多くの節約が必要なのですか? –

+0

ハハの大きな質問です。私はできませんでした:) –

+0

似たような質問への私の答えを確認する[どのようにGoogle Doodleの医者のようなHTML5ゲームを作る?](http://stackoverflow.com/questions/20136141/how-to-make-html5-ゲームのようなgoogle-doodles-doctor-who/20150126#20150126) – nmoliveira

答えて

6

アニメーションを表示するためにキャンバスを使用するドラブルがあります。読み込まれた画像から取り出された異なるフレームは、JavaScriptのタイマーを使用して描画されます。

一部は、CSSプロパティbackground-imageを使用しています。 CSSプロパティbackground-positionは、アニメーションを作成するためのjavascriptタイマーを使用して変更されます。

アニメーションは、より多くのjavascriptを使用してインタラクティブに作られています。

例えば:http://www.google.com/logos/2012/hurdles12-hp-sprite.pnghttp://www.google.com/logos/2012/basketball12-hp-anim.png

+0

あなたは素晴らしいです!私はXNAでいくつかの経験がありました。彼らが画像を更新しているのか、JSを介して手動で身体部分を動かしているのか不思議でした。どうもありがとうございます!これはたくさんの助けになります –

+0

あなたは歓迎です:)。 Googleのお手伝いは本当に素晴らしいです。これは私が思う最高のものです - http://www.google.com/logos/2011/lespaul.html。これは、Canvas、その他のHTML要素とオーディオを使用します。 – Diode

+0

これは本当にクールだと思っています:)私はそのようなオーディオを使うことができるのか分かりませんでした。ありがとう、私は今日思ったより多くのことを学んだ。 –

6

は、デバッガを使用してページのソースコードを表示する方法を知っています仲間の開発者? Google Chromeでは、F12と打ってください。デバッガを開くと、ファイルが表示されます。 JavaScript fileがあります。 cleaning it upで読みやすくすることはできますが、圧縮された変数名になります。

+0

私が探していたすべてのありがとう! –

+0

偉大なリンクhttp://jsbeautifier.org/ :) – mtk

関連する問題