A recompensa acabou, o desenvolvedor php vence com Game of Life de Conway

Hoje, a plataforma da Web está avançando rapidamente. Características como animações CSS3 , transforma , sombras e gradientes , <canvas>, <audio>e <video>tags, SVG , WebGL , e muitos mais significa que você pode fazer muito mais no browser, e em muito menos código, do que nunca. Obviamente, muitos desenvolvedores não conseguem usar esses novos recursos, porque os sites e aplicativos em que trabalham precisam ser compatíveis com os navegadores antigos, como o IE6.

Então, o que acontece se você tirar o cinto? Permita-se usar todos e quaisquer novos recursos que você gosta? Viva um pouco, enlouqueça, use recursos estranhos que apenas 1% dos usuários poderão tirar proveito?

Obviamente, com recursos ilimitados e a capacidade de conversar com um servidor, você pode fazer todo tipo de coisa - carregar megabytes de código, bibliotecas e vídeos etc. - mas os desafios não são muito interessantes sem restrições. A principal restrição para este concurso é: o que você pode fazer em um único URI de 4k, independente e independentedata:? Independente significa que não deve se referir a nenhum recurso externo, conectar-se a qualquer servidor usando WebSockets ou XHR ou qualquer coisa do tipo. Se você deseja incorporar recursos como PNGs ou MP3s, sinta-se à vontade para incluir URIs de dados em seus URIs de dados ou crie outra maneira inteligente de incorporar sub-recursos. 4k significa 4096 bytes, texto ASCII codificado corretamente em URI (você pode usar um URI de dados codificados em base64, se preferir, para evitar a codificação de URI, mas geralmente o texto codificado em URI será menor que o base64 para texto sem formatação).

Para inspirar, o tema do concurso é memes do StackOverflow . Crie um jogo de justos de unicórnios, um gerador de fatos Jon Skeet, um programa de desenho baseado em círculos à mão livre ou qualquer coisa a ver com um dos populares memes StackOverflow e meta.so.

Eu incentivaria entradas interativas de alguma maneira; não apenas uma animação simples ou uma imagem estática, eles devem responder à entrada do usuário, seja através de eventos, passagem do cursor do mouse, rolagem, redimensionamento da janela do navegador ou de qualquer outra maneira que você possa imaginar. Este não é um requisito difícil, no entanto; grandes demonstrações que não são interativas serão consideradas, embora a interatividade seja a preferida.

Sua entrada deve ser executada em pelo menos uma versão pública de pelo menos um dos cinco principais navegadores (IE, Firefox, Chrome, Safari, Opera). Somente liberações de linha principal (não compiladas a partir de ramificações ou compilações que exigem correções), sem configurações especiais, plug-ins ou qualquer outra coisa que não vem com o navegador de ações são permitidas. Compilações noturnas, betas e candidatos a lançamento são bons. Especifique em sua entrada com quais navegadores você testou sua entrada. Não há limitações sobre quais tecnologias você pode usar dentro dessas restrições; você pode fazer uma animação SVG pura, uma animação CSS pura, algo em JavaScript usando WebGL ou heck, até algo que use XML e XSLT se isso lhe agradar. Se você pode transformá-lo em um URI de dados válido, sem dependências externas, e obter um navegador para executá-lo, é um jogo justo.

To add to the competition here, on Monday, March 21, I will open a bounty on this question. How can I afford a bounty when I have only 101 rep? Well, all rep I gain from upvotes to this question between now and Monday will go into the bounty (up to the limit of 500 allowed for a single bounty; it would be pretty hard for me to hit that limit, though, given the rep cap). Entries will be accepted for 6 days after that; all entries must be in at least 24 hours before the bounty expires, to give me time to check them all out and evaluate them. At that point, I will accept the highest voted answer, and give the bounty to my favorite answer (which may or may not be the same as the highest voted). My criteria for awarding the bounty will include beauty, fun, clever technique, interesting use of new features, interactivity, and size. People should vote based on any criteria they want, as long as the entries meet the rules.

Aqui estão algumas fontes de inspiração para você começar:

