http://wettelsheimer-keller.de/javascripts/beer-game.js

1(function(){
2  var game=document.querySelector('.beer-game'); if(!game) return;
3  var beer=document.getElementById('fallingBeer'), catcher=document.getElementById('beerCatcher'), scoreEl=document.getElementById('beerScore'), start=document.getElementById('startBeerGame');
4  var status=document.createElement('div'); status.className='game-status'; status.textContent='Fehler: 0/3'; game.appendChild(status);
5  var over=document.createElement('div'); over.className='game-over-message'; over.innerHTML='Spiel vorbei<small>3 Krüge verpasst - nochmal starten?</small>'; game.appendChild(over);
6  var speedFactor=0.5, running=false, score=0, misses=0, x=50, y=18, last=0, currentSpeed=0;
7  function resetBeer(){ y=18; x=8+Math.random()*84; beer.style.left=x+'%'; }
8  function updateHud(){ scoreEl.textContent='Punkte: '+score; status.textContent='Fehler: '+misses+'/3'; }
9  function setCatcher(clientX){ var r=game.getBoundingClientRect(); var pct=(clientX-r.left)/r.width*100; pct=Math.max(8,Math.min(92,pct)); catcher.style.left=pct+'%'; }
10  game.addEventListener('mousemove',function(e){setCatcher(e.clientX)}); game.addEventListener('touchmove',function(e){ if(e.touches[0]){setCatcher(e.touches[0].clientX); e.preventDefault();}}, {passive:false});
11  document.querySelectorAll('.difficulty').forEach(function(btn){btn.addEventListener('click',function(){document.querySelectorAll('.difficulty').forEach(function(b){b.classList.remove('active')}); btn.classList.add('active'); speedFactor=parseFloat(btn.getAttribute('data-speed'))||1;});});
12  function finish(){ running=false; over.classList.add('show'); if(start) start.textContent='Nochmal starten'; }
13  function loop(ts){ if(!running) return; if(!last) last=ts; var dt=Math.min(40,ts-last); last=ts; y += dt*currentSpeed; beer.style.top=y+'px';
14    var gr=game.getBoundingClientRect(), br=beer.getBoundingClientRect(), cr=catcher.getBoundingClientRect();
15    if(br.bottom>=cr.top && br.left<cr.right && br.right>cr.left){ score++; currentSpeed += 0.008*speedFactor; updateHud(); resetBeer(); }
16    if(y>gr.height-28){ misses++; updateHud(); if(misses>=3){ finish(); return; } resetBeer(); }
17    requestAnimationFrame(loop);
18  }
19  start&&start.addEventListener('click',function(){score=0; misses=0; currentSpeed=0.13*speedFactor; updateHud(); running=true; last=0; over.classList.remove('show'); resetBeer(); requestAnimationFrame(loop); start.textContent='Neu starten';});
20})();