如何设置网格光标可以在整个网格中工作？

// 获取网格容器
const gridContainer = document.querySelector('.grid-container');
// 获取光标元素
const cursor = document.querySelector('.cursor');

// 设置光标样式
cursor.style.width = '20px';
cursor.style.height = '20px';
cursor.style.backgroundColor = 'red';

// 设置光标移动规则
let x = 0;
let y = 0;

function moveCursor(e) {
  if (e.key === 'ArrowRight') {
    x++;
  } else if (e.key === 'ArrowLeft') {
    x--;
  } else if (e.key === 'ArrowDown') {
    y++;
  } else if (e.key === 'ArrowUp') {
    y--;
  }

  // 确保光标不会离开网格
  if (x < 0) x = 0;
  if (y < 0) y = 0;
  if (x > gridContainer.clientWidth - cursor.clientWidth) x = gridContainer.clientWidth - cursor.clientWidth;
  if (y > gridContainer.clientHeight - cursor.clientHeight) y = gridContainer.clientHeight - cursor.clientHeight;

  // 更新光标位置
  cursor.style.transform = `translate(${x}px, ${y}px)`;
}

document.addEventListener('keydown', moveCursor);