4kデータURIで何ができますか？[閉まっている]

バウンティは終わり、phpdeveloperはConwayのGame of Lifeで勝利します

今日のWebプラットフォームは急速に進歩しています。以下のような特長CSS3アニメーション、変換、ドロップシャドウやグラデーション、<canvas>、<audio>および<video>タグ、SVG、WebGLの、そして多くはより多くのあなたがこれまで以上に、ブラウザで、そしてはるかに少ないコードではるかに行うことができますことを意味します。もちろん、多くの開発者はこれらの新機能を使用できません。なぜなら、彼らが作業するサイトやアプリケーションは、IE6のような古くから使われているブラウザとの後方互換性が必要だからです。

それで、ハーネスを外すとどうなりますか？好きな新機能をすべて使用できるようにしますか？少し生きて、夢中になり、ユーザーのたった1％しか利用できない奇妙な最先端の機能を使用しますか？

もちろん、無制限のリソースとサーバーとの対話機能を使用すると、あらゆる種類の処理（メガバイトのコードやライブラリ、ビデオの読み込みなど）を実行できますが、課題は制約なしではあまり興味深いものではありません。このコンテストの主な制約は次のとおりです。単一の自己完結型の4k data:URIでできること？自己完結型とは、外部リソースを参照したり、WebSocketやXHRなどを使用してサーバーに接続したりしてはならないことを意味します。PNGやMP3などのリソースを埋め込みたい場合は、データURIにデータURIを含めるか、サブリソースを埋め込む他の巧妙な方法を考えてください。4kは、適切にURIエンコードされた4096バイトのASCIIテキストを意味します（URIエンコードを回避するために、選択した場合はbase64エンコードデータURIを使用できますが、通常、プレーンテキストのURIエンコードテキストはbase64より小さくなります）。

インスピレーションを提供するために、コンテストのテーマはStackOverflow memesです。ユニコーン馬上槍試合ゲーム、ジョンスキートファクトジェネレーター、フリーハンドサークルベースの描画プログラムなど、人気のStackOverflowとmeta.soミームのいずれかを使用して何かを作成します。

何らかの形でインタラクティブなエントリを奨励します。単純なアニメーションや静止画像だけでなく、イベント、CSSホバー、スクロール、ブラウザーウィンドウのサイズ変更など、ユーザーが考えられる方法を問わず、ユーザー入力に応答する必要があります。ただし、これは難しい要件ではありません。インタラクティブではない優れたデモが検討されますが、インタラクティブが好まれます。

エントリは、5つの主要なブラウザ（IE、Firefox、Chrome、Safari、Opera）の少なくとも1つの少なくとも1つのパブリックリリースで実行する必要があります。メインラインリリース（ブランチからのビルドまたはパッチを必要とするビルドではない）のみが許可され、特別な構成設定、プラグイン、またはストックブラウザーに付属していないその他のものは許可されません。ナイトリービルド、ベータ版、およびリリース候補版は問題ありません。エントリでテストしたブラウザをエントリで指定してください。これらの制約内で使用できるテクノロジーに制限はありません。純粋なSVGアニメーション、純粋なCSSアニメーション、WebGLを使用したJavaScriptでの処理、またはXMLやXSLTを使用した処理を行うことができます。外部依存関係のない有効なデータURIに詰め込み、ブラウザで実行できるようになれば、それは公平なゲームです。

3月21日（月）にこのコンテストに追加するために、この質問に対して賞金を用意します。担当者が101人しかいない場合、どうすれば報奨金を支払うことができますか？さて、今から月曜日までにこの質問に対する賛成票から得たすべての担当者は、報奨金になります（1回の報奨金に対して500の制限まで許可されます。キャップ）。エントリーはその後6日間受け入れられます。すべてのエントリは、賞金の有効期限が切れる前に少なくとも24時間以内でなければなりません。すべてのエントリをチェックアウトして評価する時間を与えてくれます。その時点で、私は最高の投票の回答を受け入れ、私のお気に入りの回答に賞金を与えます（最高の投票と同じ場合もそうでない場合もあります）。賞金を授与するための私の基準には、美しさ、楽しさ、巧妙なテクニック、新機能の興味深い使用、双方向性、サイズが含まれます。

始めるためのインスピレーションのソースは次のとおりです。

Chrome Experiments、最新のウェブプラットフォームのデモ集
Mozilla Hacks、Firefox 4の新機能の多くのデモを含む最新のWebプラットフォームに関するブログ
JS1k、1k JavaScriptデモのコンテスト
10k Apart、10kコンテストのwebアプリ
gl64k、現在64k WebGLデモ用に実行されているデモコンテスト
Shader Toy、WebGLシェーダーでできることのデモセット

エントリーの形式：

エントリー名
data：text / html、Your％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>タグに直接埋め込む必要があります）

popularity-contest javascript

— ブライアン・キャンベル
ソース

@Joey よく知らない人のために、参考のためにSOミームのスレッドにリンクしました。ユニコーン、ワッフル、フリーハンドサークル（つまり、MSペイントまたは同様のアプリケーションでフリーハンドで描かれたサークルまたはその他の図、一般的に何らかのユーザーインターフェイスのバグを強調するために使用）、Jon Skeetそして彼についてのチャック・ノリス風の「事実」。

