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