Bounty นั้นจบลงผู้พัฒนาเกมชนะด้วย Game of Life ของ Conway

แพลตฟอร์มเว็บในวันนี้กำลังก้าวหน้าในอัตราที่รวดเร็ว คุณสมบัติเช่นภาพเคลื่อนไหว CSS3 , แปลง , เงาและการไล่ระดับสี , <canvas>, <audio>และ<video>แท็กSVG , WebGLและหมายถึงอื่น ๆ อีกมากมายที่คุณสามารถทำได้มากขึ้นในเบราว์เซอร์และในรหัสไกลน้อยกว่าที่เคยเป็นมาก่อน แน่นอนว่านักพัฒนาหลายคนไม่ได้ใช้คุณสมบัติใหม่เหล่านั้นเพราะเว็บไซต์และแอพพลิเคชั่นที่ทำงานนั้นจำเป็นต้องย้อนกลับเข้ากันได้กับเบราว์เซอร์ตัวมอดที่กินได้เช่น IE6

จะเกิดอะไรขึ้นถ้าคุณถอดสายไฟออก อนุญาตให้ตัวเองใช้ฟีเจอร์ใหม่ ๆ ที่คุณชอบหรือไม่? ใช้ชีวิตอยู่เล็กน้อยบ้าคลั่งใช้คุณสมบัติแปลก ๆ ที่มีผู้ใช้ของคุณเพียง 1% เท่านั้นที่จะได้รับประโยชน์

แน่นอนว่าด้วยทรัพยากรที่ไม่ จำกัด และความสามารถในการพูดคุยกับเซิร์ฟเวอร์คุณสามารถทำทุกสิ่งได้ - โหลดเมกะไบต์ของรหัสและไลบรารีและวิดีโอและอื่น ๆ - แต่ความท้าทายไม่น่าสนใจมากโดยไม่มีข้อ จำกัด ข้อ จำกัด ที่สำคัญสำหรับการประกวดครั้งนี้คือ: คุณสามารถทำอะไรในURI แบบ 4k ที่มีอยู่ในตัวเองdata:? มีอยู่ในตัวเองหมายความว่ามันจะต้องไม่อ้างถึงทรัพยากรภายนอกใด ๆ เชื่อมต่อกับเซิร์ฟเวอร์ใด ๆ ที่ใช้ WebSockets หรือ XHR หรือสิ่งอื่นใด หากคุณต้องการฝังทรัพยากรเช่น PNGs หรือ MP3 อย่าลังเลที่จะรวม URI ข้อมูลไว้ใน URI ข้อมูลของคุณหรือหาวิธีฝังแหล่งย่อยอื่น ๆ ที่ชาญฉลาด 4k หมายถึง 4096 ไบต์, ข้อความ UII ที่เข้ารหัสอย่างถูกต้อง, ASCII (คุณอาจใช้ URI ข้อมูลที่เข้ารหัส base64 หากคุณเลือกเพื่อหลีกเลี่ยงการเข้ารหัส URI แต่โดยปกติข้อความที่เข้ารหัส URI จะมีขนาดเล็กกว่า base64 สำหรับข้อความธรรมดา)

เพื่อให้แรงบันดาลใจในรูปแบบของการประกวดคือมส์ StackOverflow สร้างเกมยูนิคอร์นการแข่งขันเครื่องกำเนิดความจริง Jon Skeet โปรแกรมวาดรูปด้วยวงกลมด้วยมือเปล่าหรืออะไรที่เกี่ยวข้องกับหนึ่งใน Memes StackOverflow & meta.so

ฉันอยากจะสนับสนุนรายการที่มีการโต้ตอบในบางวิธี; ไม่เพียงแค่เป็นภาพเคลื่อนไหวหรือภาพนิ่งที่เรียบง่าย แต่ควรตอบสนองต่อการป้อนข้อมูลของผู้ใช้ไม่ว่าจะเป็นเหตุการณ์เลื่อนเคอร์เซอร์เลื่อนปรับขนาดหน้าต่างเบราว์เซอร์หรือวิธีอื่น ๆ ที่คุณคิด นี่ไม่ใช่ข้อกำหนดที่ยากนัก การสาธิตครั้งยิ่งใหญ่ที่ไม่ได้มีการโต้ตอบจะได้รับการพิจารณาแม้ว่าการโต้ตอบจะเป็นที่ต้องการ

รายการของคุณจะต้องทำงานอย่างน้อยหนึ่งรุ่นสาธารณะของเบราว์เซอร์หลักอย่างน้อยหนึ่งใน 5 เบราว์เซอร์ (IE, Firefox, Chrome, Safari, Opera) เฉพาะการปล่อย mainline เท่านั้น (ไม่ได้สร้างจากกิ่งไม้หรืองานสร้างที่ต้องการแพตช์) โดยไม่อนุญาตให้มีการตั้งค่าพิเศษปลั๊กอินหรือสิ่งอื่นใดที่ไม่ได้มาพร้อมกับเบราว์เซอร์หุ้น ผู้ประกอบการสร้าง, betas และรีลีสทุกคืนนั้นใช้ได้ดี โปรดระบุในรายการของคุณที่เบราว์เซอร์ที่คุณได้ทดสอบรายการของคุณด้วย ไม่มีข้อ จำกัด เกี่ยวกับเทคโนโลยีที่คุณอาจใช้ภายในข้อ จำกัด เหล่านั้น คุณอาจทำภาพเคลื่อนไหว SVG ล้วนๆ, ภาพเคลื่อนไหว CSS ล้วนๆ, บางสิ่งใน JavaScript โดยใช้ WebGL หรือ heck, แม้แต่สิ่งที่ใช้ XML และ XSLT หากสิ่งนั้นทำให้คุณประทับใจ หากคุณสามารถยัดมันลงใน URI ข้อมูลที่ถูกต้องโดยไม่มีการพึ่งพาจากภายนอกและรับเบราว์เซอร์เพื่อเรียกใช้มันเป็นเกมที่ยุติธรรม

