javascript - games - google programming game

¿Cómo funciona el Doodle de Google de hoy(Julio Verne)?

Question

Estoy seguro de que muchos de ustedes ya han consultado el doodle de Google (2011-02-08) de hoy ( enlace al artículo en CNN si cambia doodle ). Fue increíble y traté de descubrir su implementación en Firebug , algunas cosas que descubrí fue que tiene aproximadamente 3 capas de imágenes (para el efecto 3D) que son panorámicas y rotadas ( -moz-transform:rotate() ), etc. Lo que no encontré fue (y mis preguntas):

• Cómo ocultó el cursor de nuestro mouse cuando mantienes presionado el manejador, sé que es el cursor:none en CSS pero aún vi este CSS para el manejador:

  #verne-drag {
      background: url("logos/2011/verne-hp.png") no-repeat scroll 1000px 1000px transparent;
      cursor: pointer;/*here its pointer not none*/
      height: 150px;
      left: 565px;
      position: absolute;
      top: 15px;
      width: 150px;
      z-index: 700;
  }

• Cómo permitió arrastrar el asa e intercambiar entre 9 imágenes según la posición al mismo tiempo.

• Dale algo de luz a su Javascript (no encontré uno en Firebug ... solo ese script de búsqueda habitual, y este pequeño código que solo calcula el mod (¿qué pasa con el posible código para otras tareas?)

  google.doodle.mod = function (a, n) {return a % n;};
  2 /* !eval(new String("google.doodle.mod = function(a,n);)) */

Así que simplemente indíqueme cómo se implementó (mencioné 3 pero incluyo otros puntos que podrían no ser tan obvios).

Recursos de imagen para referencia:

Enlace a otras 3 imágenes (Eran tan largas que no era posible mostrarlas aquí)

Pez grande, tiburon
Cola gigante
Fauna bajo el agua
Sky

Actualizar

Myles Gray aquí ha hecho una gran contribución al volver a implementar (y hacerlo más legible) el Código Javascript, CSS y HTML para mostrarnos cómo se implementó Doodle.

Aquí está el enlace para que todos ustedes lo vean:

http://jsfiddle.net/Mutant_Tractor/jRkND/16/ <- Última revisión

Answer 1

El CSS para el cursor estaba más arriba:

#hplogo.drag-active #verne-drag, #hplogo.drag-active #verne-drag * {
  cursor:move !important;
  cursor:none !important;
}

Sin embargo, no hay muchos navegadores que admitan ninguno y los !importants múltiples no funcionan. En Chrome e IE veo el puntero predeterminado cuando arrastro. cursor: none funciona en Firefox 3.

Answer 2

Esto es lo mejor que podría hacer para hacer que todo su código sea legible:

http://jsfiddle.net/Mutant_Tractor/jRkND/16/

Answer 3

Para referencia, aquí está el div que compone el logo en cuestión:

