Explicação do truque do Google Gravity

9

Não sou muito desenvolvedor de JS, mas me deparei com este site chamado Google Gravity (aqueles que não o usaram, tente fazer uma pesquisa lá - você ficará surpreso), que é uma página inicial do Google remasterizada. Desde então, estive pensando e pensando em aprender mais sobre como o cara o implementou. Tentei pesquisar no Google, mas não consegui encontrar uma boa explicação para a implementação.

Todos os gurus do JS / CSS, você pode me indicar um local onde eu possa aprender mais? Eu já sei o básico de trabalhar com jQuery e AJAX.

google yati sagade
fonte
2
Você já olhou o código fonte da página? Deve dizer apenas tudo o que você precisa saber.
James McLeod
11
Já faz algum tempo desde que vi uma interface menos utilizável que essa (Gravity).
Rook
11
@ James sim, deu uma olhada. Mas como eu disse, eu estava à procura de uma explicação nível superior do código - como o código é 2k + linhas, e alguma parte está muito ofuscado :)
yati sagade
5
@Rook - eu não acho que a usabilidade era sempre a preocupação do desenvolvedor :)
yati sagade
@yati - Oh! Bem, nesse caso - trabalho bem-feito :) #
01

Respostas:

5

Você já viu o código-fonte javascript?

Eu apenas dei uma olhada muito rápida (e está longe da minha xícara de chá), mas parece que a página está dividida em caixas 2D e é executada uma simulação dessas caixas que caem livremente sob a gravidade. Em seguida, os eventos do mouse são manipulados para permitir que essas caixas sejam manipuladas interativamente.

Guy Sirton
fonte
Sim, esse parece ser o caminho a seguir, mas eu poderia ter usado uma explicação de primeiro nível, pois esse também não é o meu forte. Depois de fazer uma pesquisa, até os resultados aparecem em caixas 2D móveis e os restos anteriores ainda estão lá!
yati sagade