dskd-17-105 anna

<!DOCTYPE html>
<html>
    <head>
        <title>clicker</title>
        <meta charset="utf-8">

        <style>

            body {
                font-family: helvetica;
            }

            #blocks div {
                width:100px;
                height:100px;
                background-color: #F00;
                position: absolute;
                top: 30px;
            }

        </style>

    </head>
    <body>

        <h3 id="score_label">Click the cubes to score!</h3>

        <div id="blocks">

        </div>

<script type="text/javascript">

var speed = 1;
var score = 0;
var missed = 0;
var score_label = document.getElementById("score_label");
var blocks_container = document.getElementById("blocks");


function spawn(){
    var x = (document.documentElement.clientWidth -100) * Math.random();
    var y = - (100 + Math.random()*150);
    var b = document.createElement('div');
    b.style.left = x +"px";
    b.style.top  = y +"px";
    blocks_container.appendChild(b);

    b.onmousedown = function(evt){
        //console.log( evt.target );
        blocks_container.removeChild(evt.target);
        score ++;
        updateScoreLabel();
    };
}

function update(){
    for (var i = 0; i < blocks_container.children.length; i++) {
        var block = blocks_container.children[i];
        //console.log('block', parseInt(block.style.top) );
        block.style.top = parseInt(block.style.top) + speed + 'px';
    }

    requestAnimationFrame(update);
}

function updateScoreLabel(){
    score_label.innerText = "Score: "+ score +", Missed: "+ missed;
}


setInterval( spawn, 1000 );
update();


</script>


    </body>
</html>