<div id="lga">
  <style>
  #hplogo{height:190px;margin-top:-5px;overflow:hidden;position:relative;width:714px;}#hplogo,
  #hplogo
  *{-webkit-user-select:none;-moz-user-select:none;user-select:none;}#hplogo.drag-active
  #verne-drag,#hplogo.drag-active #verne-drag *{cursor:move
  !important;cursor:none
  !important;}#verne-chrome{height:190px;left:0;position:absolute;top:0;width:714px;z-index:400;}#verne-chrome-img{width:714px;height:229px;}#verne-layers{height:230px;left:0;top:-20px;overflow:hidden;position:absolute;width:714px;}#verne-layers
  img{opacity:0;}#verne-layer-0,#verne-layer-1,#verne-layer-2,#verne-layer-3{height:1388px;left:1px;position:absolute;top:1px;margin-top:20px;width:714px;}#verne-layer-0{z-index:300;}#verne-layer-1{z-index:200;}#verne-layer-2{z-index:100;}#verne-layer-3{z-index:50;background:white;}#verne-lever{background:url(logos/2011/verne-hp.png)
  no-repeat 0
  -190px;height:39px;left:639px;position:absolute;top:49px;width:39px;z-index:500;transition:transform
  .1s linear, top .1s linear, left .1s
  linear;-moz-transition:-moz-transform .1s linear, top .1s linear,
  left .1s linear;-webkit-transition:-webkit-transform .1s linear,
  top .1s linear, left .1s linear;-o-transition:-o-transform .1s
  linear, top .1s linear, left .1s
  linear;}#verne-drag{background:url(logos/2011/verne-hp.png)
  no-repeat 1000px
  1000px;cursor:pointer;height:150px;left:565px;position:absolute;top:15px;width:150px;z-index:700;}#verne-dials-click{background:url(logos/2011/verne-hp.png)
  no-repeat 1000px
  1000px;height:190px;left:0;position:absolute;top:0px;width:100px;z-index:700;-webkit-tap-highlight-color:transparent;}#verne-click{background:url(logos/2011/verne-hp.png)
  no-repeat 1000px
  1000px;cursor:pointer;height:190px;left:100px;position:absolute;top:0px;width:465px;z-index:700;}#verne-dial-depth-big,#verne-dial-depth-small,#verne-dial-position{position:absolute;width:7px;transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transition:transform
  .2s linear;-moz-transition:-moz-transform .2s
  linear;-webkit-transition:-webkit-transform .2s
  linear;-o-transition:-webkit-transform .2s
  linear;}#verne-dial-depth-big{background:url(logos/2011/verne-hp.png)
  no-repeat -351px
  -199px;height:15px;left:48px;top:62px;z-index:600;transform-origin:3px
  12px;-moz-transform-origin:3px 12px;-webkit-transform-origin:3px
  12px;-o-transform-origin:3px
  12px;}#verne-dial-depth-small{background:url(logos/2011/verne-hp.png)
  no-repeat -351px
  -215px;height:15px;left:48px;top:62px;z-index:620;transform-origin:3px
  12px;-moz-transform-origin:3px 12px;-webkit-transform-origin:3px
  12px;-o-transform-origin:3px
  12px;}#verne-dial-position{background:url(logos/2011/verne-hp.png)
  no-repeat -351px
  -190px;height:8px;left:59px;top:110px;z-index:600;transform-origin:4px
  8px;-moz-transform-origin:4px 8px;-webkit-transform-origin:4px
  8px;-o-transform-origin:4px 8px;}#verne-border{border:1px solid
  white;cursor:pointer;height:188px;left:0;position:absolute;top:0;width:712px;z-index:650;}</style>
  <noscript>
  &lt;style&gt;#verne-chrome{background:url(logos/2011/verne-hp.jpg)
  no-repeat;left:100px;}#verne-lever,#verne-dial-depth-big,#verne-dial-depth-small,#verne-dial-position,#verne-dial-position{display:none;}&lt;/style&gt;</noscript>
  <div id="hplogo" onselectstart="return false;"
  style="-webkit-transform: translate3d(0px, 0px, 0px);">
    <a hidefocus="" id="verne-click"
    href="/search?q=Jules+Verne&amp;ct=verne-hp&amp;oi=ddle"></a>
    <div id="verne-dials-click"></div>
    <div id="verne-drag"></div>
    <div id="verne-lever"
    style="-webkit-transform: translate(0px, 0px); background-position: 0px -190px;">
    </div>
    <div id="verne-chrome">
      <img id="verne-chrome-img" src="logos/2011/verne-hp.png">
        <div id="verne-layers"
        style="-webkit-transform: rotate(0deg);">
          <div id="verne-layer-0"
          style="-webkit-transition-property: -webkit-transform, top; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-timing-function: linear, linear; -webkit-transition-delay: initial, initial; -webkit-transform: translate3d(-28px, -385.5499999999999px, 0px);">

            <img src="logos/2011/verne-hp-1.png"
            id="verne-layer0-img"
            style="-webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -webkit-transition-delay: initial; opacity: 1;">

              <div id="verne-layer-1"
              style="-webkit-transition-property: -webkit-transform, top; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-timing-function: linear, linear; -webkit-transition-delay: initial, initial; -webkit-transform: translate3d(-28px, -350.3175299999999px, 0px);">

                <img src="logos/2011/verne-hp-2.png"
                id="verne-layer1-img"
                style="-webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -webkit-transition-delay: initial; opacity: 1;">

                  <div id="verne-layer-2"
                  style="-webkit-transition-property: -webkit-transform, top; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-timing-function: linear, linear; -webkit-transition-delay: initial, initial; -webkit-transform: translate3d(-28px, -314.3936849999999px, 0px);">

                    <img src="logos/2011/verne-hp-3.png"
                    id="verne-layer2-img"
                    style="-webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -webkit-transition-delay: initial; opacity: 1;">

                      <div id="verne-layer-3"
                      style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(185, 229, 231); -webkit-transition-property: -webkit-transform, top; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-timing-function: linear, linear; -webkit-transition-delay: initial, initial; -webkit-transform: translate3d(-28px, -247.27499999999995px, 0px); background-position: initial initial; background-repeat: initial initial;">

                        <img src="logos/2011/verne-hp-4.png"
                        id="verne-layer3-img"
                        style="-webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-out; -webkit-transition-delay: initial; opacity: 1;">

                          <div id="verne-dial-depth-big"
                          style="-webkit-transform: rotate(1542.1999999999996deg);">
                          </div>
                          <div id="verne-dial-depth-small"
                          style="-webkit-transform: rotate(96.38749999999997deg);">
                          </div>
                          <div id="verne-dial-position"
                          style="-webkit-transform: rotate(3deg);">
                          </div>
                          <div id="verne-border"></div>
                          <script>(function(){var
                          d=true,g=false,h=window,i=google,j=document,k="push",l="getElementById",m="targetTouches",n="getTime",o="setTimeout",p="style";try{if(!i.doodle)i.doodle={};if(!i.doodle.a)i.doodle.a=[];var
                          q=navigator.userAgent.indexOf("MSIE")!=-1,aa=["webkitTransform","MozTransform","OTransform","transform"],ba=["webkitTransition","MozTransition","OTransition","transition"],ca={37:3,38:1,39:4,40:2},da=["logos/2011/verne-hp.png","logos/2011/verne-hp-1.png","logos/2011/verne-hp-2.png","logos/2011/verne-hp-3.png","logos/2011/verne-hp-4.png"],ea=[1,0.8726,0.7427,0.5],fa=1E4/66,ga=1/3,ha=2/3,r=0,s=0,t=0,ia=0,u=93,v=0,w=0,x=119,A=0,B=0,E=g,ja,ka=g,la=0,ma=0,na=0,oa=0,pa=d,qa=0,F=g,G=0,H=0,ra=g,sa,I=g,J=g,ta=0,ua=g,va,K=0,L=0,M=10,N=0,O=0,wa=0,P="",xa="",ya=g,Q=g,za=g,R,Aa,S,Ba,Ca,Da,T,Ea,U=0.2,V=function(a,b,c){if(!i.doodle.d)i.doodle.d=[];i.doodle.d[k](arguments);a.addEventListener?a.addEventListener(b,c,g):a.attachEvent("on"+b,c)};eval("google.doodle.mod
                          = function(a,n){return
                          a"+"%%".charAt(0)+"n;}");var
                          Fa=function(a){if(a)a.stopPropagation&amp;&amp;a.stopPropagation();else
                          h.event.cancelBubble=d},Ga=function(a,b){!b()&amp;&amp;a&lt;
                          200&amp;&amp;h[o](function(){Ga(a+1,b)},a)},Ha=function(a){a=a||h.event;return[(a.clientX||a[m]&amp;&amp;a[m][0].clientX||0)+(j.body.scrollLeft||j.documentElement.scrollLeft),(a.clientY||a[m]&amp;&amp;a[m][0].clientY||0)+(j.body.scrollTop||j.documentElement.scrollTop)]},Ja=function(a){(a=a||h.event)&amp;&amp;!a.toElement&amp;&amp;Ia(a)},Ma=function(a,b){I=d;W();var
                          c=Ea=j[l]("verne-drag"),e=0;do
                          e+=c.offsetLeft;while(c=c.offsetParent);na=e;c=Ea;e=0;do
                          e+=c.offsetTop;while(c=c.offsetParent);oa=e;e=Ha(a);c=e[0]-na;e=e[1]-oa;if(c&gt;=40&amp;&amp;c&lt;=
                          114&amp;&amp;e&gt;=25&amp;&amp;e&lt;=
                          119){R.className="drag-active";E=d;ja=(new
                          Date)[n]();if(c&gt;=92&amp;&amp;c&lt;=
                          112&amp;&amp;e&gt;=37&amp;&amp;e&lt;=
                          57){la=c-60-17;ma=e-45-27}else
                          ma=la=0;Ka(a);La("m");b&amp;&amp;a.preventDefault()}},Ia=function(){U=(new
                          Date)[n]()-ja&gt;500?0.1:0.01;X(0);R.className="";E=g},Ka=function(a){Z();if(E&amp;&amp;pa){pa=g;h[o](function(){pa=d},25);W();var
                          b=Ha(a);a=b[0]-na-la;b=b[1]-oa-ma;var
                          c=0,e=0,f=0,y=0,z=0,Y=0,C=0,D=0;if(a&lt;
                          60){c=3;e=1;f=-a}else
                          if(a&gt;94){c=4;e=1;f=a}else if(b&lt;
                          45){z=y=1;Y=-b}else
                          if(b&gt;99){y=2;z=1;Y=b}else{a=(a-60-17)/34;b=(b-45-27)/54;if(b&gt;-0.2&amp;&amp;b&lt;
                          0.2)if(a&lt;
                          0){c=3;e=-a*2}else{c=4;e=a*2}if(a&gt;-0.2&amp;&amp;a&lt;
                          0.2)if(b&lt;
                          0){y=1;z=-b*2}else{y=2;z=b*2}}if(c!=0&amp;&amp;y!=0)if(Y&gt;f){C=y;D=z}else
                          if(Y&lt; f){C=c;D=e}else
                          if(Math.abs(z)&gt;Math.abs(e)){C=y;D=z}else{C=c;D=e}else
                          if(c!=0){C=c;D=e}else{C=y;D=z}X(C,D)}},Na=function(a){if(i.log){i.log("verne",a);ra=d}},La=function(a){if(!ra)if(H){h.clearTimeout(H);H=0;Na(a)}else
                          H=h[o](Oa,250)},Oa=function(){H=0;if(ka)Na("k");else
                          E&amp;&amp;Na("m")},Pa=function(a){Z();I=d;W();var
                          b=ca[a.keyCode];if(b){X(b,1);La("k");ka=d}Fa(a)},Qa=function(a){Z();if(ca[a.keyCode]){U=0.2;X(0);ka=g}Fa(a)},Ra=function(){Z()},W=function(){M=10;L=K=0},Sa=function(a){var
                          b=h.orientation;if(b!=wa){wa=b;W()}var
                          c=a.accelerationIncludingGravity;if(c)switch(b){case
                          90:var e=-c.y,f=c.z;break;case
                          -90:e=c.y;f=c.z;break;case
                          180:e=-c.x;f=c.z;break;default:e=c.x;f=c.z}b=a.gamma||a.x*57||e*2;a=a.beta||a.y*57||f*2;if(M){K+=b;L+=a;M--;if(M==0){K/=10;L/=10}}else{N=b-K;O=a-L;f=a=0;if(N&gt;5){f=(N-5)/10;a=4}else
                          if(N&lt;
                          -5){f=(-N-5)/10;a=3}if(Math.abs(O)&gt;Math.abs(N))if(O&gt;5){f=(O-5)/10;a=2}else
                          if(O&lt;
                          -5){f=(-O-5)/10;a=1}if(f&gt;1)f=1;if(f&gt;0){Z();I=d;X(a,f)}}},Ta=function(){I=d;t+=3},X=function(a,b){if(b){if(b&gt;1)b=1}else
                          b=0;if(a==0)ia=0;else{r=a;ia=s=b}$()},$=function(){var
                          a=r,b=s;if(a==0){a=3;b=0}var
                          c=0,e=0,f=0;switch(a){case
                          3:if(b&gt;0.5)f=117;else
                          if(t&gt;0){a=i.doodle.mod(t,1);if(a&lt;
                          0.25||a&gt;=0.5&amp;&amp;a&lt;
                          0.75)f=39;else
                          if(a&gt;=0.25&amp;&amp;a&lt;
                          0.5)f=78}c=-15*b;break;case
                          4:if(b&gt;0.5)f=156;c=12*b;break;case
                          1:if(b&gt;ha)f=195;else
                          if(b&gt;ga)f=234;e=-23*b;break;case
                          2:if(b&gt;ha)f=273;else
                          if(b&gt;ga)f=312;e=26*b}if(Q)T[p][P]="translate("+c+"px,
                          "+e+"px)";else{T[p].left=c+639+"px";T[p].top=e+49+"px"}T[p].backgroundPosition=-f+"px
                          -190px"},Ua=function(){for(var
                          a=-(u+-65),b=0;b&lt; 4;b++){var
                          c=-((x-109)*ea[b]+109);if(Q)S[b][p][P]=ya?"translate3d("+a+"px,
                          "+c+"px, 0)":"translate("+a+"px,
                          "+c+"px)";else{S[b][p].left=a+"px";S[b][p].top=c+"px"}}if(Q){Aa[p][P]="rotate("+-v*5+"deg)";Ba[p][P]="rotate("+x*4+"deg)";Ca[p][P]="rotate("+x*4/16+"deg)";Da[p][P]="rotate("+(u-90)+"deg)"}},Wa=function(){if(ua){J&amp;&amp;!I&amp;&amp;X(2,0.5);var
                          a=r!=0,b=g,c=g;if(r==3)w=-2*s;else
                          if(r==4)w=2*s;else{w=0;b=d}if(r==2)B=4*s;else
                          if(r==1)B=-5*s;else{c=d;if(x&lt;=
                          106)B=0.2;else
                          if(x&gt;=129){c=g;B=-0.2}else
                          if(x&gt;=112)B=-0.2}if(u&lt; 0)u=0;else
                          if(u&gt;186)u=186;else if(u&lt;
                          5&amp;&amp;w&lt;
                          0||u&gt;181&amp;&amp;w&gt;0){w=0;a=g}if(x&lt;
                          104)B=4;else if(x&gt;1218)x=1218;else
                          if(x&gt;1218-40.5*A&amp;&amp;B&gt;0){B=0;a=g}if(B&gt;A){A+=a?0.2:0.05;if(A&gt;B)A=B}else
                          if(B&lt; A){A-=a?0.2:0.05;if(A&lt;
                          B)A=B}if(w&gt;v){v+=0.05;if(v&gt;w)v=w}else
                          if(w&lt; v){v-=0.05;if(v&lt;
                          w)v=w}if(w==0&amp;&amp;v&gt;=-0.05&amp;&amp;v&lt;=
                          0.05)v=0;u+=v;x+=A;Ua();if(t&gt;0){t-=0.1;$()}if(s&gt;ia){s-=U;$()}if(s&lt;=
                          U){s=r=0;$()}if(b&amp;&amp;c){G++;G&gt;fa&amp;&amp;Va()}else
                          G=0}},Ya=function(){va=(new
                          Date)[n]();if(j[l]("verne-chrome-img"))Xa();else{var
                          a=j.createElement("img");V(a,"load",Xa);a.id="verne-chrome-img";a.src=da[0];j[l]("verne-chrome").appendChild(a)}},Xa=function(){S[3][p].background="#b9e5e7";for(var
                          a=0;a&lt; 4;a++){var
                          b="verne-layer"+a+"-img";if(!j[l](b)){ta++;var
                          c=j.createElement("img");V(c,"load",Za);c.src=da[a+1];c.id=b;S[a].appendChild(c)}}$a()},Za=function(){ta--;$a()},$a=function(){if(ta==0){for(var
                          a=(new Date)[n]()-va&gt;50,b=0;b&lt;
                          4;b++){var
                          c=j[l]("verne-layer"+b+"-img");if(!c)return;if(a&amp;&amp;za)c[p][xa]="opacity
                          1s
                          ease-out";c[p].opacity=1}ua=d;h[o](ab,3E3);h[o](bb,6E3)}},cb=function(){for(var
                          a=0,b;b=aa[a++];)if(typeof
                          R[p][b]!="undefined"){Q=d;P=b;R[p][b]="translate3d(0,
                          0,
                          0)";ya=R[p][b]!="";break}for(a=0;b=ba[a++];)if(typeof
                          R[p][b]!="undefined"){za=d;xa=b;break}},db=function(){if(za)for(var
                          a=0;a&lt;
                          4;a++)j[l]("verne-layer-"+a)[p][xa]="-webkit-transform
                          .2s linear, top .2s
                          linear"},Z=function(){if(!F){F=d;qa=h.setInterval(Wa,66);G=0}},Va=function(){if(F){F=g;h.clearInterval(qa)}},ab=function(){I||(t+=3)},bb=function(){if(!I){J=d;sa=h[o](eb,9E3)}},eb=function(){if(J&amp;&amp;!I){J=g;h.clearTimeout(sa);X(0)}},fb=function(){var
                          a=j.forms.f||j.forms.gs||j.forms.tsf;if(a){V(a.q,"keydown",Pa);V(a.q,"keyup",Qa)}V(j,"keydown",Pa);V(j,"keyup",Qa);V(j,"mousedown",function(b){Ma(b,g)});V(j,"mousemove",Ka);V(j,"mouseup",Ia);q&amp;&amp;V(j.body,"mouseout",Ja);V(j,"touchstart",function(b){Ma(b,d)});V(j,"touchmove",Ka);V(j,"touchend",Ia);V(j,q?"focusin":"focus",Ra);V(h,"deviceorientation",Sa);V(h,"MozOrientation",Sa);V(h,"devicemotion",Sa);V(j[l]("verne-dials-click"),"click",Ta);for(i.doodle.c=g;a=i.doodle.a.shift();)a()},gb=function(){if(i.doodle.c)i.doodle.a[k](gb);else{for(var
                          a;a=i.doodle.d.pop();){var
                          b=a[0],c=a[1];a=a[2];b.removeEventListener?b.removeEventListener(c,a,g):b.detachEvent("on"+c,a)}Va();eb()}},hb=function(){if(i.dstr){if(!i.doodle.e){i.doodle.e=d;i.dstr[k](gb)}return
                          d}return
                          g},ib=function(){h[o](function(){Ga(100,hb)},0);if(!/#.*q=[^&amp;]/.test(h.location.href))if(i.doodle.c)i.doodle.a[k](ib);else{i.doodle.c=d;R=j[l]("hplogo");Aa=j[l]("verne-layers");S=[j[l]("verne-layer-0"),j[l]("verne-layer-1"),j[l]("verne-layer-2"),j[l]("verne-layer-3")];Ba=j[l]("verne-dial-depth-big");Ca=j[l]("verne-dial-depth-small");Da=j[l]("verne-dial-position");T=j[l]("verne-lever");Ea=j[l]("verne-drag");Ya();h[o](fb,0);cb();X(0);Ua();h[o](db,0);h[o](Z,0);if(q)try{j.execCommand("BackgroundImageCache",g,d)}catch(a){}}};ib()}catch(jb){i.ml(jb,g,{cause:"DOODLE"})};})();</script>
                        </img>
                      </div>
                    </img>
                  </div>
                </img>
              </div>
            </img>
          </div>
        </div>
      </img>
    </div>
  </div>
</div>

El JavaScript que alimenta el logotipo se encuentra en un elemento de script incrustado. Sin embargo, no sé cuánto aprenderás de ello. Está comprimido.