function pong() {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');

  canvas.height = 500;
  canvas.width = 1000;

  const cw = canvas.width;
  const ch = canvas.height;

  const ballSize = 20;
  let ballX = cw/2 - ballSize/2;
  let ballY = ch/2 - ballSize/2;

  const paddleWidth = 20;
  const paddleHeight = 100;
  const playerX = 70;
  let playerY = 20;
  const aiX = 910;
  let aiY = 20;
  const lineHeight = 16;
  const lineWidth = 6;

  let ballSpeedX = 4;//tutaj okreslamy poczatkowa predkosc pilki
  let ballSpeedY = 4;// o predkosciach pogadamy sobie nqastepnym razem, tak od strony fizycznej ;p



  function drawPlayer() {
    context.fillStyle = "blue";
    context.fillRect(playerX, playerY, paddleWidth, paddleHeight);
  }

  function drawAi() {
    context.fillStyle = "green";
    context.fillRect(aiX, aiY, paddleWidth, paddleHeight);
  }

  function drawBall() {
    context.fillStyle = "orange";
    context.fillRect(ballX, ballY, ballSize, ballSize);

    ballX += ballSpeedX; // z kazdym krokiem przesuwamy pilke
    ballY += ballSpeedY; // tu to samo

    if (ballY <= 0 || ballY + ballSize >= ch) { // tutaj sprawdzamy czy pilka nie wychodzi poza krawedzie
      ballSpeedY = -ballSpeedY;
    }
    if (ballX <= 0 || ballX + ballSize >= cw) {
      ballSpeedX = -ballSpeedX;
    }
  }

  function drawTable() {
    context.fillStyle = "black";
    context.fillRect(0, 0, cw, ch);
    for (let linePosition = 20; linePosition < ch; linePosition = linePosition + 30){
      context.fillStyle = "grey";
      context.fillRect(cw/2 - lineWidth/2, linePosition, lineWidth, lineHeight);
    }
  }
  function game() {
    drawTable();
    drawBall();
    drawPlayer();
    drawAi();

  }

  setInterval(game, 1000/60);

}

window.onload = pong;