Bounty est terminé, thephpdeveloper gagne avec le jeu de la vie de Conway

La plateforme Web avance aujourd'hui à un rythme rapide. Des fonctionnalités telles que des animations CSS3 , se transforme , des ombres portées et des gradients , <canvas>, <audio>et <video>balises, SVG , WebGL , et beaucoup d' autres signifient que vous pouvez faire beaucoup plus dans le navigateur, et dans le code beaucoup moins, que jamais auparavant. Bien entendu, de nombreux développeurs n'utilisent pas ces nouvelles fonctionnalités, car les sites et les applications sur lesquels ils travaillent doivent être rétrocompatibles avec les navigateurs anciens et obsolètes comme IE6.

Alors, que se passe-t-il si vous enlevez le harnais? Autorisez-vous à utiliser toutes les nouvelles fonctionnalités que vous aimez? Vivez un peu, devenez fou, utilisez des fonctionnalités de pointe insolites que seulement 1% de vos utilisateurs pourront utiliser?

Bien sûr, avec des ressources illimitées et la possibilité de parler à un serveur, vous pouvez faire toutes sortes de choses - charger des mégaoctets de code, des bibliothèques et des vidéos, etc. - mais les défis ne sont pas très intéressants sans contraintes. La principale contrainte pour ce concours est la suivante: que pouvez-vous faire dans un seul URI 4k autonomedata:? Autonome, cela signifie qu'il ne doit pas faire référence à des ressources externes, se connecter à des serveurs utilisant WebSockets ou XHR, ou quelque chose du genre. Si vous souhaitez intégrer des ressources telles que des fichiers PNG ou MP3, n'hésitez pas à inclure des URI de données dans votre URI de données ou à proposer un autre moyen intelligent d'intégrer des sous-ressources. 4k signifie 4 096 octets, texte ASCII correctement codé en URI (vous pouvez utiliser un URI de données codé en base64 si vous le souhaitez, pour éviter le codage URI, mais le texte codé en URI est généralement inférieur à base64 pour le texte brut).

Pour inspirer, le thème du concours est constitué des mèmes StackOverflow . Créez un jeu de licorne, un générateur de faits Jon Skeet, un programme de dessin à main levée, ou tout ce qui touche à l'un des célèbres mèmes StackOverflow & meta.so.

J'encourage les entrées qui sont interactives d'une certaine manière; pas seulement une animation ou une image statique, ils doivent réagir aux entrées de l'utilisateur, que ce soit par le biais d'événements, du survol CSS, du défilement, du redimensionnement de la fenêtre du navigateur ou de toute autre manière imaginable. Ce n'est pas une exigence difficile, cependant; les grandes démos qui ne sont pas interactives seront considérées, mais l’interactivité sera privilégiée.

Votre entrée doit fonctionner dans au moins une version publique d'au moins un des 5 principaux navigateurs (IE, Firefox, Chrome, Safari, Opera). Seules les versions principales (sans les branches ou les versions nécessitant des correctifs), sans paramètres de configuration, plug-ins ou tout autre élément non fourni avec le navigateur Stock sont autorisées. Les versions nocturnes, les versions bêta et les candidats à la libération sont acceptables. Veuillez spécifier dans votre entrée les navigateurs avec lesquels vous avez testé votre entrée. Il n'y a pas de limites aux technologies que vous pouvez utiliser dans le cadre de ces contraintes. vous pouvez créer une animation SVG pure, une animation CSS pure, JavaScript en utilisant WebGL, ou même quelque chose qui utilise XML et XSLT si cela vous tente. Si vous pouvez l'intégrer dans un URI de données valide, sans dépendance externe, et obtenir un navigateur pour l'exécuter, c'est un jeu équitable.

Pour ajouter à la concurrence ici, le lundi 21 mars, je vais ouvrir une prime sur cette question. Comment puis-je me permettre une prime quand je n'ai que 101 représentants? Eh bien, tout ce que je gagnerai des votes positifs à cette question d'ici lundi ira dans la prime (jusqu'à un maximum de 500 permis pour une seule prime; il serait assez difficile pour moi d'atteindre cette limite, cependant, étant donné casquette). Les inscriptions seront acceptées pendant 6 jours après cela; toutes les entrées doivent être dans au moins 24 heures avant l'expiration de la prime, pour me donner le temps de les vérifier et de les évaluer. À ce stade, j'accepterai la réponse avec le vote le plus élevé et donnerai la prime à ma réponse préférée (qui peut être identique ou non à la réponse la plus votée). Mes critères pour attribuer la prime comprendront la beauté, l’amusement, une technique intelligente, une utilisation intéressante de nouvelles fonctionnalités, l’interactivité et la taille.

