Explicación del truco de Google Gravity

9

No soy un gran desarrollador de JS, pero me encontré con este sitio llamado Google Gravity (aquellos que no lo han usado, intenten hacer una búsqueda allí, se sorprenderán), que es una página de inicio de Google remasterizada. Desde entonces, he estado pensando y preguntándome acerca de aprender más sobre cómo el chico lo implementó. Intenté buscar en Google, pero no pude encontrar una buena explicación de la implementación.

Todos los Gurus de JS / CSS, ¿pueden señalarme una ubicación donde pueda obtener más información? Ya conozco los conceptos básicos de trabajar con jQuery y AJAX.

google Yati Sagade
fuente
2
¿Has mirado el código fuente de la página? Debería decirle todo lo que necesita saber.
James McLeod
1
Ha pasado algún tiempo desde que vi una interfaz menos utilizable que esa (Gravity).
Rook
1
@ James, sí, eché un vistazo. Pero como dije, estaba buscando una explicación de nivel superior del código, ya que el código es de 2k + líneas, y una parte está muy ofuscada :)
yati sagade
55
@Rook - No creo que la usabilidad haya sido una preocupación del desarrollador :)
yati sagade
@yati - ¡Oh! Bueno, en ese caso - trabajo bien hecho :)
Rook

Respuestas:

5

¿Has mirado el código fuente de JavaScript?

Solo eché un vistazo muy rápido (y está lejos de mi taza de té), pero parece que la página está dividida en cuadros 2d y se ejecuta una simulación de esas cajas que caen libremente bajo la gravedad. Luego, los eventos del mouse se manejan para permitir que esas cajas sean manipuladas interactivamente.

Guy Sirton
fuente
Sí, ese parece ser el camino a seguir, pero podría haber usado una explicación de primer nivel primero, ya que este tampoco es mi fuerte. Después de hacer una búsqueda, incluso los resultados aparecen en cuadros 2D móviles, ¡y los escombros anteriores siguen ahí!
yati sagade