4k 데이터 URI에서 무엇을 할 수 있습니까? [닫은]

현상금이 끝났고, PHP 개발자가 Conway의 Game of Life로 승리

오늘날 웹 플랫폼은 빠른 속도로 발전하고 있습니다. 같은 기능 CSS3 애니메이션 , 변환 , 그림자 와 그라데이션 , <canvas>, <audio>및 <video>태그, SVG , WebGL을 , 이전보다 당신이 훨씬 더 브라우저에서 할 수있는보다 평균 많은, 훨씬 적은 코드입니다. 물론 많은 개발자들은 이러한 새로운 기능을 사용하지 못합니다. 이들이 작동하는 사이트와 응용 프로그램은 IE6와 같은 오래된 방취 한 브라우저와 호환되어야하기 때문입니다.

하네스를 벗으면 어떻게 되나요? 원하는 새로운 기능을 모두 사용할 수 있습니까? 조금만 살고, 미쳐 가고, 사용자의 1 %만이 이용할 수있는 이상한 출혈 기능을 사용하십니까?

물론 무제한의 리소스와 서버와 대화 할 수있는 기능을 통해 메가 바이트의 코드, 라이브러리 및 비디오 등을로드하는 등 모든 방식으로 작업을 수행 할 수 있지만 제약이 없으면 도전은 그리 흥미롭지 않습니다. 이 콘테스트의 주요 제약은 다음과 같습니다. 하나의 자체 포함 된 4k URI 에서 수행 할 수있는 작업data:? 자체 포함이란 외부 리소스를 참조하거나 WebSocket 또는 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
Firefox 4의 새로운 기능에 대한 많은 데모를 제공하는 최신 웹 플랫폼에 대한 블로그 인 Mozilla Hacks
1k JavaScript 데모를위한 콘테스트 JS1k
10k 아파트 , 10k 콘테스트의 웹앱
gl64k , 현재 64k WebGL 데모를위한 데모 콘테스트
WebGL 셰이더로 할 수있는 작업에 대한 데모 세트 인 Shader Toy

출품작 형식 :

참가 명
data : 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>태그에 직접 포함해야합니다. )

popularity-contest javascript

— 브라이언 캠벨
소스

@Joey 친숙하지 않은 사람을 위해 참조 용으로 SO memes의 스레드에 연결했습니다 . 유니콘, 와플, 자유형 서클 (즉, MS Paint 또는 이와 유사한 응용 프로그램에서 자유형으로 그려진 원 또는 기타 다이어그램, 일반적으로 사용자 인터페이스 버그를 강조하는 데 사용됨), Jon Skeet 그리고 척 노리스 스타일의 "사실"에 대해 .

— Brian Campbell

그건 그렇고, 항목은 일반적으로 StackOverflow 밈 일 필요는 없습니다. 유니콘처럼 하나의 밈을 선택하십시오. 사실, 나는 테마를 유니콘으로 만들려고 생각했지만 StackOverflow meme을 허용하여 조금 열어보기로 결정했습니다. 그리고 테마에 맞지 않는 멋진 데모가 있다면 어쨌든 제출하십시오. 주제는 주로 당신이하는 일을 제한하지 않고 영감을주기위한 것입니다.

— Brian Campbell

아이디어가 있지만 구현하는 데 6 ~ 8 주가 걸릴 것이라고 생각합니다. 마감일을 조금 연장 할 수 있습니까?

— aaaaaaaaaaaa

@eBusiness 하하! 아니요, 스택 오버플로와 달리 실제로 마감일이 있습니다.

— Brian Campbell

더 많은 출품작?

— mauris

답변:

SO meme : 모든 것이 밈입니다

모든 것이 밈입니다. 충분했다.

콘웨이의 인생 게임, 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의 Game of Life 로 캔버스와 CSS3을 사용하여 HTML5로 작성되었습니다. 나는 10K Apart 경쟁 기간 동안 재미로 썼지 만 경쟁을 위해 이것을 제출하지 않았습니다.

Base64로 인코딩 된 버전은 4.61KB의 데이터에 걸쳐 있으며 원본 버전은 ~ 3543 바이트입니다.

크기를 압축하려면 YUI 온라인 압축기 에서 딘 에드워즈의 패커에 의해 축소 된 Javascript 코드 입니다. YUI 온라인 압축기로 축소 된 CSS 코드 . ~~Google API 라이브러리의 jQuery 라이브러리를 사용합니다.~~ 유효한 HTML5 및 CSS3 (w3 유효성 검사기의 실험 버전).

