Баунті закінчився, thephpdeveloper виграє з грою життя Конвея

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

Отже, що станеться, якщо зняти джгути? Дозволити собі використовувати будь-які нові функції, які вам подобаються? Трохи живіть, божевільний, використовуйте дивні функції кровотоку, якими лише 1% ваших користувачів зможуть скористатися?

Звичайно, маючи необмежені ресурси та можливість спілкуватися з сервером, ви можете робити всілякі речі - завантажувати мегабайти коду, бібліотеки та відеоматеріали тощо - але проблеми не є дуже цікавими без обмежень. Основне обмеження для цього конкурсу полягає в тому, що ви можете зробити в одному, автономному URI 4kdata:? Автономний означає, що він не повинен посилатися на будь-які зовнішні ресурси, підключатися до будь-яких серверів за допомогою WebSockets або XHR або будь-якого подібного. Якщо ви хочете вставити такі ресурси, як PNG або MP3, сміливо додайте URI даних у свій URI даних або запропонуйте інший розумний спосіб вбудовування субресурсів. 4k означає 4096 байт, правильно кодований URI текст ASCII (ви можете використовувати URI даних, що кодують base64, якщо ви вирішите, щоб уникнути кодування URI, але зазвичай текст, кодований URI, буде меншим, ніж base64 для простого тексту).

Для натхнення тема конкурсу - меми StackOverflow . Створіть гри-єдиноріг, генератор фактів Jon Skeet, програму малювання на основі від руки чи будь-що, що стосується одного з популярних мемів 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 на 1 к
• 10k Апарт , веб-конкурс у 10k
• gl64k , демонстраційний конкурс, який зараз триває для 64k демонстрацій WebGL
• Shader Toy - набір демонстрацій того, що ви можете зробити з шейдерами WebGL

Формат для записів:

Назва запису

дані: текст / html, ваші% 20дані% 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 із полотном та CSS3. Я написав це для розваги в період конкурсу 10K Апарт, але я не подав цього на змагання.

Версія, кодована Base64, охоплює понад 4,61 КБ даних, тоді як оригінальна версія - 3543 байт.

Для стиснення розміру : код Javascript мінімізований інтернет-компресором YUI , а потім пакувальником Dean Edwards . CSS-код, поповнений інтернет-компресором YUI . Використовує бібліотеку jQuery з бібліотеки API 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.

Остання редакція: вибачте, що вийшов старий комп ', але деякі ідеї, як це скоротити, мені просто прийшли!

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>