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)

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.

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í!

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>