¿Qué puedes hacer en un URI de datos de 4k? [cerrado]

44

Bounty ha terminado, thephpdeveloper gana con Conway's Game of Life

La plataforma web actual avanza a un ritmo rápido. Características tales como animaciones CSS3 , transformaciones , sombras y gradientes , <canvas>, <audio>y <video>etiquetas, SVG , WebGL , y muchos más media que se puede hacer mucho más en el navegador, y en mucho menos código, que nunca antes. Por supuesto, muchos desarrolladores no pueden usar esas nuevas funciones, porque los sitios y aplicaciones en los que trabajan deben ser compatibles con los navegadores antiguos, como IE6.

Entonces, ¿qué pasa si te quitas el arnés? Permítete usar todas y cada una de las nuevas funciones que te gustan. ¿Vivir un poco, volverse loco, usar características extrañas de última generación que solo el 1% de sus usuarios podrán aprovechar?

Por supuesto, con recursos ilimitados y la capacidad de hablar con un servidor, puede hacer todo tipo de cosas: cargar megabytes de código y bibliotecas y videos, etc., pero los desafíos no son muy interesantes sin restricciones. La principal limitación para este concurso es: ¿qué puedes hacer en un único URI 4k autónomo?data:? Independiente significa que no debe hacer referencia a ningún recurso externo, conectarse a ningún servidor que use WebSockets o XHR, ni nada por el estilo. Si desea incrustar recursos como PNG o MP3, siéntase libre de incluir URI de datos dentro de su URI de datos, o idee alguna otra forma inteligente de incrustar recursos secundarios. 4k significa 4096 bytes, texto ASCII codificado correctamente por URI (puede usar un URI de datos codificado en base64 si lo desea, para evitar la codificación URI, pero generalmente el texto codificado en URI será más pequeño que base64 para texto plano).

Para proporcionar inspiración, el tema del concurso son los memes de StackOverflow . Cree un juego de justas de unicornio, un generador de hechos Jon Skeet, un programa de dibujo basado en un círculo a mano alzada o cualquier cosa que tenga que ver con uno de los populares memes de StackOverflow y meta.so.

Animaría a las entradas que son interactivas de alguna manera; no solo una simple animación o imagen estática, deben responder a la entrada del usuario, ya sea a través de eventos, desplazamiento del CSS, desplazamiento, cambio de tamaño de la ventana del navegador o cualquier otra forma en que se pueda imaginar. Sin embargo, este no es un requisito difícil; Se considerarán grandes demos que no sean interactivas, aunque se preferiría la interactividad.

Su entrada debe ejecutarse en al menos una versión pública de al menos uno de los 5 principales navegadores (IE, Firefox, Chrome, Safari, Opera). Solo se permiten lanzamientos de línea principal (no compilaciones de ramas o compilaciones que requieren parches), sin configuraciones de configuración especiales, complementos o cualquier otra cosa que no venga con el navegador de stock. Las compilaciones nocturnas, las versiones beta y los candidatos de lanzamiento están bien. Especifique en su entrada con qué navegadores ha probado su entrada. No hay limitaciones sobre qué tecnologías puede utilizar dentro de esas limitaciones; puedes hacer una animación SVG pura, una animación CSS pura, algo en JavaScript usando WebGL, o diablos, incluso algo que use XML y XSLT si eso te gusta. Si puede incluirlo en un URI de datos válido, sin dependencias externas, y obtener un navegador para ejecutarlo, es un juego justo.

Para agregar a la competencia aquí, el lunes 21 de marzo, abriré una recompensa por esta pregunta. ¿Cómo puedo pagar una recompensa cuando solo tengo 101 repeticiones? Bueno, todas las repeticiones que obtenga de los votos a favor de esta pregunta entre ahora y el lunes irán a la recompensa (hasta el límite de 500 permitido para una sola recompensa; sin embargo, sería bastante difícil para mí alcanzar ese límite, dado el representante gorra). Las entradas serán aceptadas por 6 días después de eso; todas las entradas deben realizarse al menos 24 horas antes de que caduque la recompensa, para darme tiempo de revisarlas y evaluarlas. En ese momento, aceptaré la respuesta más votada y daré la recompensa por mi respuesta favorita (que puede ser o no la misma que la más votada). Mis criterios para otorgar la recompensa incluirán belleza, diversión, técnica inteligente, uso interesante de nuevas características, interactividad y tamaño.

