Koordinaten_sich_schnell_bewegender_Objekte_verifizieren

Bevor ich an die Umsetzung gehe, eine Frage an die Experten: Ich habe mehrere Flugzeuge, die horizontal fliegen. Sie fliegen ziemlich schnell. Ich möchte sie mit der Maus anklicken und dann sollen sie verschwinden. Kann ich prüfen, ob sie erfolgreich angeklickt wurden, indem ich die Mauskoordinaten mit den Flugzeugkoordinaten vergleiche? Ich vermute, dass dies nicht funktionieren wird, weil die Flugzeug Koordinaten zum Zeitpunkt der Abfrage Mausklick schon veraltet sind. Falls meine Vermutung zutrifft, wie könnte es funktionieren?
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<html> <head> <script src="/js_webseite/jquery.js"> </script> <style> #wrapper{ width:100%; height:1000px; position:absolute; top:0; left:0; } .ballon{ position:absolute; left:0; display:block; background-color:#037CA9; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; transform:rotate(180deg); } .ballon:after{ content:''; height:100px; width:5px; background:black; } .ballon:before{ content:''; display:block; height:100px; width:5px; background:black; margin-left:50%; margin-top:-100px; } @keyframes rauf{ 0%{ top:1000px; } 100%{ top:-200px; } } </style> </head> <body> <div id="tref">Noch 10 Ballons</div> <div id="wrapper"> </div> <script> all() function all(){ for(a=1;a<=10;a++){ dd=document.createElement('div'); dd.id='bal'+a; dd.className='ballon'; $('#wrapper').append(dd); } second=0; setInterval(function(){ second++; },1000); breite=$('#wrapper').css('width'); breite=breite.replace('px',''); for(var h=1;h<=10;h++){ start(h); } function start(h){ left=Math.floor(Math.random() * breite) + 100; width=Math.floor(Math.random() * 100) + 10; top=Math.floor(Math.random() * 1000) + 10; time=Math.floor(Math.random() * 20) + 3; var randomColor = Math.floor(Math.random()*16777215).toString(16); $('#bal'+h).css('left',left+'px'); $('#bal'+h).css('width',width*0.7+'px'); $('#bal'+h).css('height',width+'px'); $('#bal'+h).css('top','1000px'); $('#bal'+h).css('background','#'+randomColor); // $('#bal'+h).css('animation','rauf linear '+time+'s 1 forwards') ki=Math.round(parseInt(time)*1000); $('#bal'+h).click(function(){ $(this).remove(); }) menge=document.getElementsByClassName('ballon'); if(menge.length>0){ $('#tref').html('Noch '+menge.length+' Ballons') $('#bal'+h).animate({ top:-200 },ki, function() { start(h) }); }else{ $('#tref').html('You win in '+second+' Sekunden<br>Restart in 3 Sekunden'); setTimeout(function(){ all() },3000) } // $('#bal'+h).css('animation-play-state','paused'); document.getElementById('bal'+h).addEventListener("animationend",(function(){ g=this.id; id=g.replace('bal',''); start(id) }), false); } } </script> </body> </html>