Switch React JS 中的 IF 语句答案

【问题标题】：IF statement in Switch React JSSwitch React JS 中的 IF 语句
【发布时间】：2022-01-18 15:57:00
【问题描述】：

我正在用 React 制作一个蛇游戏，它运行良好，但我定义了一个开关盒，您可以在其中使用箭头键控制蛇。但是有一个问题，当蛇向一个方向移动时，我不希望它能够向相反的方向移动。如防止沿同一轴改变方向，即如果当前向右移动则向左，如果当前向上移动则向下

现在我想知道如何在我的 switch case 中为它定义一个 If 语句？到目前为止，我的代码如下所示：

 //handle user input
  const handleKeyPress = (e) => {
e = e || window.event;
setStarted(true);
switch (e.keyCode) {
  case 38:
    setDirection('UP');
    break;
  case 40:
    setDirection('DOWN');
    break;
  case 37:
    setDirection('LEFT');
    break;
  case 39:
    setDirection('RIGHT');
    break;
  default:
    break;
  }
  };

 //moving the snake
 const moveSnake = () => {
//take temporary positions
let tempSnakePosition;
let dir;
//get fresh cordinates
setSnakeCordinates((prev) => {
  tempSnakePosition = [...prev];
  return prev;
});
setDirection((prev) => {
  dir = prev;
  return prev;
});
//find head
let tempHead = tempSnakePosition[tempSnakePosition.length - 1];
//change head
let l = tempHead.left;
let t = tempHead.top;
switch (dir) {
  case 'RIGHT':
    if ('LEFT' && 'UP')
      l = tempHead.left + size

    break;
  case 'LEFT':
    if ('RIGHT')
      l = tempHead.left - size;
    break;
  case 'DOWN':
    t = tempHead.top + size;
    break;
  case 'UP':
    t = tempHead.top - size;
    break;
  default:
    break;
}

【问题讨论】：

标签： reactjs switch-statement

【解决方案1】：

尝试像这样使用dir 变量：

//handle user input
const handleKeyPress = (e) => {
e = e || window.event;
setStarted(true);
switch (e.keyCode) {
  case 38:
    if(dir !== 'DOWN')
      setDirection('UP');
    break;
  case 40:
    if(dir !== 'UP')
      setDirection('DOWN');
    break;
  case 37:
    if(dir !== 'RIGHT')
      setDirection('LEFT');
    break;
  case 39:
    if(dir !== 'LEFT')
      setDirection('RIGHT');
    break;
  default:
    break;
  }
};

【讨论】：

【解决方案2】：

const [prevDir, setPrevDir] = useState('');  

const handleKeyPress = (e) => {
    switch (e.keyCode) {
        case 38:
            if(prevDir !== 'DOWN') {
                setDirection('UP'); 
            }
            break;
        case 40:
            if(prevDir !== 'UP') {
                setDirection('DOWN');
                break;
            }
        case 37:
            if(prevDir !== 'RIGHT') {
                setDirection('LEFT');
            }
            break;
        case 39:
            if(prevDir !== 'LEFT') {
                setDirection('RIGHT');
                break;
            }
        default:
            break;
      }
}

setDirection((prev) => {
    dir = prev;
    setPrevDir(prev);
    return prev;
 });

【讨论】：

谢谢，可惜没解决问题，还是可以往反方向移动