Bounty selesai, pengembang menang dengan Conway's Game of Life

Platform web saat ini bergerak maju dengan kecepatan tinggi. Fitur seperti CSS3 animasi , transformasi , drop bayangan dan gradien , <canvas>, <audio>dan <video>tag, SVG , WebGL , dan banyak lagi berarti bahwa Anda dapat melakukan jauh lebih banyak dalam browser, dan dalam kode jauh lebih sedikit, daripada sebelumnya. Tentu saja, banyak pengembang tidak dapat menggunakan fitur-fitur baru itu, karena situs dan aplikasi yang mereka kerjakan harus kompatibel dengan peramban kuno yang dimakan ngengat seperti IE6.

Jadi, apa yang terjadi jika Anda melepas harness? Izinkan diri Anda menggunakan semua dan semua fitur baru yang Anda sukai? Hiduplah sedikit, gila, gunakan fitur-fitur aneh yang ujungnya hanya bisa dimanfaatkan oleh 1% pengguna Anda?

Tentu saja, dengan sumber daya yang tidak terbatas dan kemampuan untuk berbicara dengan server, Anda dapat melakukan segala hal — memuat megabyte kode dan pustaka dan video, dan sebagainya — tetapi tantangan tidak terlalu menarik tanpa kendala. Kendala utama untuk kontes ini adalah: apa yang dapat Anda lakukan dalam URI tunggal, mandiri, 4kdata:? Mandiri artinya tidak boleh merujuk ke sumber daya eksternal, terhubung ke server menggunakan WebSockets atau XHR, atau semacamnya. Jika Anda ingin menanamkan sumber daya seperti PNG atau MP3, jangan ragu untuk memasukkan data URI ke dalam data Anda, atau temukan cara lain yang cerdas untuk menanamkan sub-sumber daya. 4k berarti 4096 byte, teks ASCII yang disandikan dengan URI dengan benar (Anda dapat menggunakan URI data yang disandikan base64 jika Anda memilih, untuk menghindari penyandian URI, tetapi biasanya teks yang disandikan URI akan lebih kecil daripada base64 untuk teks biasa).

Untuk memberikan inspirasi, tema kontes ini adalah meme StackOverflow . Buat gim unicorn-jousting, generator fakta Jon Skeet, program menggambar berbasis lingkaran bebas, atau apa pun yang berkaitan dengan salah satu meme StackOverflow & meta.so yang populer.

Saya akan mendorong entri yang interaktif dalam beberapa cara; bukan hanya animasi sederhana atau gambar statis, mereka harus menanggapi input pengguna, baik melalui acara, CSS melayang, menggulir, mengubah ukuran jendela browser, atau cara lain yang dapat Anda pikirkan. Namun ini bukan persyaratan yang sulit; Demo hebat yang tidak interaktif akan dipertimbangkan, meskipun interaktivitas lebih disukai.

Entri Anda harus berjalan di setidaknya satu rilis publik setidaknya satu dari 5 browser utama (IE, Firefox, Chrome, Safari, Opera). Hanya rilis arus utama (bukan bangunan dari cabang atau bangunan yang memerlukan tambalan), tanpa pengaturan konfigurasi khusus, plugin, atau apa pun yang tidak disertakan dengan browser stok diizinkan. Build malam, beta, dan kandidat rilis baik-baik saja. Silakan tentukan di entri Anda dengan browser mana Anda telah menguji entri Anda. Tidak ada batasan pada teknologi apa yang dapat Anda gunakan dalam batasan tersebut; Anda dapat melakukan animasi SVG murni, animasi CSS murni, sesuatu dalam JavaScript menggunakan WebGL, atau heck, bahkan sesuatu yang menggunakan XML dan XSLT jika itu sesuai dengan keinginan Anda. Jika Anda dapat menjejalkannya ke dalam data URI yang valid, tanpa ketergantungan eksternal, dan mendapatkan browser untuk menjalankannya, itu adalah permainan yang adil.

Untuk menambah kompetisi di sini, pada hari Senin, 21 Maret, saya akan membuka hadiah untuk pertanyaan ini. Bagaimana saya bisa mendapatkan hadiah ketika saya hanya memiliki 101 perwakilan? Baiklah, semua perwakilan yang saya peroleh dari upvotes ke pertanyaan ini antara sekarang dan Senin akan masuk ke hadiah (hingga batas 500 diperbolehkan untuk satu hadiah; akan sangat sulit bagi saya untuk mencapai batas itu, meskipun, mengingat rep topi). Entri akan diterima selama 6 hari setelah itu; semua entri harus dalam setidaknya 24 jam sebelum hadiah berakhir, untuk memberi saya waktu untuk memeriksa semuanya dan mengevaluasinya. Pada saat itu, saya akan menerima jawaban dengan suara tertinggi, dan memberikan hadiah kepada jawaban favorit saya (yang mungkin atau mungkin tidak sama dengan yang terpilih tertinggi). Kriteria saya untuk pemberian hadiah akan mencakup keindahan, kesenangan, teknik pintar, penggunaan fitur baru yang menarik, interaktivitas, dan ukuran.

