app.js

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min
}

window.onload = function() {
  var canvas   = document.getElementById("draw"),
      ctx      = canvas.getContext('2d'),
      keyDown  = {},
      i = 1;

  var Player = function() {
    this.name = 'Player ' + i++
    this.x = getRandomInt(0, canvas.width)



    this.y = getRandomInt(0, canvas.height)
    this.velocity = 10
    this.color = "blue"

    this.direction = "right"

    this._draw()
  }

  Player.prototype = {
    _draw: function() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, 15, 0, Math.PI*2, true);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.closePath();
    },
    bigSplash: function() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, getRandomInt(15, 100), 0, Math.PI*2, true);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.closePath();
    },
    isCooldown() {
      return this.cooldown;
    },
    toggleCooldown() {
      this.cooldown = !this.cooldown;
    },
    changeDirection: function(direction) {
      this.direction = direction
    },
    move: function() {
      switch(this.direction) {
        case "left": {
          if (this.x - this.velocity > 0) this.x-= this.velocity;
          break;
        }
        case "right": {
          if (this.x + this.velocity < canvas.width) this.x+=this.velocity;
          break;
        }
        case "up": {
          if (this.y - this.velocity > 0) this.y-=this.velocity;
          break;
        }
        case "down": {
          if (this.y + this.velocity < canvas.height) this.y+=this.velocity;
          break;
        }
      }
    }
  }

  var player1 = new Player()

  var isKeyPressed = function(keyCode) {
    return keyDown[keyCode]
  }

  document.addEventListener('keydown', function(e) {
    var keyPressed = e.keyCode;

    keyDown[e.keyCode] = true;

    if (isKeyPressed(37)) { player1.changeDirection('left') }
    if (isKeyPressed(39)) { player1.changeDirection('right') }
    if (isKeyPressed(38)) { player1.changeDirection('up') }
    if (isKeyPressed(40)) { player1.changeDirection('down') }
    if (isKeyPressed(37)) { player1.changeDirection('left') }
    if (!player1.isCooldown() && isKeyPressed(32)) {
      player1.toggleCooldown()
      player1.bigSplash()
      var cd = 0;
      document.getElementById('cooldown').innerHTML = 'Big splash in CD, back in ' + (5 - cd) + ' seconds'
      var cdClear = setInterval( function() {
        cd++
        document.getElementById('cooldown').innerHTML = 'Big splash in CD, back in ' + (5 - cd) + ' seconds'

        if ( cd > 4 ) {
          document.getElementById('cooldown').innerHTML = 'Big splash READYYYYYYYYYYYYYYYYYYYY!'
          player1.toggleCooldown()
          clearInterval(cdClear)
        }
      }, 1000)
    }
  })

  document.addEventListener('keyup', function(e) {
    keyDown[e.keyCode] = false;
  })

  var draw = function() {
    player1._draw()
    window.requestAnimationFrame(draw)
  }

  window.requestAnimationFrame(draw)

  setInterval(function(){
    player1.move()
  }, 100)

  setInterval(function() {
    var hits      = 0,
        imageData = ctx.getImageData(0,0,canvas.width,canvas.height).data,
        pixels    = imageData.length;

    for(var i=0, ii=pixels; i<ii; i=i+4) {
      if (imageData[i] == 0 && imageData[i+1] == 0 && imageData[i+2] == 255) hits++;
    }

    document.getElementById('title').innerHTML = 'blue cover ' + Math.round(hits / (canvas.width*canvas.height) * 100) + '% of the area';
  }, 5000)
}