Time based game loop with keyboard override

A simple spike for Go-No-Go game.

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="https://gist.github.com/raw/1947881/5663910335ae83ec6ccc3ab7edbacdc71f9d420d/Timer.js"></script>
<div id="screen">
    <p class="timer">Time: <span class="time"></span> ms</p>
    <div class="hide red cue"></div>
    <div class="hide blue cue"></div>
    <div class="hide green cue"></div>
</div>

CSS

html, body { height: 100%; }
#screen { outline: solid 1px red; width: 100%; height: 100%; background-color: black; }
.timer { position: absolute; top: 0; left: 0; color: #ccc; }
.cue { height: 100%; width: 33.33333333333%; float: left; opacity: 0.5; }
.cue.red { background-color: red; }
.cue.green { background-color: green; }
.cue.blue { background-color: blue; }

.hide { visibility: hidden; }

JavaScript

// Extend timer
Timer.prototype.set = function(t) {
    this.s = t;
};

var timer = new Timer,
    time = 0,
    $timer = $('.time'),
    $cue = $('.cue'),
    counter = 0,
    shown = false,

    T = 1000,
    P = 2000;

function show() {
    $cue.removeClass('hide');
    shown = true;
}

function hide() {
    $cue.addClass('hide');
    shown = false;
}

function loop() {
    time = timer.time();
    $timer.text(time > 10000 ? 0 : time);

    if (time >= 0 && time < T && !shown) {
        show();
    } else if (time > T && time < P && shown) {
        hide();
    } else if (time > P) {
        timer.restart();
        counter += 1;
    }

    if (counter < 5) {
        webkitRequestAnimationFrame(loop);
    }
}


// On keypress, override game loop and restart
$(document).on('keyup', function(event) {
    var key = String.fromCharCode(event.which).toUpperCase();

    switch (key) {
    case 'P':

        // pause
        if (timer.paused()) {
            timer.unpause()
        }
        else {
            timer.pause();
        }
        break;

    case 'N':
        counter = 0;
        webkitRequestAnimationFrame(loop);
        break;

    default:
        timer.set(0);
        shown = false;
        break;
    }
});