如何仅使用键盘 React 移动数字

Question

export const Chessboard: React.FC = () => {
  const board = [];

  for (let j = horisontalAxis.length - 1; j >= 0; j -= 1) {
    for (let i = 0; i < verticalAxis.length; i += 1) {
      const num = j + i + 2;
      let image = '';

      figures.forEach(el => {
        if (el.x === i && el.y === j) {
          image = el.image;
        }
      });

      board.push(<Cell key={`${i}, ${j}`} image={image} num={num} />);
    }
  }

  return (
    <div className="chessboard">{board}</div>
  );
};

我正在尝试制作仅适用于键盘的国际象棋游戏。 如何在没有鼠标的情况下使用键盘选择图形并进行移动？

Answer 1

实现一个游标。 创建一个保存光标当前坐标 (x,y) 的状态。 还要在板上绘制光标（如单元格周围的边框）。 然后监听箭头键的按键并使用它来更新光标位置。

然后你需要更多的键（空格，回车），这些让你在光标位置选择一块，或者放下一个选定的块。 这会增加一些状态（持有的部分，可能为空），您需要考虑如何将其可视化。