Ödül sona erdi, thephpdeveloper Conway'in Yaşam Oyunu ile kazandı

Bugün web platformu hızlı bir şekilde ilerliyor. Gibi özellikler CSS3 animasyonlar , dönüşümler , gölge ve gradyanlar , <canvas>, <audio>ve <video>etiketleri, SVG , WebGL ve her zamankinden daha da bu kadar tarayıcıda yapabileceği daha ortalama birçok ve çok daha az kod. Elbette, birçok geliştirici bu yeni özellikleri kullanamaz, çünkü üzerinde çalıştıkları sitelerin ve uygulamaların IE6 gibi eski, güve yemiş tarayıcılarla geriye dönük olarak uyumlu olmaları gerekir.

Peki, koşumu çıkarırsan ne olacak? İstediğiniz tüm yeni özellikleri kullanmanıza izin verin. Biraz yaşayın, çıldırın, kullanıcılarınızın yalnızca% 1'inin faydalanabileceği garip kanama özelliklerini kullanın?

Tabii ki, sınırsız kaynaklar ve bir sunucuyla konuşma yeteneği sayesinde, her şeyi yapabilirsiniz - megabayt kod ve kitaplıklar ve videolar yükleyin, vb. - ancak zorluklar kısıtlama olmadan çok ilginç değildir. Bu yarışmanın ana kısıtı şudur: Tek, bağımsız, 4 k URI'de ne yapabilirsiniz?data:? Kendi kendine yeten, dış kaynaklara başvurmaması, WebSockets veya XHR kullanan herhangi bir sunucuya veya herhangi bir türe bağlanmaması gerektiği anlamına gelir. PNG'ler veya MP3'ler gibi kaynakları gömmek istiyorsanız, veri URI'nize veri URI'ları eklemekten çekinmeyin veya alt kaynakları gömmek için başka bir akıllı yöntem kullanın. 4k, 4096 bayt, uygun şekilde URI kodlu, ASCII metin anlamına gelir (URI kodlamasını önlemek için seçim yaparsanız, bir base64 kodlu veri URI'sini kullanabilirsiniz, ancak genellikle URI kodlu metin, düz metin için base64'ten küçük olacaktır).

İlham vermek için yarışmanın teması StackOverflow memleri'dir . Tekboynuzlu bir oyun, Jon Skeet gerçeği üreteci, serbest el çemberi tabanlı bir çizim programı veya popüler StackOverflow & meta.so memlerinden biriyle yapacak bir şey oluşturun.

Bir şekilde etkileşimli olan girişleri teşvik ediyorum; yalnızca basit bir animasyon veya statik resim değil, olaylar, CSS gezdirme, kaydırma, tarayıcı penceresi yeniden boyutlandırma veya aklınıza gelebilecek başka bir yolla kullanıcı girişine yanıt vermelidir. Bu zor bir gereklilik değildir; Etkileşim tercih edilmekle birlikte etkileşimli olmayan büyük demolar dikkate alınacaktır.

Girişiniz, 5 büyük tarayıcıdan (IE, Firefox, Chrome, Safari, Opera) en az birinin genel sürümünde yayınlanmalıdır. Özel yapılandırma ayarları, eklentileri veya hisse senedi tarayıcınızla birlikte gelmeyen başka hiçbir şeye sahip olmayan sadece ana hat sürümlerine (yamalar gerektiren yamalar ya da yamalar gerektiren yapılara değil) izin verilir. Her gece oluşturur, betalar ve sürüm adayları iyi. Lütfen girişinizde, girişinizi hangi tarayıcılarla test ettiğinizi belirtin. Bu kısıtlamalar dahilinde hangi teknolojilerde kullanabileceğiniz konusunda hiçbir sınırlama yoktur; saf bir SVG animasyonu, saf bir CSS animasyonu, WebGL kullanarak JavaScript’te bir şey yapabilir ya da hilenizi zorlarsa XML ve XSLT kullanan bir şeyi bile çekebilirsiniz. Harici bir bağımlılık olmadan geçerli bir veri URI'sine tıklayabilir ve çalıştırmak için bir tarayıcı bulabilirseniz, bu adil bir oyundur.

Buradaki yarışmaya ek olarak, 21 Mart Pazartesi günü, bu konuda bir lütuf açacağım. Sadece 101 temsilcim olduğunda nasıl ödül alabilirim? Eh, şimdi ve pazartesi arasındaki bu soruya yükseltmelerden kazandığım tüm ikramiye ödül alacak (500 liraya kadar tek bir lütuf için izin verilebilir; kapak). Girişler bundan sonra 6 gün boyunca kabul edilecektir; tüm girişler, ödüllerin sona ermesinden en az 24 saat önce olmalı, hepsini kontrol etmeme ve değerlendirmeme zaman vermem gerekiyor. Bu noktada, en yüksek oyu alan cevabı kabul edeceğim ve en sevdiğim cevaba (en yüksek oy alan ile aynı olan veya olmayabilir) lütuf göstereceğim. Ödül kazanma kriterlerim arasında güzellik, eğlence, zekice bir teknik, yeni özelliklerin ilginç kullanımı, etkileşim ve boyut yer alacak.

