Bounty się skończyło, phpdeveloper wygrywa w Conway's Game of Life

Platforma internetowa rozwija się dziś w szybkim tempie. Funkcje, takie jak animacje CSS3 , transformacje , cienie i gradienty , <canvas>, <audio>i <video>tagi, SVG , WebGL i wiele więcej znaczy, że można zrobić o wiele więcej w przeglądarce, aw znacznie mniej kodu niż kiedykolwiek wcześniej. Oczywiście wielu programistów nie korzysta z tych nowych funkcji, ponieważ witryny i aplikacje, nad którymi pracują, muszą być kompatybilne wstecz ze starymi, zjadanymi przez mole przeglądarkami, takimi jak IE6.

Co się stanie, jeśli zdejmiesz uprząż? Pozwolić sobie na korzystanie z dowolnych nowych funkcji, które lubisz? Żyj trochę, oszalej, używaj dziwnych, najnowocześniejszych funkcji, z których tylko 1% użytkowników będzie mógł skorzystać?

Oczywiście, mając nieograniczone zasoby i możliwość komunikowania się z serwerem, możesz robić różne rzeczy - ładować megabajty kodu, bibliotek i filmów itd. - ale wyzwania nie są bardzo interesujące bez ograniczeń. Głównym ograniczeniem dla tego konkursu jest: co można zrobić w pojedynczym, niezależnym, 4k data:URI? Samowystarczalny oznacza, że ​​nie może odnosić się do żadnych zasobów zewnętrznych, łączyć się z żadnym serwerem za pomocą WebSockets lub XHR ani niczego w tym rodzaju. Jeśli chcesz osadzić zasoby, takie jak PNG lub MP3, możesz dołączyć identyfikatory URI danych do identyfikatora URI danych lub wymyślić jakiś inny sprytny sposób osadzania sub-zasobów. 4k oznacza 4096 bajtów, poprawnie zakodowany URI, tekst ASCII (możesz użyć URI zakodowanego w base64, jeśli chcesz, aby uniknąć kodowania URI, ale zwykle tekst zakodowany w URI będzie mniejszy niż base64 dla zwykłego tekstu).

Aby zapewnić inspirację, tematem konkursu są memy StackOverflow . Stwórz grę z jednorożcem, generator faktów Jona Skeeta, program do rysowania oparty na kółkach odręcznych lub cokolwiek wspólnego z jednym z popularnych memów StackOverflow i meta.so.

Chciałbym zachęcić wpisy, które są w jakiś sposób interaktywne; nie tylko zwykła animacja lub obraz statyczny, powinny reagować na dane wejściowe użytkownika, czy to poprzez zdarzenia, najechanie kursorem CSS, przewijanie, zmianę rozmiaru okna przeglądarki, czy w dowolny inny sposób. Nie jest to jednak trudne wymaganie; zostaną wzięte pod uwagę świetne demonstracje, które nie są interaktywne, chociaż preferowana byłaby interaktywność.

Wpis musi być uruchomiony w co najmniej jednej publicznej wersji co najmniej jednej z 5 głównych przeglądarek (IE, Firefox, Chrome, Safari, Opera). Dozwolone są tylko główne wersje (nie kompilacje z gałęzi lub kompilacje wymagające łatek), bez specjalnych ustawień konfiguracji, wtyczek lub czegokolwiek, co nie jest dostarczane z przeglądarką podstawową. Nocne wersje, bety i kandydaci do wydania są w porządku. Podaj we wpisie, z którymi przeglądarkami testowałeś swój wpis. Nie ma żadnych ograniczeń dotyczących tego, jakich technologii można użyć w ramach tych ograniczeń; możesz zrobić czystą animację SVG, czystą animację CSS, coś w JavaScript za pomocą WebGL, lub cholera, nawet coś, co używa XML i XSLT, jeśli ci się to podoba. Jeśli umieścisz go w poprawnym identyfikatorze URI danych, bez zewnętrznych zależności, i uruchomisz przeglądarkę, to jest to uczciwa gra.

Aby dodać do konkursu tutaj, w poniedziałek, 21 marca, otworzę nagrodę za to pytanie. Jak mogę sobie pozwolić na nagrodę, gdy mam tylko 101 powtórzeń? Cóż, wszyscy przedstawiciele, których zdobędę w wyniku głosowania na to pytanie od teraz do poniedziałku, przejdą na nagrodę (do limitu 500 dozwolonych na jedną nagrodę; byłoby mi jednak bardzo trudno przekroczyć ten limit, biorąc pod uwagę przedstawiciela czapka). Zgłoszenia będą przyjmowane przez 6 dni później; wszystkie zgłoszenia muszą upłynąć co najmniej 24 godziny przed wygaśnięciem nagrody, aby dać mi czas na ich sprawdzenie i ocenę. W tym momencie zaakceptuję najwyższą głosowaną odpowiedź i dam nagrodę mojej ulubionej odpowiedzi (która może, ale nie musi być taka sama jak najwyższa głosowana). Moje kryteria przyznawania nagrody będą obejmowały piękno, zabawę, sprytną technikę, ciekawe wykorzystanie nowych funkcji, interaktywność i rozmiar.