Aquí hay algunas fuentes de inspiración para comenzar:

  • Chrome Experiments , una colección de demostraciones de la plataforma web moderna
  • Mozilla Hacks , un blog sobre la plataforma web moderna con muchas demostraciones de nuevas características en Firefox 4
  • JS1k , un concurso para demostraciones de JavaScript de 1k
  • 10k Aparte , una aplicación web en un concurso de 10k
  • gl64k , un concurso de demostración actualmente en ejecución para demostraciones de WebGL de 64k
  • Shader Toy , un conjunto de demostraciones de lo que puedes hacer con los sombreadores WebGL

Formato para entradas:

Nombre de entrada

data: text / html, Your% 20data% 20URI

Funciona en Firefox 4 RC, Chrome 10 y Opera 11

Descripción de su entrada; qué hace, por qué es ordenado, qué técnicas inteligentes usaste.

<script>
  // code in expanded form to more easily see how it works
</script>

Cualquier crédito para inspiraciones, cualquier código que haya tomado prestado, etc.

(StackExchange parece no aceptar URI de datos en los enlaces, por lo que deberá incrustarlo directamente en una <pre>etiqueta)

Brian Campbell
fuente
@Joey Me vinculé a un hilo sobre SO memes para referencia , para cualquiera que no esté familiarizado. Estos son algunos de los más populares para comenzar: unicornios, gofres, círculos a mano alzada (es decir, círculos u otros diagramas dibujados a mano alzada en MS Paint o aplicaciones similares, comúnmente utilizados para resaltar algún tipo de error de interfaz de usuario), Jon Skeet y "hechos" al estilo de Chuck Norris sobre él .
Brian Campbell
Por cierto, las entradas no tienen por qué no ser sobre memes de StackOverflow en general; solo elige un meme, como unicornios. De hecho, estaba pensando en hacer que el tema fuera unicornios, pero decidí abrirlo un poco permitiendo cualquier meme de StackOverflow. Y diablos, si tiene una demostración genial que no se ajusta al tema, envíela de todos modos. El tema está allí principalmente para proporcionar inspiración, no para restringir lo que haces.
Brian Campbell
Tengo una idea, pero creo que llevará entre 6 y 8 semanas implementarla, ¿podría extender un poco el plazo?
aaaaaaaaaaaa
@eBusiness Ja, ja! No, a diferencia de Stack Overflow, en realidad hay plazos aquí.
Brian Campbell
más entradas por favor?
mauris

Respuestas:

33

SO meme: Todo es un meme

Todo es un meme basta de charla.

Juego de la vida de Conway, HTML5 + CSS3 + JS,

3,543 3,561 3,555 bytes