İşte başlamanıza yardımcı olacak bazı ilham kaynakları:

• Chrome Denemeleri , modern web platformunun gösterilerinden oluşan bir koleksiyon
• Mozilla Hacks , Firefox 4'te birçok yeni özellik gösterisinin bulunduğu modern web platformu hakkında bir blog
• JS1k , 1k JavaScript demoları yarışması
• 10k Apart , 10k yarışmasında bir webapp
• gl64k , 64k WebGL demoları için şu anda yarışmakta olan bir demo yarışması
• Shader Toy , WebGL gölgelendiricilerle neler yapabileceğinize dair bir dizi demo

Girişlerin formatı:

Girişin adı

veriler: text / html, Sizin% 20data% 20URI

Firefox 4 RC, Chrome 10 ve Opera 11'de çalışır

Girişinizin açıklaması; ne yapıyor, neden düzgün, hangi zeki teknikleri kullandın?

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

İlham verdiğiniz krediler, ödünç alabileceğiniz herhangi bir kod vb.

(StackExchange, bağlantılardaki veri URI'larını kabul etmiyor gibi görünüyor, bu nedenle doğrudan bir <pre>etikete yerleştirmeniz gerekecek )

SO meme: Her şey bir memedir

Her şey bir memedir. yeterince söylendi.

Conway'in Yaşam Oyunu, HTML5 + CSS3 + JS,

3,543 3,561 3,555 bayt

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>

Bu conway'in hayat oyunu tuval ve CSS3 HTML5 için kendimi yazılı. 10K Apart yarışma döneminde eğlence için yazdım ama bunu yarışma için sunmadım.

Base64 kodlu sürüm 4.61 KB veri tabanına sahipken, orijinal sürüm ~ 3543 bayttır.

Boyutu sıkıştırmak için : Javascript kodu YUI çevrimiçi kompresör tarafından küçültülmüş , daha sonra Dean Edwards'ın paketleyicisi . CSS Kodu YUI çevrimiçi kompresör tarafından küçültülmüş . Google API Kütüphanesinden jQuery kütüphanesini kullanır. Geçerli HTML5 ve CSS3 (w3 doğrulayıcısının deneysel sürümü).

Oynamak:

• Kara kutu canlı bir hücreyi, beyaz ölü hücreyi temsil eder.
• Canlı bir hücreyi işaretlemek için bir kutuya tıklayın, ölü işaretlemek için tekrar tıklayın.
• <Start>Simülasyonu çalıştırmak, <Stop>duraklatmak ve bir <Next>sonraki adımı göstermek için basın .
• Internet Explorer 9, Firefox 4 (ve ayrıca Firefox 3), Safari 5 ve Google Chrome'da harika çalışır.

İnsan tarafından okunabilir (robotlar ölecek) versiyon:

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

Tarihte bir sınıf:

1. Bağımlılığı jQuery'den ve URI'yi kodlayan tüm boşlukları kaldırmak için değiştirildi. Birçok yönden iyileştirilmiş kod (hatırlayamıyorum).
2. Canlı komşuların hesaplanmasındaki hata düzeltildi ve boyutu küçültmek için bazı kodlar yeniden düzenlendi.

Eski bir iş parçacığını kazdığım için üzgünüm, ama bu zorluğu kenar çubuğunda gördüm ve dayanamadım. Bu sorunun gerçekten bittiği umrumda değil, bir şeylerle gelmek sadece eğlenceliydi.

Belki bir tur daha yapabiliriz?

Neyse, gönderim:

Düzenle

Bunu tekrar kaztığım için üzgünüm ama 1KB'nin altında bulamadığım yıllar boyunca beni rahatsız ediyordu. Şimdi yaptım!

Etkileşimli, Gölgeli Küp:

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

Fareni hareket ettir

Chrome'da çalışır (18.bir şey, ancak en yenileriyle çalışmalıdır).

Bu oldukça iyi golf oynadım, oldukça havalı olduğunu düşündüğüm bir numara kullanarak birkaç karakter kaydettim:

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

işlevi kendi içine döndürerek ve aşağıdakileri yaparak karakterler kaydedilebilir:

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

Tasarruf, sahip olduğunuz kaç işleve bağlı olduğuna bağlıdır. Bu muhtemelen şaşkınlık için golf oynamaktan çok daha iyidir.

Ben de değiştirerek karakterleri kaydedilmiş 1000olan 1e4, veren Mathsınıfını ve onun fonksiyonları, takma ad bazılarıdır. Tekrarlanan dizeler için değişken kullanmak (bu kayıtlardan bazılarını bulmak oldukça zor). Ayrıca, stylebirkaç kez kodumda söz vardı ; bazıları dizeleriydi, diğerleri ise kimlikleriydi element.style.whatever. Dizeyi bir değişkene ( D='style) atamak, dizeleri Ddeğiştirmemi ve bunun gibi tanımlayıcıları değiştirmemi sağladı element[D].whatever.

Son Düzenleme: eski bir comp getirdiğim için üzgünüm ', ancak bunun nasıl kısaltılacağı konusunda bazı fikirler bana geldi!

JavaScript 489 karakter

Bu bir Sayı Guess oyunu oynuyor.

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>

Bu kod ile çalıştım:

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