var c = document.getElementById("myCanvas")
var ctx = c.getContext("2d")

var all_balls = []
var explosions = []
var level = 1
var score = 0
var can_click = false

buildBalls(4)

function gameLoop() {
  drawBackground()
  drawBalls()
}
setInterval(gameLoop, 10)

function buildBalls(number) {
  all_balls = []
  for (var i = 0; i < number; i++) {
    var ball = {
      x:Math.random() * c.width,
      y:Math.random() * c.height,
      x_speed:Math.random() * 3 + 1,
      y_speed:Math.random() * 3 + 1,
      color:"black",
      size:10
    }
    all_balls.push(ball)
  }
}

function drawBalls() {


  for (var i = all_balls.length - 1; i >= 0; i--) {
    var ball = all_balls[i]
    updateBall(ball)
    drawObject(ball)
  }
}

function updateBall(ball) {
  if (ball.x > c.width || ball.x < 0) {
    ball.x_speed = ball.x_speed * -1
  }
  if (ball.y > c.height || ball.y < 0) {
    ball.y_speed = ball.y_speed * -1
  }

  ball.x = ball.x + ball.x_speed
  ball.y = ball.y + ball.y_speed
}

function drawObject(obj) {
  ctx.beginPath()
  ctx.arc(obj.x,obj.y,obj.size,0,2*Math.PI)
  ctx.fillStyle = obj.color
  ctx.fill()
}

function drawBackground() {
  ctx.beginPath()
  ctx.rect(0,0,c.width,c.height)
  ctx.fillStyle = "white"
  ctx.fill()
}

c.onclick = function(event) {
  if (can_click) {
    can_click = false
    var x = event.pageX - c.offsetLeft
    var y = event.pageY - c.offsetTop

    makeExplosion(x, y)
  }
}

function makeExplosion(x, y) {
  var exp = {

  }
  explosions.push(exp)
}