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); } 

आइए ऑब्जेक्ट की उपस्थिति के लिए सीएसएस नियमों के एक जोड़े का निर्माण करें।
वैसे, अगर किसी को पता है कि एनीमेशन स्थिति के साथ क्यों है: निरपेक्ष; स्थिति से तेज़ होता है: निश्चित;, मुझे यह जानकर खुशी होगी।

 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(); }); 

हम जेएस फिडेल की सुंदरता को देखते हैं, पूर्ण स्क्रीन पर बेहतर दिखते हैं

उदाहरण 1, विषय द्वारा
उदाहरण 2, एक बड़ा धमाका जैसा दिखता है

क्या बारीकियां हैं? समय-समय पर, एक फ़ाइल बग निदान करता है बहुत अधिक पुनरावृत्ति , यह वस्तुओं की संख्या, आकार और गति पर निर्भर करता है, इसलिए कभी-कभी स्क्रिप्ट अंत तक काम नहीं करती है और आप देखते हैं कि इससे कम वस्तुएं होनी चाहिए, बस इसे पुनरारंभ करें। और फिर, अगर किसी को पता है कि अपवाद को सही तरीके से कहां और कैसे फेंकना है, तो मुझे एक संकेत देखकर खुशी होगी, क्योंकि मैं स्वयं इसका पता नहीं लगा सकता।