"Finger Slayer" core

by Ronny

HTML

<div id="axe"></div>
<button id="hold">hold</button>

CSS

#axe {background: grey; width: 100px; height: 10px; position: absolute; top: 0;}
#hold {width: 15px; height: 15px; background: red; margin-top: 120px;}

JavaScript

function end(){
    $('#hold').unbind('mouseup', youwon);
    $('#hold').bind('mouseup', youlost);
    console.log('end');
}

function godown(){
    $('#hold').unbind('mouseup', tooEarly);
    $('#hold').bind('mouseup', youwon);
    console.log('GO!');
    $('#axe').animate({'top': '100px'}, 300, end)
}

function start(){
    var time = parseInt( Math.random() * 3000 );
    setTimeout(godown, time);
}

function tooEarly(){
    console.log('ahhhh too early, you coward!');
}

function youwon(){
    console.log('YEAH you won!');
}

function youlost(){
    console.log('ohhhh no, you lost!');
}

$('#hold').mousedown(start);
$('#hold').bind('mouseup', tooEarly);