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>