#MonthOfCode - Day 9: jump

My entry for the 9th day of the month of code. The theme for today is: jump.

Here is an ugly ASCII jump game. You’re the little face ☺ and all you can do is jump.






Code after the break.



jump.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
120
121
122
123
document.addEventListener('DOMContentLoaded', function() {
  var requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
              window.setTimeout(callback, 1000 / 60);
            };
  })();

  var $screen = $('#moc-9');
  var gameover, started, lastShift, lastNew, lastFall, y, oldChar, jump, lines, score;

  function reset() {
    gameover = false;
    started = false;
    lastShift = 0;
    lastNew = 0;
    lastFall = 0;
    y = 10;
    oldChar = '_';
    jump = 0;
    score = 0;

    lines = [];
    for (var i = 0; i < 15; i++) {
      if (i === 2) {
        lines.push(('* * C l i c k   t o   s t a r t   a n d   t o   j u m p * * ' + Array(40).join(' ')).split(''));
      }
      if (i === 10) {
        lines.push((Array(60).join('_') + Array(40).join(' ')).split(''));
      } else {
        lines.push(Array(100).join(' ').split(''));
      }
    }

    draw();
  }

  // init
  reset();

  // click event
  $screen.on('click', function () {
    if (!started) {
      started = true;
      lines[2] = Array(100).join(' ').split('');
      run();
    } else if (jump === 0 && oldChar == '_') {
      jump = 5;
    }

    if (gameover) {
      reset();
    }
  });

  function update() {
    if (y >= 0) {
      lines[y][10] = oldChar;
    }

    var now = Date.now();
    if (now - lastShift > 50) {
      lastShift = now;
      lines.forEach(function (l) {
        l.shift();
        l.push(' ');
      });
      score++;
    }
    if (now - lastNew > 1000) {
      lastNew = now;
      var h = rand(3, 15);
      var w = rand(10, 50);
      var args = [60, w].concat(Array(w).join('_').split(''));
      lines[h].splice.apply(lines[h], args);
    }
    if (now - lastFall > 100) {
      lastFall = now;
      if (jump) {
        y--;
        jump--;
      } else if (y < 0 || lines[y][10] === ' ') {
        y++;
      } else {
        jump = 0;
      }
    }
    if (y >= 15) {
      gameover = true;
    } else if (y >= 0) {
      oldChar = lines[y][10];
      lines[y][10] = '☺';
    }
  }

  function rand(min, max) {
    return min + Math.floor(Math.random() * (max - min));
  }
  function draw() {
    var text = lines.map(function (l) {
      return l.slice(0, 60).join('');
    }).join('\n');
    text += '\n' + (Array(60).join(' ') + 'Score: ' + score).slice(-60);
    $screen.text(text);
  }

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

    update();
    draw();

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

});