Oto kilka źródeł inspiracji na początek:

• Eksperymenty z Chrome - zbiór demonstracji nowoczesnej platformy internetowej
• Mozilla Hacks , blog o nowoczesnej platformie internetowej z wieloma prezentacjami nowych funkcji w Firefoksie 4
• JS1k , konkurs na demonstracje 1k JavaScript
• 10k Apart , aplikacja internetowa w konkursie 10k
• gl64k , obecnie trwający konkurs demo dla 64k wersji demonstracyjnych WebGL
• Shader Toy , zestaw demonstracji tego, co możesz zrobić z modułami cieniującymi WebGL

Format wpisów:

Nazwa wpisu

data: text / html, Twój% 20data% 20URI

Działa w Firefox 4 RC, Chrome 10 i Opera 11

Opis twojego wpisu; co robi, dlaczego jest schludny, jakich sprytnych technik użyłeś.

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

Wszelkie kredyty za inspiracje, dowolny kod, który mógłbyś pożyczyć itp.

(Wygląda na to, że StackExchange nie akceptuje identyfikatorów URI danych w linkach, więc musisz osadzić je bezpośrednio w <pre>tagu)

SO meme: Wszystko jest memem

Wszystko jest memem. wystarczająco powiedziane.

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

3543 3561 3555 bajtów

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>

To jest Gra życia Conwaya napisana dla HTML5 z płótnem i CSS3. Napisałem to dla zabawy podczas konkursu 10K Apart, ale nie zgłosiłem tego do konkursu.

Wersja zakodowana w standardzie Base64 zajmuje ponad 4,61 KB danych, podczas gdy oryginalna wersja ma ~ 3543 bajtów.

Aby skompresować rozmiar : kod Javascript zminimalizowany przez kompresor internetowy YUI , a następnie przez pakera Deana Edwardsa . Kod CSS zminimalizowany przez kompresor internetowy YUI . Korzysta z biblioteki jQuery z biblioteki Google API Library. Poprawny HTML5 i CSS3 (eksperymentalna wersja walidatora w3).

Grać:

• Czarna skrzynka reprezentuje żywą komórkę, biała oznacza martwą komórkę.
• Kliknij pole, aby zaznaczyć aktywną komórkę, kliknij ponownie, aby zaznaczyć martwe.
• Naciśnij, <Start>aby uruchomić symulację, <Stop>wstrzymać i <Next>wyświetlić następny krok
• Działa świetnie w Internet Explorer 9, Firefox 4 (i Firefox 3 również), Safari 5 i Google Chrome.

Wersja czytelna dla ludzi (roboty umrą):

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

Klasa z historii:

1. Zmodyfikowany w celu usunięcia zależności od jQuery oraz kodowania URI wszystkich spacji. Ulepszony kod na wiele sposobów (o których nie pamiętam).
2. Naprawiono błąd w obliczeniach żywych sąsiadów i zmieniono kod, aby zmniejszyć rozmiar.

Przepraszam, że wykopałem stary wątek, ale widziałem to wyzwanie na bocznym pasku i po prostu nie mogłem się oprzeć. Nie mam nic przeciwko temu, że wyzwanie naprawdę się skończyło, fajnie było wymyślić coś.

Może moglibyśmy mieć kolejną rundę?

W każdym razie moje zgłoszenie:

Edytować

Przepraszam, że wykopałem to jeszcze raz , ale od wieków przeszkadzało mi, że nie mogłem dostać tego poniżej 1 KB. Teraz to zrobiłem!

Interaktywny, zacieniony moduł:

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

Porusz myszką.

Działa w Chrome (18. Coś, ale powinno działać na najnowszych).

Grałem w to całkiem dobrze, uratowałem kilka postaci, wykorzystując sztuczkę, która moim zdaniem była całkiem fajna: Powiedz, że masz następujące rzeczy:

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

znaki można zapisać, zwracając funkcję w sobie i wykonując następujące czynności:

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

Oszczędności zależą od liczby wywołań funkcji. Jest to prawdopodobnie lepsze w przypadku zaciemnienia niż gry w golfa.

Zapisałem również postacie, zastępując 1000je 1e4, podając Mathklasie i niektóre jej funkcje, aliasy. Używanie zmiennych dla powtarzających się łańcuchów (dość trudno znaleźć niektóre z tych zapisów). Miałem styleteż kilka razy słowo w kodzie; niektóre z nich były łańcuchami, a inne podobnymi do identyfikatorów element.style.whatever. Przypisanie ciągu do zmiennej ( D='style) pozwoliło mi zamienić ciągi na Di tak zmienić identyfikatory element[D].whatever.

Ostatnia edycja: przepraszam, że przywołałem starą komp.

JavaScript 489 znaków

Gra w Zgadnij liczbę.

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>

Opracowałem to z tym kodem:

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