data:text/html,<!DOCTYPE%20html>%0A<html><head><title>Conway's%20Game%20of%20Life%20by%20Sam-Mauris%20Yong</title><style>body{margin:20px;padding:0;font:12px/1.6%20tahoma,sen-serif;}.clr{clear:both}#ftr{padding:10px;border-top:1px%20solid%20#DDD;margin-top:10px}input[type="submit"],input[type="button"],a.btn,a.btn:visited{color:#999;-moz-border-radius:5px;-webkit-border-radius:5px;border:1px%20solid%20#EEE;color:#333;cursor:pointer;padding:4px%208px;text-decoration:none;border:1px%20solid%20#EEE;background-color:#DDD}input[type="submit"]:hover,input[type="button"]:hover,a.btn:hover{background-color:#666;border:1px%20solid%20#EEE;color:#EEE;text-shadow:#000%201px%201px%200}a.btn.%20a.btn:visited{padding:5px%208px}input[type="submit"]:focus,input[type="button"]:focus,a.btn:focus{outline:none;border:1px%20solid%20#099}</style></head><body><h1>Conway's%20Game%20of%20Life</h1><canvas%20id="c"%20width="800"%20height="600"></canvas><div%20class="clr"></div><div%20style="margin-top:5px;"><input%20type="button"%20value="Start"%20id="ctrlStart"><input%20type="button"%20value="Stop"%20id="ctrlStop"><input%20type="button"%20value="Next"%20id="ctrlNext"></div><div%20id="ftr"><i>App%20requires%20awesome%20browsers%20supporting%20HTML5.</i><br>Written%20by%20@<a%20href="http://twitter.com/thephpdeveloper">thephpdeveloper</a>%20aka%20Sam-Mauris%20Yong.</div><script>eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return%20r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new%20RegExp('\\b'+e(c)+'\\b','g'),k[c]);return%20p}('7%20$(b){j%20Q.R(b)}7%20p(b){j%20S(b)}5%20k=$("c");5%20a=k.T("U");5%209={x:V,y:W};5%20s=10;5%206=t%20B(9.x);5%20X=Y;5%20i=-1;l(i++<6.h-1){6[i]=t%20B(9.y)}7%20C(b,c){a.D="Z";a.E(b*s,c*s,s,s);a.F="11";a.G(b*s,c*s,s,s)}7%20u(b){5%20c=t%2012();4(g(b)=="H"){4(g(b.h)!="I"){5%20c=[]}13(5%20d%2014%20b){4(g(b[d])=="H"){c[d]=u(b[d])}v{4(g(b[d])=="15"){c[d]=b[d]}v{4(g(b[d])=="16"){c[d]=b[d]}v{4(g(b[d])=="17"){((b[d]==m)?c[d]=m:c[d]=n)}}}}}}j%20c}7%208(b){j%20g(b)=="I"||!b?n:m}7%20J(b,d){5%20c=0;4(b>0){4(8(6[b-1][d])){c++}4(d>0){4(8(6[b-1][d-1])){c++}}4(d<9.y-1){4(8(6[b-1][d+1])){c++}}}4(b<9.x-1){4(8(6[b+1][d])){c++}4(d>0){4(8(6[b+1][d-1])){c++}}4(d<9.y-1){4(8(6[b+1][d+1])){c++}}}4(d>0){4(8(6[b][d-1])){c++}}4(d<9.y-1){4(8(6[b][d+1])){c++}}j%20c}7%20K(){5%20d=u(6);5%20c=0;l(c<6.h){5%20f=0;l(f<6[c].h){5%20b=6[c][f];5%20e=J(c,f);4(e<2||e>3){d[c][f]=n}4(e==3){d[c][f]=m}f++}c++}6=d}7%20o(){a.D="#18";a.E(0,0,p(k.19),p(k.1a));5%20b=0;l(b<6.h){5%20c=0;l(c<6[b].h){a.F="#1b";a.G(b*s,c*s,s,s);4(6[b][c]){C(b,c)}c++}b++}}5%20q;7%20w(){K();o()}7%20L(){q=M.1c(w,1d)}7%20N(){q=M.1e(q)}7%20z(c){4(r){5%20b=O.P((c.1f-p(k.1g))/s);5%20d=O.P((c.1h-p(k.1i))/s);6[b][d]=!6[b][d];o()}}5%20r=n;o();k.1j=7(b){r=m};k.1k=7(b){z(b)};k.1l=7(b){z(b);r=n};$("1m").A=N;$("1n").A=w;$("1o").A=L;',62,87,'||||if|var|space|function|evalbool|max|||||||typeof|length||return||while|true|false|draw||time_var|dodrawing||new|deepObjCopy|else|next|||editorDraw|onclick|Array|drawCell|fillStyle|fillRect|strokeStyle|strokeRect|object|undefined|countAliveNeighbours|update|start|window|stop|Math|floor|document|getElementById|parseInt|getContext|2d|80|60|lastSpace|null|black||white|Object|for|in|string|number|boolean|fff|width|height|ccc|setInterval|250|clearInterval|pageX|offsetLeft|pageY|offsetTop|onmousedown|onmousemove|onmouseup|ctrlStop|ctrlNext|ctrlStart'.split('|'),0,{}))</script></body></html>

