start-game.js

function start(canvas, radius = 10) {
  const mazesPaths = generateBackground();
  const { x, y } = findAStartingPoint(mazesPaths.wallsPath, radius);
  renderPlayer(canvas, {currX: x, currY: y, playerRadius: radius}, mazesPaths.wallsPath);
}

function renderPlayer(canvas, {currX, currY, playerRadius}, wallsPath) {
  let radius = playerRadius, x = currX, y = currY;
  if (spaceClicked) {
    radius = 2;
  }
  const ctx = canvas.getContext("2d");
  if (clickedKey) {
    if (clickedKey.includes('Down') || clickedKey.includes('Up')) {
      y = currY + KEYBOARD_KEYS[clickedKey] * PIXEL_RATIO / 2;
    } else {
      x = currX + KEYBOARD_KEYS[clickedKey] * PIXEL_RATIO / 2;
    }
  }

  if (y - radius < 0 || y + radius >= CANVAS_HEIGHT || x - radius < 0 || x + radius >= CANVAS_WIDTH || isCircleInPath({radius, x, y}, wallsPath)) {
    x = currX;
    y = currY;
  } else {
    const playerPath = new Path2D();
    playerPath.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    ctx.fillStyle = "blue";
    ctx.fill(playerPath);
  }

  requestAnimationFrame(() => renderPlayer(canvas, {currX: x, currY: y, playerRadius}, wallsPath));
}