Who win?

by raskalbass

HTML

<script src="http://www.inwebson.com/demo/jqfloat/jqfloat.min.js"></script>
<div class="baloon" id="baloon1"></div>
<div class="baloon" id="baloon2"></div>
<div id="buttons">
    <input type="button" value="START" onclick="run()">
</div>
<div id="distance">00</div>

CSS

#buttons {
    position: fixed;
    top: 20px;
    left: 20px;
}
#distance {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
.baloon {
    width:100px;
    height:100px;
    margin-bottom: 300px;
}
#baloon1 {
    position:absolute;
    left:320px;
    top: 200px;
    background: navy;
}
#baloon2 {
    position:absolute;
    left:100px;
    top: 200px;
    background: darkgreen;
}

JavaScript

var stopAnim;

function run() {
    if (!stopAnim) {
        var scr1 = $("#baloon2").offset().top;
        var scr2 = $("#baloon1").offset().top;
        var scr;
        var winner = "DRAW";
        if (scr1 > scr2) {
            scr = scr1;
            winner = "Green";
        } else {
            scr = scr2;
            winner = "Blue";
        }
        $('html,body').animate({
            scrollTop: scr
        });
        $("#distance").text(scr);
        $('#baloon1').animate({
            top: '+=' + Math.floor(Math.random() * 49)
        });
        $('#baloon2').animate({
            top: '+=' + Math.floor(Math.random() * 49)
        }, run);
        if (scr > 400) {
            stopAnim = "true";
            $('#baloon1').stop();
            $('#baloon2').stop();
            alert("Winner is " + winner);
        }
    }
}