एनीमेशन

Question

के दौरान ओवरलैपिंग तत्वों को रोकना मैं एक अतिरिक्त और घटाव गेम बना रहा हूं जहां एक राशि यादृच्छिक रूप से जेनरेट की जाती है और कंटेनर के शीर्ष पर प्रदर्शित होती है। संख्याएं नीचे से ऊपर तक एनिमेट करें और विचार सही पर क्लिक करना है।

नंबरों को शुरुआत में यादृच्छिक "एक्स" स्थिति दी जाती है और फिर उसी गति पर शीर्ष पर एनिमेट की जाती है।

मेरी समस्या यह है कि जब प्रोग्राम चल रहा है तो तत्व कभी-कभी ओवरलैप कर सकते हैं क्योंकि उन्हें शुरुआत में एक समान "x" स्थिति दी जाती है।

मुझे प्रोग्राम को यह बताने की ज़रूरत है कि वह "x" स्थिति न दें, जब तक कि इसका उपयोग करने वाले तत्व को स्क्रीन पर पर्याप्त रूप से ओवरलैप न हो।

जब गेम पहली बार शुरू होता है तो समस्या सबसे खराब होती है।

यहाँ प्रासंगिक कोड है ...

var currentMoving = []; 

function moveRandom(id) { 

    // Mark this one as animating 
    currentMoving.push(id); 

    var cPos = $('#container').offset(); 
    var cHeight = $('#container').height(); 
    var cWidth = $('#container').width(); 
    var bWidth = $('#' + id).width(); 

    var bHeight = $('#' + id).css('top', '395px').fadeIn(100).animate({ 
     'top': '-55px' 
    }, AnimationSpeed,'linear').fadeOut(); 

    maxWidth = cPos.left + cWidth - bWidth; 
    minWidth = cPos.left; 
    newWidth = randomFromTo(minWidth, maxWidth); 

    $('#' + id).css({ 
     left: newWidth 
    }).fadeIn(100, function() { 
     setTimeout(function() { 
      $('#' + id).fadeOut(10); 

      // Mark this as no longer animating     
      var ix = $.inArray(id, currentMoving); 
      if (ix !== -1) { 
       currentMoving.splice(ix, 1); 
      } 
      window.cont++; 
     }, 100); 
    }); 
} 

यहाँ एक बेला है - http://jsfiddle.net/pUwKb/68/

Answer 1

यहाँ हालांकि एक सरल उपाय है, न कि सबसे इष्टतम है।

1/यादृच्छिक एक्स के बजाय, अपने कैनवास को ग्रिड के साथ चिह्नित करें, और केवल xpset को 50px (अपनी बॉक्स चौड़ाई) के एकाधिक के रूप में चुना है, इसलिए आपके 600px कैनवास में से किसी भी 12 ग्रिड से एक बॉक्स लॉन्च किया जा सकता है।

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

2/जब एक बॉक्स किसी भी ग्रिड में शुरू की है, ताला 1 सेकंड के लिए है कि ग्रिड या 2 सेकंड, ताकि नए बॉक्स के लिए आपकी यादृच्छिक स्थिति जनरेटर, इस ग्रिड को लॉक होने तक उत्पन्न न करे।

3/कुछ समय बाद, ग्रिड के लिए लॉक साफ़ करें।

http://jsfiddle.net/pUwKb/72/

कोड स्निपेट ग्रिड आधारित एक्स स्थिति उत्पन्न करने के लिए, यादृच्छिक एक्स के बजाय: [लाइनों 230-238]

function randomFromToPosition(from, to) { 
    /* align boxes in grids instead of random positions */ 
    do { 
    var pos = Math.floor(Math.random() * (to - from + 1) + from); 
    var roundedPos = Math.floor(pos/50)*50; 
    } while(lockedGrid[roundedPos] == true); 

    return roundedPos; 
} 

लॉकिंग और ग्रिड अनलॉक कर रहा है: [लाइनों 289-300]

 maxWidth = cPos.left + cWidth - bWidth; 
     minWidth = cPos.left; 
     newWidth = randomFromToPosition(minWidth, maxWidth); 

     lockedGrid[newWidth] = true; // Lock the grid position 
     setTimeout(function(){ 
      delete lockedGrid[newWidth]; 
     },2000);  // free the lock after 2 seconds. 

Answer 2

@ ध्रुवपथक के समाधान पर विस्तार से, मेरे सुझाव में आपके प्रारंभिक क्षेत्र में वस्तुओं का ट्रैक रखने के लिए एक और सरणी होगी और यादृच्छिक स्थिति चुनने पर एक जांच करें टकराव के लिए उस क्षेत्र में सभी वस्तुओं को प्राप्त करें।

ऑब्जेक्ट्स एनिमेट करते समय आपको दो एनिमेशन एक साथ श्रृंखला की आवश्यकता होगी। पहला ऑब्जेक्ट को शुरुआती क्षेत्र से बाहर ले जाएगा और फिर सरणी से खुद को साफ़ करेगा और फिर शीर्ष पर सभी तरह से एनिमेट करेगा।

टकराव की जांच करते समय, यदि टकराव का पता चला है तो सबसे आसान समाधान नई वस्तु के बीच ऊंचाई में अंतर की गणना करना होगा और जिसकी नई वस्तु को थोड़ा और नीचे रखने के लिए टक्कर लगी होगी।

आपको केवल इतना करना होगा कि एनीमेशन गति को समायोजित करने के लिए अन्य वस्तुओं की तुलना में स्थिर दर पर स्थानांतरित किया जाए क्योंकि आप निरंतर दूरी की तुलना में शुरुआती दूरी को प्राप्त करने के लिए मनमानी दूरी को कवर करेंगे अब खा लो।