Voici quelques sources d'inspiration pour vous aider à démarrer:

• Chrome Experiments , une collection de démonstrations de la plateforme Web moderne
• Mozilla Hacks , un blog sur la plateforme Web moderne avec de nombreuses démonstrations des nouvelles fonctionnalités de Firefox 4
• JS1k , un concours de démos JavaScript 1k
• 10k Apart , une application Web dans le concours 10k
• gl64k , un concours de démonstration en cours pour les démos WebGL 64k
• Shader Toy , un ensemble de démonstrations de ce que vous pouvez faire avec les shaders WebGL

Format pour les entrées:

Nom de l'entrée

data: text / html, votre% 20data% 20URI

Fonctionne dans Firefox 4 RC, Chrome 10 et Opera 11

Description de votre entrée; Qu'est-ce qu'il fait, pourquoi c'est génial, quelles techniques intelligentes vous avez utilisé.

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

Tout crédit d'inspiration, tout code que vous avez emprunté, etc.

(StackExchange ne semble pas accepter les URI de données dans les liens, vous devez donc l'intégrer directement dans une <pre>balise)

SO meme: Tout est un meme

Tout est un meme. assez dit.

Le jeu de la vie de Conway, HTML5 + CSS3 + JS,

3 543 3 561 3 555 octets

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>

C'est le jeu de la vie de Conway, écrit moi-même pour HTML5 avec canvas et CSS3. Je l'ai écrit pour le plaisir pendant la période du concours 10K Apart mais je ne l'ai pas soumis pour le concours.

La version codée en Base64 couvre plus de 4,61 Ko de données, alors que la version originale est de ~ 3543 octets.

Pour compresser la taille : code Javascript minifié par le compresseur en ligne YUI , puis par le packer de Dean Edwards . Code CSS minifié par le compresseur en ligne YUI . Utilise la bibliothèque jQuery de Google API Library. Valide HTML5 et CSS3 (version expérimentale du validateur w3).

Jouer:

• La boîte noire représente une cellule vivante, le blanc représente la cellule morte.
• Cliquez sur une case pour marquer une cellule vivante, cliquez à nouveau pour la marquer comme morte.
• Appuyez sur <Start>pour exécuter la simulation, <Stop>pour mettre en pause et <Next>pour afficher l'étape suivante.
• Fonctionne à merveille sur Internet Explorer 9, Firefox 4 (et Firefox 3 également), Safari 5 et Google Chrome.

La version lisible par l'homme (les robots doivent mourir):

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

Un cours d'histoire:

1. Modifié pour supprimer la dépendance de jQuery ainsi que pour le codage URI de tous les espaces. Code amélioré à bien des égards (dont je ne me souviens plus).
2. Correction d'un bug dans le calcul des voisins actifs et refactorisation du code pour réduire la taille.

Désolé de creuser un vieux fil, mais j'ai vu ce défi sur la barre latérale et je ne pouvais tout simplement pas résister. Ça ne me dérange pas que le défi soit terminé, c'était amusant de trouver quelque chose.

Peut-être pourrions-nous avoir un autre tour?

Quoi qu'il en soit, ma soumission:

modifier

Désolé de creuser à nouveau , mais cela me dérangeait depuis des lustres que je ne pouvais pas obtenir moins de 1 Ko. Maintenant je l'ai fait!

Cube ombré interactif:

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

Déplace ta souris.

Fonctionne dans Chrome (18.quelque chose, mais devrait fonctionner sur les plus récents).

J'ai très bien joué au golf, j'ai sauvé quelques personnages en utilisant une astuce que je trouvais plutôt cool: Disons que vous avez le texte suivant:

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

les caractères peuvent être sauvegardés en retournant la fonction en elle-même et en procédant comme suit:

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

Les économies dépendent du nombre d'appels de fonction que vous avez. C'est probablement mieux pour l'obscurcissement que pour le golf.

J'ai également sauvegardé un personnage en remplaçant 1000par 1e4, en donnant à la Mathclasse et à certaines de ses fonctions, des alias. Utilisation de variables pour les chaînes répétées (assez difficile de trouver certaines de ces sauvegardes). En outre, j'ai eu le mot styledans mon code à quelques reprises; certains d'entre eux étaient des chaînes et d'autres étaient des identifiants comme element.style.whatever. Assigner la chaîne à une variable ( D='style) m'a permis de remplacer les chaînes par Det de remplacer les identifiants comme ceci element[D].whatever.

Dernière édition: désolé d’amener une vieille composition ', mais quelques idées sur la façon de réduire cela sont venues à moi!

JavaScript 489 caractères

Cela joue Devinez un jeu de nombre.

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>

J'ai travaillé avec ce code:

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