• Experiências do Chrome , uma coleção de demonstrações da moderna plataforma da web
• Mozilla Hacks , um blog sobre a moderna plataforma web com muitas demos de novos recursos no Firefox 4
• JS1k , um concurso para demonstrações de 1k em JavaScript
• 10k Apart , um webapp no ​​concurso 10k
• gl64k , um concurso de demonstração atualmente em execução para demonstrações de 64k WebGL
• Shader Toy , um conjunto de demos sobre o que você pode fazer com os shaders WebGL

Formato para entradas:

Nome da entrada

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

Funciona no Firefox 4 RC, Chrome 10 e Opera 11

Descrição da sua entrada; o que faz, por que é legal, que técnicas inteligentes você usou.

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

Quaisquer créditos para inspirações, qualquer código que você possa ter emprestado, etc.

(StackExchange parece não aceitar URIs de dados em links, portanto, você precisará incorporá-lo diretamente em uma <pre>tag)

SO meme: Tudo é um meme

Tudo é um meme. disse o suficiente.

Jogo da 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 é o jogo da vida de Conway, escrito por mim mesmo para HTML5 com canvas e CSS3. Escrevi por diversão durante o período da competição 10K Apart, mas não a enviei para a competição.

A versão codificada em Base64 abrange mais de 4,61 KB de dados, enquanto a versão original é ~ 3543 bytes.

Para compactar o tamanho : código Javascript minificado pelo compressor on-line da YUI e depois pelo empacotador de Dean Edwards . Código CSS reduzido pelo compressor online YUI . Usa a biblioteca jQuery da Biblioteca da API do Google. HTML5 e CSS3 válidos (versão experimental do validador w3).

Jogar:

• Caixa preta representa uma célula viva, branco representa célula morta.
• Clique em uma caixa para marcar uma célula ativa, clique novamente para marcá-la como morta.
• Pressione <Start>para executar a simulação, <Stop>pausar e <Next>mostrar o próximo passo
• É incrível no Internet Explorer 9, Firefox 4 (e Firefox 3 também), Safari 5 e Google Chrome.

A versão legível por humanos (os robôs devem morrer):

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

Uma aula de história:

1. Modificado para remover a dependência do jQuery, bem como codificar em URI todos os espaços. Código aprimorado de várias maneiras (das quais não me lembro).
2. Corrigido o erro no cálculo de vizinhos vivos e refatorado algum código para reduzir o tamanho.

Desculpe desenterrar um tópico antigo, mas vi esse desafio na barra lateral e simplesmente não pude resistir. Não me importo que o desafio tenha acabado, foi divertido descobrir alguma coisa.

Talvez possamos ter outra rodada?

Enfim, minha submissão:

Editar

Desculpe desenterrar isso de novo , mas estava me incomodando há anos que eu não conseguia isso com menos de 1 KB. Agora eu consegui!

Cubo sombreado interativo:

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>

Mova o mouse.

Funciona no Chrome (18.algo, mas deve funcionar nos mais recentes).

Joguei muito bem isso, salvei alguns personagens usando um truque que achei bem legal: digamos que você tenha o seguinte:

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

caracteres podem ser salvos retornando a função dentro de si e fazendo o seguinte:

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

A economia depende de quantas chamadas de função você possui. Isso provavelmente é melhor para ofuscação do que para golfe.

Também salvei um personagem substituindo 1000por 1e4, dando à Mathclasse e algumas de suas funções aliases. Usando variáveis ​​para seqüências de caracteres repetidas (é bastante difícil encontrar algumas dessas opções). Além disso, eu tinha a palavra styleno meu código algumas vezes; alguns deles eram strings e outros eram identificadores como element.style.whatever. Atribuir a string a uma variável ( D='style) me permitiu substituir as strings por De substituir os identificadores dessa maneira element[D].whatever.

Última edição: desculpe trazer um comp antigo, mas algumas idéias de como encurtar isso vieram até mim!

JavaScript 489 chars

Isso joga Adivinha um jogo de números.

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>

Eu trabalhei com 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>