Berikut adalah beberapa sumber inspirasi, untuk membantu Anda memulai:

• Eksperimen Chrome , kumpulan demonstrasi platform web modern
• Mozilla Hacks , sebuah blog tentang platform web modern dengan banyak demo fitur baru di Firefox 4
• JS1k , kontes untuk demo JavaScript 1k
• 10k Apart , webapp dalam kontes 10k
• gl64k , kontes demo yang sedang berjalan untuk demo WebGL 64k
• Shader Toy , serangkaian demo tentang apa yang dapat Anda lakukan dengan shader WebGL

Format untuk entri:

Nama entri

data: teks / html, data Anda 20%% 20URI

Bekerja di Firefox 4 RC, Chrome 10, dan Opera 11

Deskripsi entri Anda; apa fungsinya, mengapa rapi, teknik pintar apa yang Anda gunakan.

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

Kredit untuk inspirasi, kode apa pun yang mungkin Anda pinjam, dll.

(StackExchange tampaknya tidak menerima data URI dalam tautan, jadi Anda harus menyematkannya langsung dalam <pre>tag)

SO meme: Semuanya meme

Semuanya meme. cukup kata.

Game of Life Conway, 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>

Ini adalah Conway's Game of Life yang menulis sendiri untuk HTML5 dengan kanvas dan CSS3. Saya menulisnya untuk bersenang-senang selama periode kompetisi 10K Apart tetapi saya tidak mengirimkan ini untuk kompetisi.

Versi yang disandikan Base64 mencakup lebih dari 4,61KB data, sedangkan versi aslinya ~ 3543 byte.

Untuk mengompresi ukuran : Kode Javascript yang diperkecil oleh YUI online compressor , lalu oleh packer Dean Edwards . Kode CSS diperkecil oleh kompresor online YUI . Menggunakan perpustakaan jQuery dari Google API Library. HTML5 dan CSS3 yang valid (versi eksperimental validator w3).

Bermain:

• Kotak hitam mewakili sel hidup, putih mewakili sel mati.
• Klik pada kotak untuk menandai sel hidup, klik lagi untuk menandainya mati.
• Tekan <Start>untuk menjalankan simulasi, <Stop>untuk menjeda, dan <Next>untuk menunjukkan langkah selanjutnya
• Berjalan luar biasa di Internet Explorer 9, Firefox 4 (dan Firefox 3 juga), Safari 5, dan Google Chrome.

Versi (robot akan mati) yang dapat dibaca manusia:

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

Kelas dalam sejarah:

1. Dimodifikasi untuk menghapus ketergantungan dari jQuery dan juga URI-encoding semua spasi. Kode ditingkatkan dalam banyak cara (yang saya tidak ingat).
2. Memperbaiki bug dalam perhitungan tetangga yang hidup dan refactored beberapa kode untuk mengurangi ukuran.

Maaf untuk menggali utas lama, tetapi saya melihat tantangan ini di bilah samping dan saya tidak bisa menolaknya. Saya tidak keberatan bahwa tantangannya sudah selesai, itu hanya menyenangkan dengan sesuatu.

Mungkin kita bisa mengadakan ronde lagi?

Bagaimanapun, kiriman saya:

Sunting

Maaf untuk menggali ini lagi , tapi sudah lama saya merasa terganggu karena saya tidak bisa mendapatkan ini di bawah 1KB. Sekarang saya sudah melakukannya!

Interaktif, Kubus Berbayang:

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>

Gerakkan mouse Anda.

Bekerja di Chrome (18.sesuatu, tetapi harus bekerja pada yang paling baru).

Saya bermain golf ini dengan cukup baik, saya menyimpan beberapa karakter menggunakan trik yang saya pikir cukup keren: Katakanlah Anda memiliki yang berikut ini:

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

karakter dapat disimpan dengan mengembalikan fungsi di dalam dirinya sendiri dan melakukan hal berikut:

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

Penghematan tergantung pada berapa banyak panggilan fungsi yang Anda miliki. Ini mungkin lebih baik untuk kebingungan daripada bermain golf.

Saya juga menyelamatkan karakter dengan mengganti 1000dengan 1e4, memberikan Mathkelas, dan beberapa fungsi, alias. Menggunakan variabel untuk string berulang (cukup sulit untuk menemukan beberapa simpanan ini). Juga, saya memiliki kata styledalam kode saya beberapa kali; beberapa dari mereka adalah string dan yang lainnya seperti pengidentifikasi element.style.whatever. Menetapkan string ke variabel ( D='style) memungkinkan saya untuk mengganti string dengan Ddan untuk mengganti pengidentifikasi seperti itu element[D].whatever.

Sunting Terbaru: maaf untuk memunculkan comp lama ', tetapi beberapa ide bagaimana mempersingkat ini baru saja datang kepada saya!

JavaScript 489 karakter

Ini memainkan permainan Tebak Angka.

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>

Saya mengatasinya dengan kode ini:

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