Javascript 屏幕右侧屏障上的产卵点""

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const unitSize = 25;
let score = 0;
let gameRunning = true;
let gameInterval;
let sheep = [];
const player = {
  x: 0,
  y: 0,
  dx: 0,
  dy: 0,
};
const barriers = [
  { x: 0, y: 0, width: unitSize * 5, height: canvas.height },
  {
    x: canvas.width - unitSize * 5,
    y: 0,
    width: unitSize * 5,
    height: canvas.height,
  },
];
document.addEventListener('keydown', changeDirection);

function gameStart() {
  createSheep();
  drawGame();
  updateGame();
}

function updateGame() {
  if (gameRunning) {
    gameInterval = setInterval(() => {
      gameLoop();
      drawGame();
    }, 200);
  } else {
    clearInterval(gameInterval);
    gameOver();
  }
}

function changeDirection(event) {
  if (!gameRunning) return;
  const keyPressed = event.keyCode;
  const goingUp = player.dy === -unitSize;
  const goingDown = player.dy === unitSize;
  const goingRight = player.dx === unitSize;
  const goingLeft = player.dx === -unitSize;

  switch (keyPressed) {
    case 37:
      if (!goingRight) {
        player.dx = -unitSize;
        player.dy = 0;
      }
      break;
    case 38:
      if (!goingDown) {
        player.dy = -unitSize;
        player.dx = 0;
      }
      break;
    case 39:
      if (!goingLeft) {
        player.dx = unitSize;
        player.dy = 0;
      }
      break;
    case 40:
      if (!goingUp) {
        player.dy = unitSize;
        player.dx = 0;
      }
      break;
  }
}

function gameLoop() {
  if (!gameRunning) return;
  movePlayer();
  checkCollision();
}

function movePlayer() {
  player.x += player.dx;
  player.y += player.dy;
}

function checkCollision() {
  if (
    player.x < 0 ||
    player.y < 0 ||
    player.x >= canvas.width ||
    player.y >= canvas.height
  ) {
    gameRunning = false;
    gameOver();
  }

  sheep.forEach((sheepItem, index) => {
    if (player.x === sheepItem.x && player.y === sheepItem.y) {
      score++;
      sheep.splice(index, 1);
      createSheep();
    }
  });
}

function createSheep() {
  while (sheep.length < 3) {
    let newSheep = {
      x:
        Math.floor(Math.random() * ((canvas.width - unitSize * 3) / unitSize)) *
        unitSize,
      y: Math.floor(Math.random() * (canvas.height / unitSize)) * unitSize,
    };

    let collision = sheep.some(
      (sheepItem) => sheepItem.x === newSheep.x && sheepItem.y === newSheep.y
    );
    let playerCollision = player.x === newSheep.x && player.y === newSheep.y;

    if (!collision && !playerCollision) {
      sheep.push(newSheep);
    }
  }
}

function drawGame() {
  if (!gameRunning) return;

  ctx.fillStyle = '#000000';
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = '#888888';
  barriers.forEach((barrier) => {
    ctx.fillRect(barrier.x, barrier.y, barrier.width, barrier.height);
  });

  ctx.fillStyle = 'purple';
  ctx.fillRect(player.x, player.y, unitSize, unitSize);

  ctx.fillStyle = 'aqua';
  sheep.forEach((sheepItem) => {
    ctx.fillRect(sheepItem.x, sheepItem.y, unitSize, unitSize);
  });

  ctx.font = '20px Arial';
  ctx.fillStyle = 'white';
  ctx.fillText('Poeng: ' + score, canvas.width - 100, 20);
}

function gameOver() {
  gameRunning = false;
  ctx.font = '48px Arial';
  ctx.fillStyle = 'red';
  ctx.textAlign = 'center';
  ctx.fillText('Spillet er slutt', canvas.width / 2, canvas.height / 2);
}

gameStart();

这是我的代码，我希望羊产卵的羊在右边的障碍，我需要有3.这里是我认为需要改变的函数，以及X值是准确的.

function createSheep() {
  while (sheep.length < 3) {
    let newSheep = {
      x:
        Math.floor(Math.random() * ((canvas.width - unitSize * 3) / unitSize)) *
        unitSize,
      y: Math.floor(Math.random() * (canvas.height / unitSize)) * unitSize,
    };

我试过将X值更改为不同的东西，但每次我几乎有进展，它最终都是bug，它在障碍的右侧产生了不到3只羊.