Este es el juego de la vida de Conway escrito para HTML5 con Canvas y CSS3. Lo escribí por diversión durante el período de la competencia 10K Apart, pero no lo envié para la competencia.

La versión codificada en Base64 abarca más de 4.61 KB de datos, mientras que la versión original es de ~ 3543 bytes.

Para comprimir el tamaño : código Javascript minimizado por el compresor en línea YUI , luego por el empaquetador de Dean Edwards . Código CSS minimizado por el compresor en línea YUI . Utiliza la biblioteca jQuery de la Biblioteca API de Google. HTML5 y CSS3 válidos (versión experimental del validador w3).

Jugar:

  • El cuadro negro representa una célula viva, el blanco representa una célula muerta.
  • Haga clic en un cuadro para marcar una celda viva, haga clic nuevamente para marcarla como muerta.
  • Presione <Start>para ejecutar la simulación, <Stop>pausar y <Next>mostrar el siguiente paso
  • Funciona de maravilla en Internet Explorer 9, Firefox 4 (y Firefox 3 también), Safari 5 y Google Chrome.

La versión legible por humanos (los robots morirán):

<!DOCTYPE html>
<html>
    <head>
        <title>Conway's Game of Life by Sam-Mauris Yong</title>
        <style>
            body{
                margin:20px;
                padding:0;
                font:12px/1.6 tahoma,sen-serif;
            }
            .clr{
                clear:both
            }
            #ftr{
                padding:10px;
                border-top:1px solid #DDD;
                margin-top:10px
            }
            input[type="submit"],input[type="button"],a.btn,a.btn:visited{
                color:#999;
                -moz-border-radius:5px;
                -webkit-border-radius:5px;
                border:1px solid #EEE;
                color:#333;
                cursor:pointer;
                padding:4px 8px;
                text-decoration:none;
                border:1px solid #EEE;
                background-color:#DDD
            }            
            input[type="submit"]:hover,input[type="button"]:hover,a.btn:hover{
                background-color:#666;
                border:1px solid #EEE;
                color:#EEE;
                text-shadow:#000 1px 1px 0
            }
            a.btn,a.btn:visited{
                padding:5px 8px
            }
            input[type="submit"]:focus,input[type="button"]:focus,a.btn:focus{
                outline:none;
                border:1px solid #099
            }
        </style>
    </head>
    <body>
        <h1>Conway's Game of Life</h1>
    <canvas id="c" width="800" height="600"></canvas>
    <div class="clr"></div><div style="margin-top:5px;">
        <input type="button" value="Start" id="ctrlStart">
        <input type="button" value="Stop" id="ctrlStop">
        <input type="button" value="Next" id="ctrlNext">
    </div>
    <div id="ftr">
        <i>App requires awesome browsers supporting HTML5.</i>
        <br>
        Written by @<a href="http://twitter.com/thephpdeveloper">thephpdeveloper</a> aka Sam-Mauris Yong.
    </div>
    <script>
        function $(i){
            return document.getElementById(i);
        }
        function p(v){
            return parseInt(v);
        }
        var k = $("c");
        var a = k.getContext('2d');

        var max = {
            x: 80,
            y: 60
        };

        var s = 10;
        var space = new Array(max.x);
        var lastSpace = null;
        var i = -1;
        while(i++ < space.length - 1){
            space[i]= new Array(max.y);
        }

        function drawCell(x,y){
            a.fillStyle = "black";
            a.fillRect(x * s, y * s, s, s);
            a.strokeStyle = "white";
            a.strokeRect(x * s, y * s, s, s);
        }

        function deepObjCopy (dupeObj) {
            var retObj = new Object();
            if (typeof(dupeObj) == 'object') {
                if (typeof(dupeObj.length) != 'undefined')
                    var retObj = [];
                for (var objInd in dupeObj) {
                    if (typeof(dupeObj[objInd]) == 'object') {
                        retObj[objInd] = deepObjCopy(dupeObj[objInd]);
                    } else if (typeof(dupeObj[objInd]) == 'string') {
                        retObj[objInd] = dupeObj[objInd];
                    } else if (typeof(dupeObj[objInd]) == 'number') {
                        retObj[objInd] = dupeObj[objInd];
                    } else if (typeof(dupeObj[objInd]) == 'boolean') {
                        ((dupeObj[objInd] == true) ? retObj[objInd] = true : retObj[objInd] = false);
                    }
                }
            }
            return retObj;
        }

        function evalbool(v){
            return typeof(v) == 'undefined' || !v ? false : true;
        }

        function countAliveNeighbours(x,y){
            var l = 0;
            // left side
            if(x > 0){
                if(evalbool(space[x-1][y])){
                    l++;
                }
                if(y > 0){
                    if(evalbool(space[x-1][y-1])){
                        l++;
                    }
                }
                if(y < max.y-1){
                    if(evalbool(space[x-1][y+1])){
                        l++;
                    }
                }
            } // left side

            // right side
            if(x < max.x - 1){
                if(evalbool(space[x+1][y])){
                    l++;
                }
                if(y > 0){
                    if(evalbool(space[x+1][y-1])){
                        l++;
                    }
                }
                if(y < max.y-1){
                    if(evalbool(space[x+1][y+1])){
                        l++;
                    }
                }
            }
            // right side

            if(y > 0){
                if(evalbool(space[x][y-1])){
                    l++;
                }
            }

            if(y < max.y-1){
                if(evalbool(space[x][y+1])){
                    l++;
                }
            }

            return l;
        }

        function update(){
            var t = deepObjCopy(space);
            var x = 0;
            while(x < space.length){
                var y = 0;
                while(y < space[x].length){
                    var cell = space[x][y];
                    var nalive = countAliveNeighbours(x,y)

                    if(nalive < 2 || nalive > 3){
                        t[x][y] = false;
                    }
                    if(nalive==3){
                        t[x][y] = true;
                    }

                    y++;
                }
                x++;
            }
            space = t;
        }

        function draw(){
            a.fillStyle = "#fff";
            a.fillRect(0, 0, p(k.width), p(k.height));
            var x = 0;
            while(x < space.length){
                var y = 0;
                while(y < space[x].length){
                    a.strokeStyle = "#ccc";
                    a.strokeRect(x*s, y*s, s,s);
                    if(space[x][y]){
                        drawCell(x, y);
                    }
                    y++;
                }
                x++;
            }
        }

        var time_var;

        function next(){
            update();
            draw();
        }

        function start(){
            time_var = window.setInterval(
            next, 250);
        }

        function stop(){
            time_var = window.clearInterval(time_var);
        }
        function editorDraw(e){
            if(dodrawing){
                var x = Math.floor((e.pageX-p(k.offsetLeft))/s);
                var y = Math.floor((e.pageY-p(k.offsetTop))/s);
                space[x][y] = !space[x][y];
                draw();
            }
        }
        var dodrawing = false;

        draw();
        k.onmousedown = function(e){
            dodrawing=true;
        }
        k.onmousemove = function(e){
            editorDraw(e);
        }
        k.onmouseup = function(e){
            editorDraw(e);
            dodrawing=false;
        }
        $("ctrlStop").onclick = stop;
        $("ctrlNext").onclick = next;
        $("ctrlStart").onclick = start;
    </script>
