var canvas, ctx, container;
canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 800;
ctx = canvas.getContext("2d");
var ball = {
y: 480
};
var touchGround = false;
var pull= 0.43;
var vy;
var gravity = pull;
var gameRunning = 0;
var i = Math.floor(Math.random()*11);
var timer;
color = ["red","blue","green","yellow","purple","pink","silver","teal","turquoise","magenta","cyan", "black"];

function ballMovement() {
  vy += gravity;
  ball.y += vy;

  if (ball.y + ball.radius > canvas.height) {
   ball.y = canvas.height - ball.radius;
   vy = 0;

   var img = document.getElementById('gameOver');
   ctx.drawImage(gameOver, canvas.width/2-450, 100)
   ball.radius = 0;
   clearInterval(timer);
   gameRunning = 0;

  }
}

function init() {
  if(!document.querySelector('.container')){
    setupCanvas()
    var img = document.getElementById('gameOver');
  img.style.visibility = 'hidden';
  }

  vy = -19;
  var y1 = 450

  ball = {
    x: canvas.width/2,
    y: ball.y,
    radius: 20,
    status: 0,
    color: color[i]
  };

  clearInterval(timer);
  timer = setInterval(draw, 1000 / 35);
  gameRunning = 1;
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
  ctx.fillStyle = ball.color;
  ctx.fill();
  ctx.closePath()
  ballMovement();
}


function setupCanvas() {
  container = document.createElement('div');
  container.className = "container";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(container);
  container.appendChild(canvas);
  ctx.strokeStyle = "#ffffff";
  ctx.lineWidth = 2;
}

window.onclick = function(){
  vy += (ball.y-(canvas.height-canvas.height))
  pull + 0.01;
  touchGround = false;
  if(!gameRunning){
    init();
  }
  else{
    vy = -19;
  }

  vy+((canvas.height-canvas.height)-ball.y);
}
//Goal