您可以在4k数据URI中做什么?[关闭]


44

赏金结束了,thephpdeveloper赢得了Conway的《人生游戏》

当今的网络平台正在迅速发展。功能,如CSS3动画转换阴影渐变<canvas><audio><video>标签,SVGWebGL的,还有更多的意味着你可以做更多的浏览器,并在更短的代码,比以往任何时候。当然,许多开发人员不会使用这些新功能,因为他们工作的网站和应用程序必须与IE6之类的古老的,受蛀牙困扰的浏览器向后兼容。

那么,如果您取下安全带怎么办?允许自己使用任何喜欢的新功能?活得一点点,发疯,使用怪异的前沿功能,只有1%的用户可以利用?

当然,凭借无限的资源和与服务器进行通信的能力,您可以进行各种处理(加载兆字节的代码,库和视频等),但是没有约束就没有那么有趣的挑战。此竞赛的主要限制是:您可以在一个单独的4k URI中做什么data:?自包含的意味着它不得引用任何外部资源,使用WebSockets或XHR连接到任何服务器或任何种类的东西。如果要嵌入PNG或MP3之类的资源,请随时在数据URI中包含数据URI,或者想出其他一些巧妙的方式来嵌入子资源。4k表示4096个字节,经过URI正确编码的ASCII文本(如果选择,可以使用base64编码的数据URI,以避免URI编码,但对于纯文本,通常URI编码的文本会小于base64)。

为了提供灵感,比赛的主题是StackOverflow memes。创建一个独角兽游戏,Jon Skeet事实生成器,基于徒手绘制的绘图程序,或与流行的StackOverflow和meta.so模因之一有关的任何事情。

我鼓励以某种方式互动的条目;它们不仅应该是简单的动画或静态图像,还应该通过事件,CSS悬停,滚动,浏览器窗口大小调整或您可以想到的任何其他方式来响应用户输入。但是,这并不是一个硬性要求。非交互性的出色演示将被考虑,尽管交互性更可取。

您的条目必须在5种主要浏览器(即IE,Firefox,Chrome,Safari,Opera)中至少一种的至少一个公开发行版中运行。仅允许主线版本(不是分支的版本或需要补丁的版本),没有特殊的配置设置,插件或常规浏览器不附带的其他任何版本。每晚构建,测试版和发布候选版本都可以。请在您的条目中指定用来测试条目的浏览器。在这些限制范围内,您可以使用什么技术没有任何限制;您可能会制作纯SVG动画,纯CSS动画,或者使用WebGL在JavaScript中进行某些操作,甚至可以进行某些操作,甚至可以使用XML和XSLT进行操作,如果您喜欢的话。如果您可以将其塞入没有外部依赖关系的有效数据URI中,并让浏览器运行它,那将是一个公平的游戏。

为了增加竞争,在3月21日星期一,我将悬赏这个问题。当我只有101个代表时,我怎么能获得赏金?好吧,我从现在到星期一在这个问题上的投票所获得的所有代表都将进入赏金计划(单次赏金允许的最高限额为500;尽管如此,我很难达到该限额帽)。在此之后的6天内,参赛作品将被接受;所有参赛作品必须至少在赏金到期前24小时内,以便给我时间检查所有内容并进行评估。届时,我将接受投票最高的答案,并将赏金给予我最喜欢的答案(可能与投票最高的答案相同或不同)。我授予赏金的标准包括美丽,乐趣,巧妙的技巧,有趣的新功能使用,互动性和尺寸。

以下是一些启发您的资源,可以帮助您入门:

  • Chrome Experiments,现代网络平台的演示集
  • Mozilla Hacks,一个有关现代Web平台的博客,其中包含Firefox 4中许多新功能的演示
  • JS1k一千个JavaScript演示比赛
  • 10k Apart,10k竞赛中的webapp
  • gl64k,目前正在为64k WebGL演示进行的演示竞赛
  • Shader Toy,一组有关WebGL着色器功能的演示

条目格式:

报名

数据:text / 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>标签中)