플레이하려면 :

블랙 박스는 살아있는 세포를 나타내고 흰색은 죽은 세포를 나타냅니다.
라이브 셀을 표시하려면 상자를 클릭하고 다시 클릭하면 죽은 것으로 표시됩니다.
<Start>시뮬레이션을 실행하고 <Stop>일시 중지 <Next>하고 다음 단계를 표시하려면 누릅니다.
Internet Explorer 9, Firefox 4 (및 Firefox 3), Safari 5 및 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>

역사 수업 :

모든 공간을 URI 인코딩하고 jQuery에서 종속성을 제거하도록 수정했습니다. 여러 가지 방법으로 코드를 개선했습니다 (기억할 수 없음).
살아있는 이웃을 계산할 때 발생하는 버그를 수정하고 크기를 줄이기 위해 일부 코드를 리팩터링했습니다.

— 모리스
소스

이것은 매우 멋지지만 jQuery 라이브러리는 외부 의존성이 아닌가?

— Gareth

호스팅 : ebusiness.hopto.org/gol.htm

— aaaaaaaaaaaa

여기에 jQuery가 많이 필요하지 않습니다. IE compat을 희생시키면서 코드를 너무 많이 확장하지 않고도 원시 DOM 액세스로 대체 할 수 있습니다 (하지만 캔버스는 이전 IE와 호환되지 않으므로 많이 잃지 않을 것입니다). 확장하면 확장 할 수 있도록 조금 더 잘라 내야하며, 제거 할 수있는 설명 텍스트 />와 >XHTML을 작성하지 않기 때문에 바꿀 수 있는 시퀀스가 있습니다 . 또한 결과를 올바르게 URI 인코딩해야합니다. 브라우저는 URI에 공백을 사용할 수 있지만 기술적으로 유효하지 않습니다.

— Brian Campbell

공간이 필요한 경우 공간을 절약하기 위해 사용할 수있는 몇 가지 더 있습니다. 에 대한 실제 필요가 없습니다 <html>, <head>및 <body>태그 (도 자신의 닫는 태그). 그것들은 HTML로 암시 적이며 브라우저에 의해 적절한 장소에 추가 될 것입니다.

— Brian Campbell

그런데 코드를 줄이려면 배열을 읽을 때마다 경계를 읽지 않는지 확인하는 것보다 배열을 데이터보다 약간 크게 만드는 것이 더 쉬운 경우가 많습니다. 그리고 필드 주위의 고리 대신 3x3 정사각형을 셀 수 있습니다. 보상하기 위해 알고리즘을 약간 조정하면됩니다.

— aaaaaaaaaaaa

오래된 실을 파서 미안하지만 사이드 바 에서이 도전을 보았고 저항 할 수 없었습니다. 나는 도전이 실제로 끝났다는 것을 신경 쓰지 않고, 무언가를 생각해내는 것이 재미있었습니다.

어쩌면 우리는 또 다른 라운드를 가질 수 있습니까?

어쨌든 내 제출 :

편집하다

이것을 다시 파서 미안 하지만, 1KB 미만에서는 이것을 얻을 수 없었던 나이로 나를 귀찮게했습니다. 이제 해냈습니다!

대화식 음영 처리 큐브 :

960 987 1,082 1,156 1,182 1,667 1,587 바이트 !, 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있었습니다.

최신 편집 : 오래된 comp를 가져 와서 미안하지만이를 줄이는 방법에 대한 아이디어가 나에게 왔습니다!

— 그리핀
소스

항목을 작성해 주셔서 감사합니다. 이것은 꽤 멋지다. 나는 당신의 골프 기술도 좋아합니다.

— Brian Campbell

멋지지만 공간이 충분하면 추가해야합니다 :) Rubik 시뮬레이터는 어떻습니까?

— aditsu

onmousemove수정 될 수 있습니다 : onmousemove=function(e){U=K-e.pageX;J=e.pageY-K};. 이 방법으로 큐브는 마우스 포인터쪽으로 굴러갑니다 (보다 직관적).

— Victor

당신이 인 ECMAScript 6에 만족한다면, (내가 아는 멀리로는, 파이어 폭스 (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");

— 칫솔

자바 스크립트 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>

— 박카스 베일
소스