Bubbles in Space!

Destroy ALL the bubbles!

HTML

<script src="https://rawgithub.com/jQueryKeyframes/jQuery.Keyframes/master/jquery.keyframes.js"></script>
<script src="https://rawgithub.com/jQueryKeyframes/Keyframes.Pathfinder/master/keyframes.pathfinder.js"></script>
<script src="https://rawgit.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
<div class="score">Score: <span>0</span></div>
<div class="life">Life Meter: <span>100</span>%</div>

<div class="container"></div>

<button id="playBtn">Play</button>

CSS

body{
    background: black;
    color: white;
}
.circle{
    border-radius: 50%;
    position: absolute;
}
.score{
    float: right;
}

JavaScript

var scales = {};
for(var i = 0; i < 50; i++){
    scales[i+'%'] = { transform: 'scale('+ (1 - (0.017 * i))+')' };
}
for(var i = 0; i < 50; i++){
    scales[(50+i)+'%'] = { transform: 'scale('+ (0.2 + (0.017 * i))+')' };
}

var btnCount = 0;
var circleLive = 0;
var score = 0;

function random(min,max){
    return Math.floor(Math.random() * (max - min) + min);   
}

$('.container').on('hover', '.circle', function(){
    $(this).remove();
    score++;
    $('.score span').html(score);   
    circleLive--;
});

var newCircle = function(){
    var rules = $.extend({
        name: 'curvey'+btnCount
    }, scales);
    
    rules = $.keyframe.circlePath(rules, [$(window).width()/2, $(window).height()/2], random(20,250));
    
    $.keyframe.define([rules]);
    
    var size = random(10, 30);
    var color = random(0,9);
    var time = random(1800, 6000);
    var randbool = random(0,2);
    var forwards = "normal forwards";
    if(randbool == 1){ forwards = "reverse backwards"; }
    
    $('.container').append('<div class="circle circle'+btnCount+'" style="width:'+size+'px;height:'+size+'px;background:#'+color+color+color+'"></div>');
    $('.circle'+btnCount).playKeyframe('curvey'+btnCount+' '+time+'ms linear 0s infinite '+forwards);
    btnCount++;
    circleLive++;
    $('.life span').html(100-circleLive);
    if(circleLive == 100){
        $('.circle').remove();
        score = 0;
        btnCount = 0;
        life = 0;
        circleLive = 0;
        $('.life span').html(0);
    }else{
        setTimeout(newCircle, (circleLive*20)-(5*score));
    }
}
$('#playBtn').click(function(){
    setTimeout(newCircle, 700);
    $('.score span').html(0);
});