Google Interactive Doodle

¿Alguien sabe cómo funcionan los Doodles interactivos de Google para los Juegos Olímpicos? http://www.google.com/doodles/soccer-2012 Google Interactive Doodle

me parece que la Div es hplogo y el estilo es justo encima de ella, como:

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

no puedo averiguar cómo se calcula la puntuación; Cómo se mueven los objetos, etc. ¿Es un archivo JS legible? Gracias de antemano.

Sinceramente, Un compañero desarrollador

Fuente

2012-08-10 Mahyar Ebadi

una pregunta más importante: ¿Cuántas savès Qué se necesita para conseguir el oro? –

Haha gran pregunta. No pude :) –

Comprobar mi respuesta a una pregunta similar [¿Cómo crear juegos HTML5 como Doctor Who de Google Doodle?] (Http://stackoverflow.com/questions/20136141/how-to-make-html5- games-like-google-doodles-doctor-who/20150126 # 20150126) – nmoliveira

Algunos garabatos usan el lienzo para mostrar las animaciones. Diferentes cuadros, tomados de una imagen cargada se dibujan usando un temporizador en javascript.

Algunos usan la propiedad CSS background-image. La propiedad CSS background-position se cambia utilizando un temporizador de JavaScript para crear animaciones.

Las animaciones se hacen interactivas usando más javascript.

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

Fuente

2012-08-10 19:28:46 Diode

¡Eres increíble! Tenía algo de experiencia con XNA y me preguntaba si están actualizando la imagen o moviendo las partes del cuerpo manualmente a través de JS. Muchas gracias! Esto ayuda mucho. –

De nada :). Los doodles de Google son realmente increíbles. Esta es la mejor, creo - http://www.google.com/logos/2011/lespaul.html. Utiliza Canvas, otros elementos HTML y Audio. – Diode

Woah, eso es genial :) No sabía que el audio podía usarse así. Gracias a thon, aprendí mucho más de lo que pensé hoy. –

¿Conoce cómo ver el código fuente de la página con un depurador? En Google Chrome, simplemente pulse F12. Abra el depurador y puede ver los archivos. Notará un JavaScript file. Puede hacerlo más legible por cleaning it up, pero se tratará de nombres de variables comprimidos.

Fuente

2012-08-10 19:18:58 epascarello

¡Gracias eso es todo lo que estaba buscando! –

Great link http://jsbeautifier.org/ :) – mtk

Respuesta

Cuestiones relacionadas