Баунти окончен, разработчик php выигрывает с игрой Конвея о жизни

Сегодня веб-платформа развивается быстрыми темпами. Такие характеристики , как CSS3 анимации , преобразования , теней и градиентов , <canvas>, <audio>и <video>теги, SVG , WebGL , и многое другое означают , что вы можете сделать гораздо больше , в браузере, и в гораздо меньше кода, чем когда - либо прежде. Конечно, многие разработчики не могут использовать эти новые функции, потому что сайты и приложения, над которыми они работают, должны быть обратно совместимы с древними, отказавшимися от мобов браузерами, такими как IE6.

Итак, что произойдет, если вы снимите ремень? Позвольте себе использовать любые новые функции, которые вам нравятся? Живите немного, сходите с ума, используйте странные передовые функции, которыми только 1% ваших пользователей смогут воспользоваться?

Конечно, имея неограниченные ресурсы и возможность общаться с сервером, вы можете делать все, что угодно - загружать мегабайты кода, библиотеки, видео и т. Д., - но проблемы не очень интересны без ограничений. Основное ограничение для этого конкурса: что вы можете сделать в одном автономном 4k data:URI? Автономный означает, что он не должен ссылаться на какие-либо внешние ресурсы, подключаться к каким-либо серверам, используя WebSockets или XHR, или что-либо в этом роде. Если вы хотите встроить такие ресурсы, как PNG или MP3, не стесняйтесь включать URI данных в ваш URI данных или предложите какой-нибудь другой умный способ встраивания подресурсов. 4k означает 4096 байт, должным образом закодированный URI, текст ASCII (вы можете использовать кодированный URI URI данных, если вы выберете, чтобы избежать кодирования URI, но обычно кодированный URI текст будет меньше, чем base64 для обычного текста).

Для вдохновения тема конкурса - мемы StackOverflow . Создайте игру, в которой участвуют единороги, генератор фактов Джона Скита, программа для рисования на основе кругов от руки или что-нибудь, связанное с одним из популярных мемов StackOverflow & meta.so.

Я хотел бы поощрять записи, которые являются интерактивными в некотором роде; не просто анимация или статическое изображение, они должны реагировать на ввод пользователя, будь то события, наведение курсора CSS, прокрутка, изменение размера окна браузера или любой другой способ, который вы можете себе представить. Это не жесткое требование; будут рассмотрены отличные демо, которые не являются интерактивными, хотя интерактивность будет предпочтительнее.

Ваша запись должна быть запущена хотя бы в одном публичном выпуске хотя бы одного из 5 основных браузеров (IE, Firefox, Chrome, Safari, Opera). Разрешены только основные выпуски (не сборки из веток или сборок, которые требуют исправлений), без специальных настроек конфигурации, плагинов или чего-либо еще, что не поставляется со стандартным браузером. Ночные сборки, бета-версии и релиз-кандидаты - это нормально. Пожалуйста, укажите в вашей записи, с какими браузерами вы проверяли вашу запись. Нет никаких ограничений на то, какие технологии вы можете использовать в рамках этих ограничений; Вы можете сделать чистую SVG-анимацию, чистую CSS-анимацию, что-то в JavaScript с использованием WebGL или, черт возьми, даже что-то, что использует XML и XSLT, если вам это нравится. Если вы можете втиснуть его в действительный URI данных без внешних зависимостей и получить браузер для его запуска, это будет честной игрой.

Чтобы добавить к конкурсу здесь, в понедельник, 21 марта, я открою награду по этому вопросу. Как я могу позволить себе вознаграждение, когда у меня всего 101 представитель? Что ж, все повторы, которые я получу от ответов на этот вопрос в промежутке между сегодняшним днем ​​и понедельником, перейдут в награду (до 500, разрешенных для одной награды; мне было бы довольно трудно достичь этого предела, хотя, учитывая представителя крышка). Заявки принимаются в течение 6 дней после этого; Все заявки должны быть не менее чем за 24 часа до истечения срока действия награды, чтобы у меня было время проверить их все и оценить. В этот момент я приму ответ с наибольшим количеством голосов и назначу награду за мой любимый ответ (который может совпадать или не совпадать с голосом с наибольшим количеством голосов). Мои критерии присуждения награды включают красоту, веселье, умную технику, интересное использование новых функций, интерактивность и размер.