หากต้องการเพิ่มการแข่งขันที่นี่ในวันจันทร์ที่ 21 มีนาคมฉันจะเปิดรับรางวัลสำหรับคำถามนี้ ฉันจะจ่ายเงินรางวัลได้อย่างไรเมื่อฉันมีตัวแทนเพียง 101 คน ทีนี้ตัวแทนทั้งหมดที่ฉันได้รับจาก upvotes ถึงคำถามนี้ระหว่างนี้และวันจันทร์จะเข้าสู่ค่าหัว (มากถึง 500 อนุญาตสำหรับค่าหัวเดียวมันยากสำหรับฉันที่จะตีขีด จำกัด นั้นแม้ว่าตัวแทนจะได้รับ หมวก) ผลงานจะได้รับการยอมรับเป็นเวลา 6 วันหลังจากนั้น รายการทั้งหมดจะต้องอยู่ในอย่างน้อย 24 ชั่วโมงก่อนที่เงินรางวัลจะหมดอายุเพื่อให้เวลาฉันในการตรวจสอบพวกเขาทั้งหมดและประเมินผลพวกเขา ณ จุดนี้ฉันจะยอมรับคำตอบที่ได้รับการโหวตมากที่สุดและมอบความโปรดปรานให้กับคำตอบที่โปรดปราน เกณฑ์ของฉันสำหรับการมอบรางวัลจะรวมถึงความงามความสนุกเทคนิคที่ชาญฉลาดการใช้คุณสมบัติใหม่ ๆ การโต้ตอบและขนาดที่น่าสนใจ

นี่คือแหล่งที่มาของแรงบันดาลใจเพื่อให้คุณเริ่มต้น:

• Chrome Experimentsชุดของการสาธิตแพลตฟอร์มเว็บที่ทันสมัย
• Mozilla Hacksบล็อกเกี่ยวกับแพลตฟอร์มเว็บที่ทันสมัยพร้อมคุณสมบัติใหม่มากมายใน Firefox 4
• JS1k , การแข่งขันสำหรับการสาธิต JavaScript 1k
• 10k Apartเป็น webapp ในการประกวด 10k
• gl64kการประกวดทดลองใช้งานสำหรับการสาธิต WebGL 64k
• Shader Toyชุดสาธิตที่คุณสามารถทำได้ด้วย WebGL shaders

รูปแบบสำหรับรายการ:

ชื่อของรายการ

ข้อมูล: 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 ดูเหมือนจะไม่ยอมรับข้อมูล URIs ในลิงก์ดังนั้นคุณจะต้องฝังไว้ใน<pre>แท็กโดยตรง)

SO meme: ทุกอย่างคือ meme

ทุกอย่างเป็นมส์ พูดพอแล้ว.

เกมแห่งชีวิตของ Conway, 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>

นี่คือGame of Life ของ Conway ที่เขียนด้วยตนเองสำหรับ HTML5 ด้วย canvas และ CSS3 ฉันเขียนเพื่อความสนุกสนานในช่วงการแข่งขัน 10K Apart แต่ฉันไม่ได้ส่งสิ่งนี้เพื่อการแข่งขัน

รุ่นที่เข้ารหัส Base64 ครอบคลุมข้อมูลมากกว่า 4.61KB ในขณะที่รุ่นดั้งเดิมคือ ~ 3543 ไบต์

การบีบอัดขนาด : รหัส Javascript minified โดยยูอิคอมเพรสเซอร์ออนไลน์แล้วโดยคณบดีเอ็ดเวิร์ดบรรจุหีบห่อ CSS รหัส minified โดยยูอิคอมเพรสเซอร์ออนไลน์ ใช้ไลบรารี jQuery จาก Google API Library 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. แก้ไขข้อผิดพลาดในการคำนวณเพื่อนบ้านที่มีชีวิตและปรับเปลี่ยนรหัสบางส่วนเพื่อลดขนาด

ขออภัยที่ขุดเธรดเก่า แต่ฉันเห็นความท้าทายนี้ที่แถบด้านข้างและฉันไม่สามารถต้านทานได้ ฉันไม่สนใจว่าความท้าทายมันจบลงแล้วจริง ๆ มันเป็นแค่ความสนุกที่เกิดขึ้นกับบางสิ่งบางอย่าง

บางทีเราอาจมีรอบใหม่ได้หรือไม่

อย่างไรก็ตามการส่งของฉัน:

แก้ไข

ขออภัยที่จะขุดมันขึ้นมาอีกครั้งแต่มันรบกวนฉันมานานมากแล้วที่ฉันไม่สามารถรับสิ่งนี้ได้ภายใต้ 1KB ตอนนี้ฉันทำไปแล้ว!

แบบอินเทอร์แอกทีฟ Cube แบบแรเงา:

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) อนุญาตให้ฉันไปแทนที่สตริงด้วยและจะเข้ามาแทนที่ตัวระบุชอบดังนั้นDelement[D].whatever

แก้ไขล่าสุด: ขออภัยที่ต้องนำคอมพ์เก่ามาใช้ แต่ความคิดบางอย่างเกี่ยวกับการย่อให้สั้นลงเพิ่งมาถึงฉัน!

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>