</body>
</html>

Una clase de historia:

  1. Modificado para eliminar la dependencia de jQuery, así como para codificar URI en todos los espacios. Código mejorado de muchas maneras (que no recuerdo).
  2. Se corrigió un error en el cálculo de vecinos vivos y se refactorizó un código para reducir el tamaño.
mauris
fuente
1
Esto es muy bueno, pero ¿no es la biblioteca jQuery una dependencia externa?
Gareth
1
Alojado: ebusiness.hopto.org/gol.htm
aaaaaaaaaaaa
3
No necesita mucho jQuery aquí; probablemente podría reemplazarlo con acceso DOM sin procesar sin expandir demasiado su código, posiblemente a expensas de la compatibilidad con IE (pero el lienzo tampoco es compatible con IE anterior, por lo que no estaría perdiendo mucho). Si eso lo expande, por lo que debe reducirlo un poco más para que encaje, tiene un texto descriptivo que puede eliminar, así como algunas />secuencias con las que puede reemplazar, >ya que no está escribiendo XHTML. Además, recuerde codificar correctamente URI su resultado; Si bien los navegadores pueden aceptar espacios en los URI, no son técnicamente válidos.
Brian Campbell
44
Algunas cosas más que podría usar para ahorrar espacio, si termina necesitando algo. No hay necesidad real de <html>, <head>y <body>etiquetas (ni sus etiquetas de cierre). Están implícitos en HTML y el navegador los agregará en los lugares apropiados.
Brian Campbell
1
Por cierto, si quieres acortar el código. A menudo es más fácil hacer una matriz un poco más grande que sus datos que verificar que no lea fuera de los límites cada vez que lea de ella. Y podría contar un cuadrado de 3x3 en lugar de un anillo alrededor de un campo, todo lo que necesita hacer es ajustar un poco el algoritmo para compensarlo.
aaaaaaaaaaaa
22