Вот несколько источников вдохновения для начала:

• Chrome Experiment , коллекция демонстраций современной веб-платформы
• Mozilla Hacks , блог о современной веб-платформе со множеством демонстраций новых функций в Firefox 4
• JS1k , конкурс для демонстраций JavaScript 1k
• 10k Apart , веб-приложение в конкурсе 10k
• gl64k , демо-конкурс, в настоящее время проводится для демонстраций 64k WebGL
• Shader Toy , набор демонстраций того, что вы можете сделать с помощью шейдеров WebGL

Формат для записей:

Название записи

данные: текст / html, Ваш% 20data% 20URI

Работает в Firefox 4 RC, Chrome 10 и Opera 11

Описание вашей записи; что это делает, почему это аккуратно, какие умные методы вы использовали.

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

Любые кредиты для вдохновения, любой код, который вы могли бы позаимствовать, и т. Д.

(StackExchange, по-видимому, не принимает URI данных в ссылках, поэтому вам необходимо встроить его непосредственно в <pre>тег)

ТАМ мем: все мемы

Все мем. достаточно сказано.

Игра жизни Конвея, HTML5 + CSS3 + JS,

3,543 3,561 3,555 байт

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>

Это игра жизни Конвея, написанная мной для HTML5 с использованием canvas и CSS3. Я написал это для удовольствия во время соревнования 10K Apart, но я не представил это для соревнования.

Версия в кодировке Base64 занимает более 4,61 КБ данных, тогда как исходная версия составляет ~ 3543 байта.

Чтобы сжать размер : код Javascript минимизирован онлайн-компрессором YUI , затем упаковщиком Дина Эдвардса . Код CSS минимизирован онлайн-компрессором YUI . Использует библиотеку jQuery из библиотеки Google API. Действительный HTML5 и CSS3 (экспериментальная версия валидатора w3).

Играть:

• Черный ящик представляет живую клетку, белый представляет мертвую клетку.
• Нажмите на поле, чтобы отметить живую ячейку, нажмите еще раз, чтобы пометить ее как мертвую.
• Нажмите, <Start>чтобы запустить симуляцию, <Stop>сделать паузу и <Next>показать следующий шаг
• Отлично работает в Internet Explorer 9, Firefox 4 (и Firefox 3), Safari 5 и Google Chrome.

Версия для чтения человеком (роботы умрут):

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

Урок истории:

1. Модифицировано для удаления зависимости от jQuery, а также URI-кодирования всех пробелов. Улучшен код во многих отношениях (я не могу вспомнить).
2. Исправлена ​​ошибка в подсчете живых соседей и изменен код для уменьшения размера.

Извините, что выкопал старую ветку, но я увидел этот вызов на боковой панели и не смог устоять. Я не возражаю, что испытание действительно закончилось, было просто интересно что-то придумать.

Может быть, мы могли бы провести еще один раунд?

Во всяком случае, мое представление:

редактировать

Извините, что выкопал это снова , но меня беспокоило целую вечность, что я не мог получить это под 1 КБ. Теперь я сделал это!

Интерактивный, Затененный Куб:

960 987 1082 1156 1182 1667 1587 байт !, 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>

Двигай мышью.

Работает в Chrome (18. что-то, но должно работать на самых последних).

Я играл в гольф очень хорошо, я спас несколько персонажей, используя трюк, который мне показался довольно крутым: скажем, у вас есть следующее:

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

Символы можно сохранить, вернув функцию внутри себя и выполнив следующие действия:

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

Экономия зависит от того, сколько у вас вызовов функций. Это, вероятно, лучше для запутывания, чем для игры в гольф.

Я также спас персонаж, заменив 1000с 1e4, давая Mathкласс, и некоторые из его функций, псевдонимов. Использование переменных для повторяющихся строк (довольно сложно найти некоторые из этих сохранений). Кроме того, у меня было слово styleв моем коде несколько раз; некоторые из них были строками, а другие - идентификаторами element.style.whatever. Присвоение строки переменной ( D='style) позволило мне заменить строки Dна идентификаторы и заменить их следующим образом element[D].whatever.

Последнее редактирование: извините, что вырастил старый comp ', но некоторые идеи, как сократить это только пришли ко мне!

JavaScript 489 символов

Это играет игру Угадай число.

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>

Я работал с этим кодом:

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