scratch programming google games game development demos blocky blockly javascript google-doodle

javascript - games - google programming game



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

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

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.

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.