var canvas = document.getElementById('main');
var c = canvas.getContext('2d');
document.addEventListener('keydown', keydown);

function drawBall(x, y) {
    c.beginPath();
    c.arc(x, y, 10, 0, 2* Math.PI);
    c.fill();
}

var offset = 10;

function keydown(event) {
  if (event.keyCode == 40) {
    if (offset < 200) {
      offset = offset + 20;
    }
  }
  if (event.keyCode == 38) {
    if (offset > 0) {
      offset = offset - 20;
    }
  }
}
/*
function onDown(even) {
  if (event.keyCode == 40) {
    if (batX < 200) {
      batX = batX + 20;
    }
  }
  if (event.keyCode == 38) {
    if (batX > 0) {
      batX = batX - 20;
    }
  }
}

*/
var x = 0;
var y = 0;
var vx = 9;
var vy = 4;

function draw() {
    c.clearRect(0, 0, 400, 300);
    drawBall(x, y);

    if ((x + vx) < 20 && y > offset && y < offset + 100) {
      x = 20 - (x + vx - 20);
      vx = -vx;
    } else if ((x + vx) > 400) {
      x = 400 - (x + vx - 400);
      vx = -vx;
    } else if ((x + vx) < 0) {
      x = 0 - (x + vx);
      vx = -vx;
   //   alert('vesztettel te utolso luzer');
    } else {
      x = x + vx;
    }
    if ((y + vy) > 300) {
      y = 300 - (y + vy - 300);
      vy = -vy;
    } else if ((y + vy) < 0) {
      y = 0 - (y + vy);
      vy = -vy;
    } else {
      y = y + vy;
    }
    c.fillRect(10, offset, 10, 100);
}

setInterval(draw, 1000 / 30);