codevember2017/day-17/babel/index.babel at fe17938849c791720c982dde136d09fdfdf3898f · ManzDev/codevember2017 · GitHub

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
124
125
126
127
let speed = document.querySelector('.lcd');
let key = document.querySelector('.key');
let race = true;
let sound = new Audio('https://cdn.rawgit.com/ManzDev/codevember2017/master/assets/coin.mp3');

let music2 = new Howl({
  src: ['https://cdn.rawgit.com/ManzDev/codevember2017/master/assets/playing-power-2.mp3'],
  loop: true
})

let music = new Howl({
  src: ['https://cdn.jsdelivr.net/gh/ManzDev/codevember2017/assets/playing-power.mp3?3'],
  onend: function() {
    if (player.turbo)
      music2.play();
    else
      this.play();
  }
}).play();

class Snail {
  constructor(element, max) {
    this.element = document.querySelector(element);
    this.x = 0;
    this.tired = 0;
    this.max = max;
    this.lastSpeed = 0;
    this.turbo = false;
  }

  start() {
    this.element.classList.add('run');
  }

  update() {

    if (this.tired == 1) {

      this.stop();
      this.timer = setTimeout(function() {
        this.start();
        this.tired = 0;
      }.bind(this), 500 + ~~(Math.random() * 1500));

    } else {
      this.tired = ~~(Math.random() * 50);

      // inc;
      this.x += this.inc();
      this.element.style.left = this.x + 'px';
    }

    if (this.x > 750)
      this.finish();
  }

  inc() {
    this.lastSpeed = ~~(Math.random() * this.max);
    return this.lastSpeed;
  }

  finish() {
    this.element.classList.add('winner');
    if (this.timer)
      clearTimeout(this.timer);
    race = false;

    let div = document.createElement('div');
    div.className = 'turnoff';
    document.body.appendChild(div);
  }

  stop() {
    this.element.classList.remove('run');
  }

  updateSpeed() {
    if (this.tired == 1)
      speed.textContent = 0;
    else
      speed.textContent = this.max;
  }

  enableTurbo() {
    sound.play();
    key.classList.add('off');
    this.turbo = true;
    this.max *= 3;
    this.element.classList.add('turbo');
  }
}

let player = new Snail('.snail1', 2),
    cpu = new Snail('.snail2', 2.5);

// Snail updates
player.start();
cpu.start();

setTimeout(showKey, 11500);

let eventEnableTurbo = function(e) {
  if (e.keyCode == 84)
    player.enableTurbo();
};

function eventDisableTurbo() {
  key.classList.add('off');
  removeEventListener('keydown', eventEnableTurbo);
}

function showKey() {
  key.classList.remove('off');
  addEventListener('keydown', eventEnableTurbo);
  setTimeout(eventDisableTurbo, 2000);
}

function loop() {
  if (race) {
    requestAnimationFrame(loop);
    player.update();
    player.updateSpeed();
    cpu.update();
  }
}

loop();