Bounty è finita, thephpdeveloper vince con Conway's Game of Life

La piattaforma web oggi sta avanzando rapidamente. Caratteristiche come le animazioni CSS3 , le trasformazioni , ombre e gradienti , <canvas>, <audio>e <video>tag, SVG , WebGL , e molti altri media che si può fare molto di più nel browser, e in molto meno codice, che mai prima. Naturalmente, molti sviluppatori non riescono a utilizzare queste nuove funzionalità, perché i siti e le applicazioni su cui lavorano devono essere retrocompatibili con i browser antichi e naufraghi come IE6.

Quindi, cosa succede se si toglie l'imbracatura? Ti permetti di utilizzare tutte le nuove funzionalità che ti piacciono? Vivi un po ', impazzisci, usa strane funzionalità all'avanguardia che solo l'1% dei tuoi utenti sarà in grado di sfruttare?

Ovviamente, con risorse illimitate e la capacità di parlare con un server, puoi fare qualsiasi cosa - caricare megabyte di codice, librerie e video e così via - ma le sfide non sono molto interessanti senza vincoli. Il principale vincolo per questo concorso è: cosa puoi fare in un singolo URI 4k autonomodata:? Indipendente significa che non deve fare riferimento a risorse esterne, connettersi a server utilizzando WebSocket o XHR o qualsiasi altra cosa del genere. Se vuoi incorporare risorse come PNG o MP3, sentiti libero di includere URI di dati nel tuo URI di dati o trova un altro modo intelligente di incorporare risorse secondarie. 4k significa 4096 byte, correttamente codificato URI, testo ASCII (è possibile utilizzare un URI di dati codificati base64 se si sceglie, per evitare la codifica URI, ma di solito il testo codificato URI sarà più piccolo di base64 per il testo normale).

Per fornire ispirazione, il tema del concorso sono i meme StackOverflow . Crea un gioco unicorno, un generatore di fatti di Jon Skeet, un programma di disegno basato sul cerchio a mano libera o qualsiasi cosa abbia a che fare con uno dei popolari memo StackOverflow e meta.so.

Incoraggerei le voci interattive in qualche modo; non solo una semplice animazione o un'immagine statica, dovrebbero rispondere all'input dell'utente, attraverso eventi, passaggio del mouse CSS, scorrimento, ridimensionamento della finestra del browser o qualsiasi altro modo in cui ti venga in mente. Questo non è un requisito difficile, però; saranno prese in considerazione grandi demo che non sono interattive, sebbene l'interattività sarebbe preferita.

La tua voce deve essere eseguita in almeno una versione pubblica di almeno uno dei 5 principali browser (IE, Firefox, Chrome, Safari, Opera). Sono consentite solo le versioni mainline (non build da rami o build che richiedono patch), senza impostazioni di configurazione speciali, plug-in o qualsiasi altra cosa che non viene fornita con il browser stock. Build notturni, beta e candidati al rilascio vanno bene. Specifica nella tua voce con quali browser hai testato la tua voce. Non ci sono limiti su quali tecnologie è possibile utilizzare all'interno di tali vincoli; puoi fare una pura animazione SVG, una pura animazione CSS, qualcosa in JavaScript usando WebGL, o diamine, anche qualcosa che usa XML e XSLT se questo colpisce la tua fantasia. Se riesci a inserirlo in un URI di dati valido, senza dipendenze esterne e ottenere un browser per eseguirlo, è un gioco equo.

Per aggiungere al concorso qui, lunedì 21 marzo, aprirò una taglia su questa domanda. Come posso permettermi una taglia quando ho solo 101 rappresentanti? Bene, tutto il rappresentante che ottengo dai voti a questa domanda tra ora e lunedì andrà nella taglia (fino al limite di 500 consentito per una sola taglia; sarebbe piuttosto difficile per me raggiungere quel limite, però, dato il rappresentante cap). Le iscrizioni saranno accettate per 6 giorni successivi; tutte le iscrizioni devono avvenire almeno 24 ore prima della scadenza della taglia, per darmi il tempo di controllarle tutte e valutarle. A quel punto, accetterò la risposta più votata e darò la grazia alla mia risposta preferita (che può essere o meno la stessa della più votata). I miei criteri per l'assegnazione della taglia includeranno bellezza, divertimento, tecnica intelligente, uso interessante di nuove funzionalità, interattività e dimensioni.

Ecco alcune fonti di ispirazione, per iniziare:

• Chrome Experiments , una raccolta di dimostrazioni della moderna piattaforma web
• Mozilla Hacks , un blog sulla moderna piattaforma web con molte demo di nuove funzionalità in Firefox 4
• JS1k , un concorso per demo JavaScript 1k
• 10k Apart , una webapp in contest 10k
• gl64k , un contest demo attualmente in corso per demo WebGL 64k
• Shader Toy , una serie di demo di cosa puoi fare con gli shader WebGL

Formato per le voci:

Nome della voce

Dati: text / html, il tuo% 20data% 20URI

Funziona con Firefox 4 RC, Chrome 10 e Opera 11

Descrizione della voce; cosa fa, perché è pulito, quali tecniche intelligenti hai usato.

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

Qualsiasi credito per ispirazioni, qualsiasi codice da cui potresti aver preso in prestito, ecc.

(StackExchange sembra non accettare URI di dati nei link, quindi dovrai incorporarlo direttamente in un <pre>tag)

Memo SO: tutto è un meme

Tutto è un meme. è stato detto abbastanza.

Conway's Game of Life, HTML5 + CSS3 + JS,

3.543 3.561 3.555 byte

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>

Questo è il gioco della vita di Conway scritto da me per HTML5 con canvas e CSS3. L'ho scritto per divertimento durante il periodo della competizione 10K Apart ma non l'ho presentato per la competizione.

La versione codificata Base64 si estende su 4,61 KB di dati, mentre la versione originale è ~ 3543 byte.

Per comprimere le dimensioni : codice Javascript minimizzato dal compressore online YUI , quindi dal packer di Dean Edwards . Codice CSS minimizzato dal compressore online YUI . Utilizza la libreria jQuery dalla Libreria API di Google. HTML5 e CSS3 validi (versione sperimentale del validatore w3).

Giocare:

• La scatola nera rappresenta una cellula viva, il bianco rappresenta la cellula morta.
• Fai clic su una casella per contrassegnare una cella attiva, fai di nuovo clic per contrassegnarla come morta.
• Premere <Start>per eseguire la simulazione, <Stop>mettere in pausa e <Next>mostrare il passaggio successivo
• Funziona alla grande su Internet Explorer 9, Firefox 4 (e anche Firefox 3), Safari 5 e Google Chrome.

La versione leggibile dall'uomo (i robot devono morire):

<!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 lezione di storia:

1. Modificato per rimuovere la dipendenza da jQuery e codificare l'URI in tutti gli spazi. Codice migliorato in molti modi (di cui non ricordo).
2. Bug risolto nel calcolo dei vicini vivi e refactored del codice per ridurne le dimensioni.

Mi dispiace scavare un vecchio thread, ma ho visto questa sfida sulla barra laterale e non ho potuto resistere. Non mi dispiace che la sfida sia davvero finita, è stato divertente inventare qualcosa.

Forse potremmo avere un altro round?

Comunque, la mia presentazione:

modificare

Mi dispiace scavarlo di nuovo , ma per anni mi ha infastidito il fatto di non poterlo ottenere sotto 1KB. Ora l'ho fatto!

Cubo interattivo ombreggiato:

960 987 1082 1156 1182 1667 1587 byte !, 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>

Muovi il mouse.

Funziona in Chrome (18.something, ma dovrebbe funzionare su quelli più recenti).

Ho giocato a golf abbastanza bene, ho salvato alcuni personaggi usando un trucco che pensavo fosse abbastanza bello: supponi di avere il seguente:

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

i personaggi possono essere salvati restituendo la funzione al suo interno e facendo quanto segue:

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

Il risparmio dipende da quante chiamate di funzione hai. Questo è probabilmente meglio per l'offuscamento piuttosto che per il golf.

Ho anche salvato un personaggio sostituendolo 1000con 1e4, dando alla Mathclasse, e alcune delle sue funzioni, alias. Utilizzo di variabili per stringhe ripetute (abbastanza difficile trovare alcuni di questi salvataggi). Inoltre, ho avuto la parola stylenel mio codice alcune volte; alcuni erano stringhe e altri erano identificatori come element.style.whatever. L'assegnazione della stringa a una variabile ( D='style) mi ha permesso di sostituire le stringhe con De di sostituire gli identificatori in questo modo element[D].whatever.

Ultima modifica: scusami se ho usato un vecchio comp ', ma alcune idee su come accorciarlo sono venute da me!

JavaScript 489 caratteri

Questo gioca a Indovina un numero.

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>

L'ho risolto con questo codice:

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