Bounty đã kết thúc, nhà phát triển chiến thắng chiến thắng với Trò chơi cuộc sống của Conway

Nền tảng web ngày nay đang tiến bộ với tốc độ nhanh chóng. Các tính năng như hình ảnh động CSS3 , biến đổi , đổ bóng và gradient , <canvas>, <audio>và <video>thẻ, SVG , WebGL , và nhiều ý nghĩa hơn là bạn có thể làm nhiều hơn trong trình duyệt, và trong mã ít, hơn bao giờ hết. Tất nhiên, nhiều nhà phát triển không được sử dụng các tính năng mới này, bởi vì các trang web và ứng dụng họ làm việc cần phải tương thích ngược với các trình duyệt cổ xưa, ăn sâu như IE6.

Vì vậy, điều gì xảy ra nếu bạn tháo dây nịt? Cho phép bản thân sử dụng bất kỳ và tất cả các tính năng mới mà bạn thích? Sống một chút, phát điên, sử dụng các tính năng cạnh chảy máu kỳ lạ mà chỉ 1% người dùng của bạn có thể tận dụng?

Tất nhiên, với tài nguyên không giới hạn và khả năng nói chuyện với máy chủ, bạn có thể thực hiện mọi cách thức. Tải trọng megabyte mã và thư viện và video, v.v., nhưng trên thử thách không thú vị mà không bị ràng buộc. Hạn chế chính của cuộc thi này là: bạn có thể làm gì trong một URI 4k độc lập, khép kíndata:? Tự khép kín có nghĩa là nó không được tham chiếu đến bất kỳ tài nguyên bên ngoài nào, kết nối với bất kỳ máy chủ nào bằng WebSockets hoặc XHR hoặc bất kỳ thứ gì thuộc loại này. Nếu bạn muốn nhúng các tài nguyên như PNG hoặc MP3, vui lòng bao gồm các URI dữ liệu trong URI dữ liệu của bạn hoặc đưa ra một số cách thông minh khác để nhúng tài nguyên phụ. 4k có nghĩa là 4096 byte, văn bản ASCII được mã hóa đúng URI (bạn có thể sử dụng URI dữ liệu được mã hóa base64 nếu bạn chọn, để tránh mã hóa URI, nhưng thông thường văn bản được mã hóa URI sẽ nhỏ hơn base64 cho văn bản thuần túy).

Để cung cấp nguồn cảm hứng, chủ đề của cuộc thi là các memes StackOverflow . Tạo một trò chơi kỳ lân, một trình tạo thực tế Jon Skeet, một chương trình vẽ dựa trên vòng tròn tự do hoặc bất cứ điều gì để làm với một trong những meme StackOverflow & meta.so phổ biến.

Tôi sẽ khuyến khích các mục tương tác theo một cách nào đó; không chỉ là một hình ảnh động đơn giản hoặc hình ảnh tĩnh, chúng phải đáp ứng với đầu vào của người dùng, cho dù thông qua các sự kiện, di chuột CSS, cuộn, thay đổi kích thước cửa sổ trình duyệt hoặc bất kỳ cách nào khác bạn có thể nghĩ tới. Đây không phải là một yêu cầu khó khăn, mặc dù; những bản demo tuyệt vời không tương tác sẽ được xem xét, mặc dù tính tương tác sẽ được ưu tiên hơn.

Mục nhập của bạn phải chạy trong ít nhất một bản phát hành công khai của ít nhất một trong 5 trình duyệt chính (IE, Firefox, Chrome, Safari, Opera). Chỉ các bản phát hành chính (không được xây dựng từ các chi nhánh hoặc bản dựng yêu cầu bản vá), không có cài đặt cấu hình đặc biệt, plugin hoặc bất kỳ thứ gì khác không đi kèm với trình duyệt chứng khoán mới được phép. Xây dựng hàng đêm, betas, và phát hành ứng cử viên là tốt. Vui lòng chỉ định trong mục nhập của bạn mà trình duyệt bạn đã kiểm tra mục nhập của bạn. Không có giới hạn về những công nghệ bạn có thể sử dụng trong các ràng buộc đó; bạn có thể thực hiện một hoạt hình SVG thuần túy, một hoạt hình CSS thuần túy, một cái gì đó trong JavaScript bằng WebGL hoặc quái, thậm chí một cái gì đó sử dụng XML và XSLT nếu điều đó làm bạn thích. Nếu bạn có thể nhồi nhét nó vào một URI dữ liệu hợp lệ, không có phụ thuộc bên ngoài và có một trình duyệt để chạy nó, đó là trò chơi công bằng.

Để thêm vào cuộc thi ở đây, vào thứ Hai, ngày 21 tháng 3, tôi sẽ mở một tiền thưởng cho câu hỏi này. Làm thế nào tôi có thể đủ tiền thưởng khi tôi chỉ có 101 đại diện? Chà, tất cả các đại diện tôi đạt được từ các câu trả lời cho câu hỏi này từ nay đến thứ Hai sẽ đi vào tiền thưởng (tối đa giới hạn 500 cho phép cho một tiền thưởng, tuy nhiên, sẽ rất khó để tôi đạt được giới hạn đó, mặc dù vậy, với đại diện mũ lưỡi trai). Bài dự thi sẽ được chấp nhận trong 6 ngày sau đó; tất cả các mục phải có trong ít nhất 24 giờ trước khi tiền thưởng hết hạn, để cho tôi thời gian kiểm tra tất cả và đánh giá chúng. Vào thời điểm đó, tôi sẽ chấp nhận câu trả lời được bình chọn cao nhất và đưa tiền thưởng cho câu trả lời yêu thích của tôi (có thể giống hoặc không giống với câu trả lời cao nhất). Tiêu chí của tôi để nhận tiền thưởng sẽ bao gồm vẻ đẹp, niềm vui, kỹ thuật thông minh, sử dụng thú vị các tính năng mới, tính tương tác và kích thước.

