Bounty ist vorbei, der Entwickler gewinnt mit Conways Game of Life

Die Webplattform schreitet heute rasant voran. Features wie CSS3 - Animationen , Transformationen , Schlagschatten und Verläufe , <canvas>, <audio>und <video>Tags, SVG , WebGL und viele mehr bedeutet , dass Sie weit mehr im Browser tun, und in weit weniger Code, als je zuvor. Natürlich können viele Entwickler diese neuen Funktionen nicht nutzen, da die Websites und Anwendungen, an denen sie arbeiten, mit alten, von Motten gefressenen Browsern wie IE6 abwärtskompatibel sein müssen.

Was passiert also, wenn Sie den Gurt ausziehen? Erlauben Sie sich, alle neuen Funktionen zu nutzen, die Ihnen gefallen? Ein bisschen leben, verrückt werden, verrückte Funktionen nutzen, die nur 1% Ihrer Benutzer nutzen können?

Natürlich können Sie mit unbegrenzten Ressourcen und der Möglichkeit, mit einem Server zu kommunizieren, alle möglichen Aufgaben ausführen - z. B. Megabyte an Code, Bibliotheken und Videos laden -, aber Herausforderungen sind ohne Einschränkungen nicht sehr interessant. Die Hauptbeschränkung für diesen Wettbewerb ist: Was können Sie in einer einzelnen, eigenständigen 4k- URI tun data:?? Eigenständig bedeutet, dass es sich nicht auf externe Ressourcen beziehen, über WebSockets oder XHR eine Verbindung zu Servern herstellen oder auf ähnliche Weise verfahren darf. Wenn Sie Ressourcen wie PNGs oder MP3s einbetten möchten, können Sie Daten-URIs in Ihre Daten-URI einbinden oder eine andere clevere Möglichkeit zum Einbetten von Subressourcen finden. 4k bedeutet 4096 Bytes, ordnungsgemäß URI-codierter ASCII-Text (Sie können gegebenenfalls einen Base64-codierten Daten-URI verwenden, um eine URI-Codierung zu vermeiden. Normalerweise ist URI-codierter Text jedoch kleiner als Base64 für Nur-Text).

Das Thema des Wettbewerbs sind StackOverflow-Memes . Erstellen Sie ein Einhorn-Turnier-Spiel, einen Jon Skeet-Faktgenerator, ein Freihandkreis-basiertes Zeichenprogramm oder alles, was mit einem der beliebten Memes von StackOverflow & meta.so zu tun hat.

Ich würde zu Einträgen ermutigen, die auf irgendeine Weise interaktiv sind. nicht nur eine einfache Animation oder ein statisches Bild, sondern sie sollten auf Benutzereingaben reagieren, sei es durch Ereignisse, CSS-Hover, Scrollen, Ändern der Größe des Browserfensters oder auf eine andere Art und Weise, die Sie sich vorstellen können. Dies ist jedoch keine schwierige Anforderung. Gute Demos, die nicht interaktiv sind, werden berücksichtigt, Interaktivität wird jedoch bevorzugt.

Ihr Eintrag muss in mindestens einer öffentlichen Version von mindestens einem der 5 wichtigsten Browser (IE, Firefox, Chrome, Safari, Opera) ausgeführt werden. Es sind nur Hauptversionen (keine Builds aus Zweigen oder Builds, für die Patches erforderlich sind) ohne spezielle Konfigurationseinstellungen, Plugins oder andere Elemente zulässig, die nicht im Standardbrowser enthalten sind. Nächtliche Builds, Betas und Release-Kandidaten sind in Ordnung. Bitte geben Sie in Ihrem Eintrag an, mit welchen Browsern Sie Ihren Eintrag getestet haben. Es gibt keine Einschränkungen hinsichtlich der Technologien, die Sie innerhalb dieser Einschränkungen verwenden dürfen. Sie können eine reine SVG-Animation, eine reine CSS-Animation, etwas in JavaScript unter Verwendung von WebGL oder sogar etwas, das XML und XSLT verwendet, erstellen, wenn Sie dies wünschen. Wenn Sie es in eine gültige Daten-URI ohne externe Abhängigkeiten packen und einen Browser zum Ausführen veranlassen können, ist es ein faires Spiel.

Um den Wettbewerb hier am Montag, dem 21. März, zu erweitern, werde ich ein Kopfgeld für diese Frage eröffnen. Wie kann ich mir ein Kopfgeld leisten, wenn ich nur 101 Wiederholungen habe? Nun, alle Wiederholungen, die ich durch die Aufwärtsstimmen zu dieser Frage zwischen jetzt und Montag erhalte, fließen in die Prämie ein (bis zu dem Limit von 500, das für eine einzelne Prämie zulässig ist; es wäre jedoch ziemlich schwierig für mich, dieses Limit zu erreichen, wenn ich die Wiederholungen bedenke Deckel). Beiträge werden 6 Tage später akzeptiert. Alle Einträge müssen mindestens 24 Stunden vor Ablauf der Prämie eingegangen sein, damit ich Zeit habe, sie alle zu überprüfen und auszuwerten. An diesem Punkt akzeptiere ich die Antwort mit der höchsten Bewertung und gebe die Prämie für meine Lieblingsantwort (die mit der mit der höchsten Bewertung identisch sein kann oder nicht). Meine Kriterien für die Vergabe der Prämie sind Schönheit, Spaß, clevere Technik, interessante Nutzung neuer Funktionen, Interaktivität und Größe.