— ブライアンキャンベル

ところで、エントリは一般的にStackOverflowミームに関するものである必要はありません。ユニコーンのようにミームを1つ選ぶだけです。実際、私はテーマをユニコーンにすることを考えていましたが、StackOverflowのミームを許可することで少し開くことにしました。また、テーマに合わないクールなデモをお持ちの場合は、とにかく提出してください。テーマは主にインスピレーションを提供するためのものであり、あなたがすることを制限するためではありません。

— ブライアンキャンベル

アイデアはありますが、実装に6〜8週間かかると思いますが、期限を少し延長してもらえますか？

— aaaaaaaaaaaa

@eBusinessハハ！いいえ、スタックオーバーフローとは異なり、実際には期限があります。

— ブライアンキャンベル

もっとエントリーしてください？

— モーリス

回答:

ミーム：すべてがミームです

すべてがミームです。十分に言った。

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

これは、キャンバスとCSS3を使用してHTML5用に作成したConwayのLife of Lifeです。私は10K Apartコンテストの期間中に楽しみのためにそれを書きましたが、これをコンテストに提出しませんでした。

Base64でエンコードされたバージョンは4.61KBを超えるデータにまたがりますが、元のバージョンは〜3543バイトです。

サイズを圧縮するには：YUIオンラインコンプレッサー、次にDean Edwardsのpackerによって縮小されたJavascriptコード。YUIオンラインコンプレッサーによって縮小されたCSSコード。~~Google API LibraryのjQueryライブラリを使用します。~~有効な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>

歴史上のクラス：

jQueryから依存関係を削除し、すべてのスペースをURIエンコードするように変更されました。多くの点で改善されたコード（覚えていない）。
アライブネイバーの計算のバグを修正し、サイズを削減するために一部のコードをリファクタリングしました。

— モーリス
ソース

これは非常にクールですが、jQueryライブラリは外部依存関係ではありませんか？

— ガレス

ホスト：ebusiness.hopto.org/gol.htm

— aaaaaaaaaaaa

ここではほとんどjQueryを必要としません。おそらくIE互換を犠牲にして、コードをあまり拡張せずに生のDOMアクセスに置き換えることができます（ただし、canvasは古いIEと互換性がないため、多くを失うことはありません）。それが拡張されて収まるようにもう少し切り詰める必要がある場合は、削除できる説明テキスト/>と>、XHTMLを書いていないので置き換えることができるシーケンスがあります。また、結果を適切にURIエンコードすることを忘れないでください。ブラウザはURIのスペースを受け入れる場合がありますが、技術的には有効ではありません。

— ブライアンキャンベル

スペースが必要な場合は、スペースを節約するために使用できるものがいくつかあります。実際の必要性はありません<html>、<head>と、<body>タグ（やその終了タグは）。それらはHTMLで暗黙的であり、ブラウザによって適切な場所に追加されます。

— ブライアンキャンベル

ところで、コードを短くしたい場合。配列を読み取るたびに範囲外に読み取らないことを確認するよりも、配列をデータよりも少し大きくする方が簡単な場合がよくあります。そして、フィールドの周りのリングではなく3x3の正方形を数えることができます。あなたがする必要があるのは、アルゴリズムを少し調整して補正することだけです。

— aaaaaaaaaaaa

古いスレッドを掘り下げてすみませんが、この挑戦をサイドバーで見ましたが、抵抗できませんでした。挑戦は本当に終わったということを気にしません、それは何かを考え出すだけで楽しかったです。

別のラウンドができるかも？

とにかく、私の提出：

編集

これをもう一度掘り下げて申し訳ありませんが、私はこれを1KB未満で得ることができなかったので、長い間私を悩ませていました。今やった！

インタラクティブな影付きキューブ：

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.something、ただし最新のもので動作するはずです）。

私はこれをかなりよくゴルフし、かなりクールだと思ったトリックを使っていくつかのキャラクターを保存しました。次のようなものがあるとしましょう。

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。

最新の編集：古いコンプを表示して申し訳ありませんが、これを短縮する方法がいくつか思いつきました！

— グリフィン
ソース

いいね、エントリを作成してくれてありがとう！これはかなりクールです。私もあなたのゴルフのテクニックが好きです。

— ブライアンキャンベル

いいですが、十分なスペースが残っているので、さらに追加する必要があります:)ルービックシミュレータはどうですか？

— -aditsu

onmousemove変更できます：onmousemove=function(e){U=K-e.pageX;J=e.pageY-K};。この方法で、キューブはマウスポインターに向かって回転します（より直感的）。

— ビクター14年

ECMAScript 6に満足している場合（私の知る限りFirefox（SpiderMonkey）でのみ動作します）、次のfunction g(x){alert("hello "+x+"!");return g} g("dave")("martin")("alice")("rose")("bob")("helen")("jo");ようになりますg=x=>alert("hello "+x+"!"),g;g("dave")("martin")("alice")("rose")("bob")("helen")("jo");

— 歯ブラシ14

JavaScript 489文字

これは、Guess a Numberゲームをプレイします。

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>

— バッカスビール
ソース