ballons_jagt.php
Quell Code
<script src="/js/index.php?js=3.2.1-jquery.min.js"></script> <style> body { overflow: hidden; } #wrapper { top: 50px; left: 0; width:100%; overflow: hidden; } .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> <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>
Comments