initVariables();
/////////////////////////////////////
// Variables globales


function checkCollision(ball, player) {
  const distX = Math.abs(ball.x - player.x);
  const distY = Math.abs(ball.y - player.y);
  return distX < ball.radius + player.radius && distY < ball.radius + player.radius;
}

function adjustBallDirection(ball, player, isPlayer2 = false) {
  const angle = (ball.y - player.y) / player.radius;
  ball.speed.y = angle * 8; // Ajusta la velocidad vertical
  ball.speed.x = (isPlayer2 ? -1 : 1) * Math.abs(ball.speed.x); // Cambia la dirección horizontal según el jugador
}

function drawGame() {
  //ctx.clearRect(0, 0, width, height);
  let fingerX = (pCfbr0.x + pCfbr4.x + pCfbr8.x + pCfbr12.x + pCfbr16.x + pCfbr20.x) / 6
  let fingerY = (pCfbr0.y + pCfbr4.y + pCfbr8.y + pCfbr12.y + pCfbr16.y + pCfbr20.y) / 6
  player1.position(fingerX, fingerY);
  player1.draw();

  fingerX = (pCfbl0.x + pCfbl4.x + pCfbl8.x + pCfbl12.x + pCfbl16.x + pCfbl20.x) / 6
  fingerY = (pCfbl0.y + pCfbl4.y + pCfbl8.y + pCfbl12.y + pCfbl16.y + pCfbl20.y) / 6
  player2.position(fingerX, fingerY);
  player2.draw();

  game.tick();

  const pointsr = [pCfbr0, pCfbr4, pCfbr8, pCfbr12, pCfbr16, pCfbr20];
  // Inicializar todas las propiedades `x` y `y` a 0
  pointsr.forEach(point => {
    point.x = -wVideo;
    point.y = -hVideo;
  });

  const pointsl = [pCfbl0, pCfbl4, pCfbl8, pCfbl12, pCfbl16, pCfbl20];
  // Inicializar todas las propiedades `x` y `y` a 0
  pointsl.forEach(point => {
    point.x = -wVideo;
    point.y = -hVideo;
  });
}

function gameLoop() {
  drawGame();
  //requestAnimationFrame(gameLoop);
}

function funcionGo(ctx, width, height) {
  if (lInit) {
    jsreinitProcedure();
    jsinitTimer(1);
    txClocalUp = "PING-PONG: ping pong a cuatro bandas";
    txClocalDown = "";
    lHandmano = true;
    game = {
      over: false,
      reset: function () {
        this.over = false;
        ball.reset();
        player1.reset();
        player2.reset();
      },
      tick: function () {
        if (!this.over) {
          // Mantener la pelota dentro de los límites verticales
          if (ball.y < ball.radius || ball.y > height - ball.radius) {
            ball.speed.y *= -1;
          }

          // Mantener la pelota dentro de los límites horizontales
          if (ball.x < ball.radius || ball.x > width - ball.radius) {
            ball.speed.x *= -1;
          }

          ball.speed.x = Math.max(Math.min(ball.speed.x, 15), -15);
          ball.speed.y = Math.max(Math.min(ball.speed.y, 15), -15);

          ball.x += ball.speed.x;
          ball.y += ball.speed.y;

          // Colisión con el jugador 1
          if (checkCollision(ball, player1)) {
            adjustBallDirection(ball, player1);
          }

          // Colisión con el jugador 2
          if (checkCollision(ball, player2)) {
            adjustBallDirection(ball, player2, true);
          }
        }

        ball.draw();
      }
    };

    ball = {
      x: width / 2,
      y: height / 2,
      radius: 40,
      speed: { x: 8, y: 4 },
      draw: function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "rgba(250, 0, 128, 0.7)";
        ctx.fill();
        ctx.closePath();
      },
      reset: function () {
        this.x = width / 2;
        this.y = height / 2;
        this.speed.x = 8;
        this.speed.y = 4;
      }
    };

    player1 = {
      x: 50,
      y: height / 2,
      radius: 50,
      reset: function () {
        this.x = 50;
        this.y = height / 2;
      },
      draw: function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "rgba(0, 128, 250, 0.7)";
        ctx.fill();
        ctx.closePath();
      },
      position: function (x, y) {
        this.x = x;
        this.y = y;
      }
    };

    player2 = {
      x: width - 50,
      y: height / 2,
      radius: 50,
      reset: function () {
        this.x = width - 50;
        this.y = height / 2;
      },
      draw: function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "rgba(0, 128, 250, 0.7)";
        ctx.fill();
        ctx.closePath();
      },
      position: function (x, y) {
        this.x = x;
        this.y = y;
      }
    };
    // Inicia el juego
    game.reset();
  }
  gameLoop();
}

/////////////////////////////////////////////////////////////////////////////
