30行で銀河を作成する

そこにゲームがありますか？ jQueryで記述します。はい、30行の意味は平準化されていますが、私は一般的な大騒ぎをとても上手くやり、自由なカルマを削減します（読者はマウスをうまく考えてクリックし、** 。



人々は私の紹介があまり好きではなかったので、「始めましょう」と言い換えます。



この記事は初心者を対象としているので、親愛なる専門家はすぐにスクロールできます。

製造指示

このような、指定されたパラメーターに従ってループアニメーションを実行する関数が必要です。

function mooveItem(item, speed, pos, direction) { /*          , ..            */ if(isNaN(item.ldir)) item.ldir = pos.min; if(isNaN(item.tdir)) item.tdir = pos.min; /*    ..       ,    */ if(direction == "h") item.ldir = item.ldir == pos.max ? pos.min : pos.max; if(direction == "v") item.tdir = item.tdir == pos.max ? pos.min : pos.max; /*        */ var animation = direction == "v" ? { top : item.tdir } : { left : item.ldir }; /*      */ item.animate(animation, { duration : speed, complete : function() { mooveItem(item, speed, pos, direction); }, queue : false //     ,        }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、オブジェクトを作成してアニメーションを割り当てる関数ができました。

 function addPlanet() { var bodyw = $("body").innerWidth(); var bodyh = $(window).height(); /*      () ,        (   ) */ var size = Math.floor(Math.random() * 50); var speed = size * 1000; var obj = $("<div>"); obj .addClass("obj") .css("left", bodyw / 2) .css("top", bodyh / 2) .css("width", size) .css("height", size); /*   */ /*      ,   10         */ mooveItem(obj, speed, { min: size * 10, max: bodyw - size * 10 }, "h"); /*      2/4  3/4  */ mooveItem(obj, speed, { min: bodyh / 2 - 100, max: bodyh / 2 + 100 }, "v"); $("body").append(obj); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクトの外観に関するCSSルールをいくつか作成してみましょう。

ちなみに、アニメーションが位置付けされている理由を誰かが知っている場合： 位置よりも速く発生します：修正済み;、私は喜んで見つけます。

 body { background: #000; } .obj { border-radius: 50%; opacity: 1; box-shadow: 0px 0px 15px #fff; border-radius: 50%; position: absolute; background: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、今、これらすべてを起動する必要があります

 $(window).load(function() { /*    100,    */ for(i=1; i<100; i++) addPlanet(); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JS Fiddleの美しさを見て、フルスクリーンでよく見ます



例1、トピックごと

例2、ビッグバンに似ている



ニュアンスとは何ですか？ 定期的に、ファイルのバグはオブジェクトの数、サイズ、速度に依存して多すぎる再帰を診断します。そのため、スクリプトが最後まで機能せず、必要以上に少ないオブジェクトが表示される場合があります。 繰り返しになりますが、誰かが例外をどこでどのように正しくスローするかを知っていれば、ヒントを見ることができてうれしいです。 自分で理解することはできません。