Dưới đây là một số nguồn cảm hứng, để giúp bạn bắt đầu:

• Chrome Experiment , một bộ sưu tập các bản trình diễn của nền tảng web hiện đại
• Mozilla Hacks , một blog về nền tảng web hiện đại với nhiều bản giới thiệu các tính năng mới trong Firefox 4
• JS1k , một cuộc thi dành cho các bản demo JavaScript 1k
• Ngoài 10k , một ứng dụng web trong cuộc thi 10k
• gl64k , một cuộc thi demo hiện đang chạy cho các bản demo WebGL 64k
• Shader Toy , một bộ các bản demo về những gì bạn có thể làm với trình tạo bóng WebGL

Định dạng cho các mục:

Tên mục

dữ liệu: văn bản / html,% 20data% 20URI của bạn

Hoạt động trong Firefox 4 RC, Chrome 10 và Opera 11

Mô tả mục nhập của bạn; những gì nó làm, tại sao nó gọn gàng, những kỹ thuật thông minh bạn đã sử dụng.

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

Bất kỳ khoản tín dụng nào cho cảm hứng, bất kỳ mã nào bạn có thể đã mượn, v.v.

(StackExchange dường như không chấp nhận URI dữ liệu trong các liên kết, vì vậy bạn sẽ cần phải nhúng nó trực tiếp vào <pre>thẻ)

SO meme: Mọi thứ đều là meme

Tất cả mọi thứ là một meme. đủ nói

Trò chơi cuộc sống của Conway, HTML5 + CSS3 + JS,

3,543 3,561 3,555 byte

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>

Đây là Trò chơi cuộc sống của Conway tự viết cho HTML5 bằng canvas và CSS3. Tôi đã viết nó để giải trí trong suốt thời gian thi đấu 10K Ngoài ra nhưng tôi đã không gửi bài này cho cuộc thi.

Phiên bản được mã hóa Base64 trải rộng trên 4,61KB dữ liệu, trong khi phiên bản gốc là ~ 3543 byte.

Để nén kích thước : Mã Javascript được thu nhỏ bằng máy nén trực tuyến YUI , sau đó bằng trình đóng gói của Dean Edwards . Mã CSS được thu nhỏ bằng máy nén trực tuyến YUI . Sử dụng thư viện jQuery từ Thư viện Google API. HTML5 và CSS3 hợp lệ (phiên bản thử nghiệm của trình xác nhận w3).

Chơi:

• Hộp đen đại diện cho một tế bào sống, màu trắng đại diện cho tế bào chết.
• Bấm vào một hộp để đánh dấu một tế bào sống, bấm một lần nữa để đánh dấu nó chết.
• Nhấn <Start>để chạy mô phỏng, <Stop>để tạm dừng và <Next>để hiển thị bước tiếp theo
• Chạy tuyệt vời trên Internet Explorer 9, Firefox 4 (và Firefox 3), Safari 5 và Google Chrome.

Phiên bản có thể đọc được của con người (robot sẽ chết):

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

Một lớp học trong lịch sử:

1. Được sửa đổi để loại bỏ sự phụ thuộc khỏi jQuery cũng như mã hóa URI tất cả các khoảng trắng. Mã được cải thiện theo nhiều cách (mà tôi không thể nhớ).
2. Đã sửa lỗi tính toán của hàng xóm còn sống và tái cấu trúc một số mã để giảm kích thước.

Xin lỗi để đào một chủ đề cũ, nhưng tôi thấy thử thách này trên thanh bên và tôi không thể cưỡng lại. Tôi không bận tâm rằng thử thách đã kết thúc thực sự, thật vui khi nghĩ ra điều gì đó.

Có lẽ chúng ta có thể có một vòng khác?

Dù sao, trình của tôi:

Biên tập

Xin lỗi vì đã đào cái này lên một lần nữa , nhưng nó đã làm phiền tôi từ lâu mà tôi không thể có được cái này dưới 1KB. Bây giờ tôi đã làm điều đó!

Tương tác, Shaded Cube:

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

Di chuyển chuột của bạn.

Hoạt động trong Chrome (18.s Something, nhưng nên hoạt động trên hầu hết các ứng dụng gần đây).

Tôi đã chơi golf này khá tốt, tôi đã lưu một vài nhân vật bằng một mẹo mà tôi nghĩ là khá tuyệt: Giả sử bạn có những điều sau:

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

các ký tự có thể được lưu bằng cách trả về hàm trong chính nó và thực hiện các thao tác sau:

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

Tiết kiệm phụ thuộc vào số lượng cuộc gọi bạn có. Điều này có lẽ tốt hơn cho obfuscation hơn là chơi golf.

Tôi cũng đã lưu một ký tự bằng cách thay thế 1000bằng 1e4, đưa ra Mathlớp và một số chức năng của nó, bí danh. Sử dụng các biến cho các chuỗi lặp lại (khá khó để tìm thấy một số lưu này). Ngoài ra, tôi đã có từ styletrong mã của tôi một vài lần; một số trong số họ là các chuỗi và những người khác là định danh như thế element.style.whatever. Việc gán chuỗi cho một biến ( D='style) cho phép tôi thay thế các chuỗi bằng Dvà thay thế các định danh như vậy element[D].whatever.

Chỉnh sửa mới nhất: xin lỗi để đưa ra một comp cũ ', nhưng một số ý tưởng làm thế nào để rút ngắn điều này chỉ đến với tôi!

Ký tự JavaScript 489

Điều này chơi trò chơi Đoán một số.

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>

Tôi đã làm việc với mã này:

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