@Joey我链接到SO模因上的一个线程以供参考,以供不熟悉的人参考。以下是一些较流行的入门指南:独角兽,华夫饼,徒手绘制的圆圈(即,在MS Paint或类似应用程序中徒手绘制的圆圈或其他图,通常用于突出显示某种用户界面错误),Jon Skeet还有查克·诺里斯(Chuck Norris)式的关于他的“事实”
Brian Campbell

顺便说一句,条目通常不需要与StackOverflow模因有关。就像独角兽一样,只选一个模因。实际上,我曾考虑过将主题设为独角兽,但决定通过允许任何StackOverflow模因来稍微打开它。而且,如果您有一个不适合主题的炫酷演示,请随时提交。那里的主题主要是提供灵感,而不是限制您的工作。
Brian Campbell

我有个主意,但我认为实施将需要6到8周的时间,您能延长最后期限吗?
aaaaaaaaaaaaaa

@eBusiness哈哈!不,与堆栈溢出不同,这里实际上有最后期限。
Brian Campbell

请更多条目吗?
2011年

Answers:


33

模因:一切都是模因

一切都是模因。说够了。

康威的人生游戏,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>

这是Conway的《人生游戏》,是我自己为HTML5,画布和CSS3编写的。在10K Apart竞赛期间,我是为了娱乐而写的,但我没有将其提交给竞赛。

Base64编码版本跨越了4.61KB的数据,而原始版本为〜3543字节。

压缩大小:由YUI在线压缩器压缩 Java代码,然后由Dean Edwards的压缩程序压缩。CSS代码由YUI在线压缩程序压缩使用Google API库中的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>

历史上的一类:

  1. 修改为从jQuery中删除依赖项以及对所有空格进行URI编码。以许多方式(我不记得了)改进了代码。
  2. 修复了在计算活跃邻居中的错误,并重构了一些代码以减小大小。

1
这很酷,但是jQuery库不是外部依赖吗?
Gareth


3
您在这里不需要太多的jQuery。您可能会用原始DOM访问权限来代替它,而无需过多扩展代码,这可能会以IE兼容为代价(但是canvas与旧版IE也不兼容,因此不会损失太多)。如果可以扩展它,那么您需要将其缩减一些以适合您/>>因为您没有编写XHTML ,因此您可以删除一些描述性文字以及可以替换的某些序列。另外,请记住对结果进行适当的URI编码;尽管浏览器可能接受URI中的空格,但从技术上讲它们是无效的。
布莱恩·坎贝尔

4
如果您最终需要一些东西,可以节省空间。有没有针对实际需要<html><head>以及<body>标签(和他们关闭标签)。它们在HTML中是隐式的,将由浏览器添加到适当的位置。
Brian Campbell

1
顺便说一句,如果您想缩短代码。通常,使数组比数据大一点要比检查每次读取数组的边界都容易。您可以算出一个3x3的正方形,而不是围绕一个场的圆环,您所要做的就是稍微调整一下算法以进行补偿。
aaaaaaaaaaaaaa

22

对不起,我想挖一个旧线程,但是我在侧边栏看到了这个挑战,我忍不住了。我不介意挑战真的结束了,想出些什么很有趣。

也许我们可以再进行一轮?

无论如何,我的提交:

编辑

抱歉,再次对此进行了挖掘,但是很长一段时间以来,我一直无法获得小于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");

是否节省取决于您拥有多少个函数调用。不过,这对于混淆处理比打高尔夫球可能更好。

我还用替换10001e4,保存了字符,给了Math类及其一些函数别名。对重复的字符串使用变量(很难找到其中的一些保存内容)。另外,我style在代码中多次使用该词。其中一些是字符串,其他是标识符,如element.style.whatever。将字符串分配给变量(D='style)使我可以用替换字符串,D并像那样替换标识符element[D].whatever

最新编辑:很抱歉提出一个旧的comp',但是一些缩短此操作的想法才刚刚出现!


好的,感谢您创建条目!这很酷。我也喜欢您的高尔夫技巧。
布莱恩·坎贝尔

很好,但是您还有足够的空间,应该添加更多的空间:) Rubik模拟器怎么样?
aditsu

onmousemove可以修改:onmousemove=function(e){U=K-e.pageX;J=e.pageY-K};。这样,立方体将朝着鼠标指针滚动(更直观)。
维克多2014年

如果您对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");
Toothbrush 2014年

1

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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.