如何仅使用键盘 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>
  );
};

I am trying to make chess game that works only with keyboard. How can I select figure with keyboard without mouse and make move also?

Answer 1

Implement a cursor. Make a state that holds the current coordinates of the cursor (x,y). Also draw the cursor on your board (like a border around the cell). Then listen for key presses of the arrow keys and use this to update the cursor position.

Then you need some more keys (space, enter), and those make you select a piece at the cursor position, or put down a selected piece. This adds some more state (held piece, which could be null), and you need to think about how to visualize this.