Lamento desenterrar un hilo viejo, pero vi este desafío en la barra lateral y no pude resistirme. No me importa que el desafío haya terminado realmente, fue divertido pensar en algo.

Tal vez podríamos tener otra ronda?

De todos modos, mi presentación:

Editar

Lamento desenterrar esto nuevamente , pero me molestó por años que no pude obtener esto por debajo de 1 KB. Ahora lo he hecho!

Cubo sombreado interactivo:

960 987 1082 1156 1182 1667 1587 bytes !, HTML + CSS3 + JS

data:text/html,<script>X='position:absolute;',S=Math,l=S.sin,V=S.cos,D='style',$='getElementsByTagName',E=H=G=(L=K=99)/2,q=-G,j=1e4,Y=',';function _(p,r,D){A=[],B=l(r),C=V(r);for(z=6;z--;)v=z*3,A.unshift({x:l(D)*(B*p[v+1]+C*p[v+2])+V(D)*p[v]+K,y:C*p[v+1]-B*p[v+2]+K});return A}function R(a,b,c){F=x[v++],a=N[a],b=N[b],c=N[c];F.setAttribute(D,X+'-webkit-transform:matrix('+(a.x-b.x)/L+Y+(a.y-b.y)/L+Y+(c.x-b.x)/L+Y+(c.y-b.y)/L+Y+b.x+Y+b.y+');opacity:'+(((b.y-a.y)/(b.x-a.x)-(c.y-a.y)/(c.x-a.x)<0)^(a.x<b.x^a.x>c.x)));F[$]('b')[0][D].background='rgb(0,'+(d(a,c)+d(a,b))+',0)';return R}function d(P,O){W=P.x-O.x,Q=P.y-O.y;return S.sqrt(W*W+Q*Q)|0}onload=function(){P=document;for(o=6;o--;)P.body.appendChild(P.createElement('P')).innerHTML='<b '+D+'="'+X+'width:99;height:99"></b>';x=P[$]('p');onmousemove=function(e){J=e.pageX-K;U=e.pageY-K};setInterval(function(){N=_([q,q,q,G,G,q,q,G,q,q,q,G,G,q,G,G,G,G],E+=J/j,H+=U/j);R(2,0,3)(5,1,2)(0,2,1)(4,3,0)(3,4,5)(1,5,4)})}</script>

