#MonthOfCode - Day 6: time

My entry for the 6th day of the month of code. The theme for today is: time.

This is a timing game where you have to click as close as possible to each full second until 10. Post your score in the comments!

    Code after the break.

    time.jsview raw
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    document.addEventListener('DOMContentLoaded', function() {
      var requestAnimFrame = (function(){
        return  window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                function( callback ){
                  window.setTimeout(callback, 1000 / 60);
                };
      })();

      // some nice globals
      var gameover, started, startTime, times;

      var $time  = $('#time-6');
      var $times = $('#times-6');
      var $score = $('#score-6');

      reset();

      // click event
      $('#moc-6').on('click', function () {
        if (gameover) {
          reset();
          return;
        }

        // first click is to start the game
        if (!started) {
          started = true;
          startTime = Date.now();
          // start the game
          run();
          return;
        }

        addTime(Date.now() - startTime);
      });

      function reset() {
        started = false;
        gameover = false;
        times = [];
        $times.empty();
        $score.empty();
        $time.html('<span style="font-size:36px;">Click to start</span>');
      }

      // add a new time in the list of clicked times
      function addTime(time) {
        var target = (times.length + 1) * 1000;
        var score  = Math.abs(time - target);

        times.push({
          time   : time,
          target : target,
          score  : score
        });

        // add time in the DOM
        var $li = $('<li/>')
          .text(formatTime(time) + ' (' + score + ')')
          .appendTo($times);

        // gameover if clicked 10 times
        if (times.length === 10) {
          endGame();
          showTime(time); // draw the last time in the main div (little detail…)
        }

      }

      function showTime(time) {
        $time.text(formatTime(time));
      }

      function formatTime(time) {
        var s  = Math.floor(time/1000);
        var ms = time - s * 1000;
        s  = ('0' + s).slice(-2);
        ms = ('00' + ms).slice(-3);
        return s + '.' + ms;
      }

      function endGame() {
        gameover = true;
        showScore();
      }

      function showScore() {
        if (times.length < 10) {
          $score.text('You didn\'t even click 10 times…');
        } else {
          var score = times.reduce(function (acc, t) {
            return t.score + acc;
          }, 0);

          $score.text('Score (lower is better): ' + score);
        }
      }

      // main loop
      function run() {
        if (gameover) {
          return;
        }

        var time = Date.now() - startTime;
        showTime(time);

        if (time > 12000) {
          endGame();
        }

        if (!gameover) {
          requestAnimFrame(run);
        }
      }

    });