Hier sind einige Inspirationsquellen, um Ihnen den Einstieg zu erleichtern:

• Chrome Experiments , eine Sammlung von Demonstrationen der modernen Webplattform
• Mozilla Hacks , ein Blog über die moderne Webplattform mit vielen Demos der neuen Funktionen in Firefox 4
• JS1k , ein Wettbewerb für 1k JavaScript-Demos
• 10k Apart , eine Webapp im 10k Contest
• gl64k , ein Demo-Wettbewerb, der derzeit für 64k-WebGL-Demos läuft
• Shader Toy , eine Reihe von Demos, die zeigen, was Sie mit WebGL-Shadern tun können

Format für Einträge:

Name des Eintrags

Daten: Text / HTML, Ihre% 20Daten% 20URI

Funktioniert in Firefox 4 RC, Chrome 10 und Opera 11

Beschreibung Ihres Eintrags; was es macht, warum es ordentlich ist, welche cleveren Techniken du benutzt hast.

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

Guthaben für Inspirationen, Code, den Sie möglicherweise ausgeliehen haben usw.

(StackExchange akzeptiert offenbar keine Daten-URIs in Links. Sie müssen sie daher direkt in ein <pre>Tag einbetten. )

SO meme: Alles ist ein Meme

Alles ist ein Mem. genug gesagt.

Conways Spiel des Lebens, HTML5 + CSS3 + JS,

3,543 3,561 3,555 Bytes

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>

Dies ist Conways Spiel des Lebens, das ich selbst für HTML5 mit Canvas und CSS3 geschrieben habe. Ich habe es zum Spaß während des 10K Apart-Wettbewerbs geschrieben, aber ich habe es nicht für den Wettbewerb eingereicht.

Die Base64-codierte Version umfasst mehr als 4,61 KB Daten, während die ursprüngliche Version ~ 3543 Byte umfasst.

So komprimieren Sie die Größe : Javascript-Code, der vom YUI-Online-Kompressor und anschließend vom Packer von Dean Edwards minimiert wurde . CSS-Code von YUI Online-Kompressor minimiert . Verwendet die jQuery-Bibliothek aus der Google API-Bibliothek. Gültiges HTML5 und CSS3 (experimentelle Version des w3-Validators).

Spielen:

• Black Box steht für eine lebende Zelle, Weiß für eine tote Zelle.
• Klicken Sie auf ein Kästchen, um eine lebende Zelle zu markieren, und klicken Sie erneut, um sie als tot zu markieren.
• Drücken Sie <Start>, um die Simulation auszuführen, <Stop>anzuhalten und <Next>den nächsten Schritt anzuzeigen
• Läuft hervorragend mit Internet Explorer 9, Firefox 4 (und Firefox 3), Safari 5 und Google Chrome.

Die für Menschen lesbare (Roboter sollen sterben) Version:

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

Eine Klasse in der Geschichte:

1. Geändert, um die Abhängigkeit von jQuery sowie die URI-Codierung aller Leerzeichen zu entfernen. In vielerlei Hinsicht verbesserter Code (an den ich mich nicht erinnern kann).
2. Fehler bei der Berechnung von lebendigen Nachbarn behoben und Code überarbeitet, um die Größe zu verringern.

Es tut mir leid, einen alten Faden ausgegraben zu haben, aber ich habe diese Herausforderung an der Seitenleiste gesehen und konnte einfach nicht widerstehen. Mir macht es nichts aus, dass die Herausforderung wirklich vorbei ist, es hat einfach Spaß gemacht, etwas zu erfinden.

Vielleicht könnten wir noch eine Runde haben?

Wie auch immer, mein Beitrag:

Bearbeiten

Es tut uns Leid , dies zu graben , bis wieder , aber es störte mich seit Ewigkeiten , dass ich das nicht unter 1 KB bekommen konnte. Jetzt habe ich es geschafft!

Interaktiver, schattierter Würfel:

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

Bewegen Sie die Maus.

Funktioniert in Chrome (18.etwas, sollte aber auf den neuesten funktionieren).

Ich habe das ziemlich gut gespielt und ein paar Charaktere mit einem Trick gespeichert, den ich für ziemlich cool hielt: Angenommen, Sie haben Folgendes:

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

Zeichen können gespeichert werden, indem die Funktion in sich selbst zurückgegeben und folgende Schritte ausgeführt werden:

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

Die Einsparungen hängen davon ab, wie viele Funktionsaufrufe Sie haben. Dies ist jedoch wahrscheinlich besser zur Verschleierung als zum Golfen.

Ich sparte auch ein Zeichen durch das Ersetzen 1000mit 1e4, so dass die MathKlasse, und einige seiner Funktionen, Aliase. Verwenden von Variablen für wiederholte Zeichenfolgen (einige dieser Speicherungen sind nur schwer zu finden). Außerdem hatte ich das Wort styleeinige Male in meinem Code; Einige von ihnen waren Zeichenfolgen und andere Identifikatoren wie element.style.whatever. Das Zuweisen der Zeichenfolge zu einer Variablen ( D='style) ermöglichte es mir, die Zeichenfolgen durch Dund die Bezeichner wie folgt zu ersetzen element[D].whatever.

Letzte Änderung: Es tut mir leid, einen alten Comp aufzurufen, aber einige Ideen, wie man diesen verkürzen kann, sind mir gerade eingefallen!

JavaScript 489 Zeichen

Hiermit wird das Spiel "Rate eine Zahl" gespielt.

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>

Ich habe es mit diesem Code ausgearbeitet:

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