Mueve tu mouse.

Funciona en Chrome (18.algo, pero debería funcionar en los más recientes).

Jugué golf bastante bien, salvé algunos personajes usando un truco que pensé que era genial: Digamos que tienes lo siguiente:

function g(x){alert("hello "+x+"!")}
g("dave");g("martin");g("alice");g("rose");g("bob");g("helen");g("jo");

los caracteres se pueden guardar devolviendo la función dentro de sí mismo y haciendo lo siguiente:

function g(x){alert("hello "+x+"!");return g}
g("dave")("martin")("alice")("rose")("bob")("helen")("jo");

El ahorro depende de cuántas llamadas de función tenga. Sin embargo, esto es probablemente mejor para la ofuscación que para el golf.

También guardé un personaje reemplazándolo 1000con 1e4, dando a la Mathclase, y algunas de sus funciones, alias. Usar variables para cadenas repetidas (bastante difícil de encontrar algunos de estos guardados). Además, tuve la palabra styleen mi código varias veces; algunos de ellos eran cadenas y otros identificadores similares element.style.whatever. Asignar la cadena a una variable ( D='style) me permitió reemplazar las cadenas con Dy reemplazar los identificadores así element[D].whatever.

Última edición: lamento traer una vieja compilación ', ¡pero algunas ideas sobre cómo acortar esto acaban de llegar a mí!

Grifo
fuente
Bien, gracias por crear una entrada! Esto está muy bien. También me gustan tus técnicas de golf.
Brian Campbell
Bien, pero te queda mucho espacio, deberías agregarle más :) ¿Qué tal un simulador Rubik?
Aditsu
onmousemovepodría ser modificado: onmousemove=function(e){U=K-e.pageX;J=e.pageY-K};. De esta manera, el cubo rodará hacia el puntero del mouse (más intuitivo).
Victor
Si está satisfecho con ECMAScript 6 (sólo funciona en Firefox (SpiderMonkey), por lo que yo sé), entonces function g(x){alert("hello "+x+"!");return g} g("dave")("martin")("alice")("rose")("bob")("helen")("jo");puede llegar a serg=x=>alert("hello "+x+"!"),g;g("dave")("martin")("alice")("rose")("bob")("helen")("jo");
Cepillo de dientes
1

JavaScript 489 caracteres

Esto juega al juego Adivina un número.

data:text/html,<!DOCTYPE%20html><html><body><h1>Guess the number between 0 and 100</h1><p id="p">good luck</p><form><input id="i" type="text"></input></form><br><button onclick="h()">Try</button><script>var r=Math.round(100*Math.random());function h(){var a=document.getElementById("i").value;var anum="/(^\d+$)/";var res="is not a number!";if (!isNaN(a)){if(a<r) res="higher";else if(r<a) res="lower";else res="you win";}document.getElementById("p").innerHTML=res;}</script></body></html>

Lo resolví con este código:

<!DOCTYPE html>
<html>
<head>
</head>
<body onload="g()">
<p id="p"></p>

<script>
f=function(x){
var y=x.replace(" ","%20");
window.location.assign("data:text/html,"+y);
}
g=function(){
var a="<!DOCTYPE html><html><body><h1>Guess the number between 0 and 100</h1><p id=\"p\">good luck</p>"+
"<form><input id=\"i\" type=\"text\"><\/input></form>"
+"<br><button onclick=\"h()\">Try<\/button><script>"
+document.getElementById("s").innerHTML+
"<\/script><\/body><\/html>";
f(a);
}
</script>
<script id="s">
var r=Math.round(100*Math.random());
function h(){
var a=document.getElementById("i").value;
var anum="/(^\d+$)/";
var res="is not a number!";
if (!isNaN(a)){
if(a<r) res="higher";
else if(r<a) res="lower";
else res="you win";
}
document.getElementById("p").innerHTML=res;
}
</script>

</body>
</html>
bacchusbeale
fuente