JavaScript缩短长if-else

时间:2018-11-12 17:29:24

标签: javascript html

我正在构建一个类似于minesweeper的应用程序,其中用户单击网格上的正方形,该应用程序将告诉用户周围多少个正方形包含“ X”。当我只向上,向下,向左和向右检查时,我的代码可以工作。我的代码开始变得很长,因为要考虑很多边缘情况。我将开始检查对角线是否为“ X”,我想提出一种更短的方法来检查这些情况。

任何人都可以帮助我开发一个for循环或其他捷径来编写此代码。到目前为止,这是我对8x8网格的了解。

这是我的沙盒:https://codesandbox.io/s/6y6wzo001w

showNumber= () => {
    let Xcounter = 0;
    console.log(this.props.keys)
    console.log(this.props.reduxState.reducer.board[this.props.keys]) 
    if(this.props.keys% 8 ===0){
        if(this.props.reduxState.reducer.board[this.props.keys +1] === 'X'){
          Xcounter++
        }
      }
    if(this.props.keys% 8 ===7){
        if(this.props.reduxState.reducer.board[this.props.keys -1] === 'X'){
          Xcounter++
        }
      }
    if(this.props.keys/8 <1){
      if(this.props.reduxState.reducer.board[this.props.keys +8] === 'X'){
        Xcounter++
      }
    }
    if(this.props.keys/8 >=7){
      if(this.props.reduxState.reducer.board[this.props.keys -8] === 'X'){
        Xcounter++
      }
    }
    if(this.props.keys % 8 !== 0 && this.props.keys % 8 !== 7){
      if(this.props.reduxState.reducer.board[this.props.keys +1] === 'X'){
        Xcounter++

      }
      if(this.props.reduxState.reducer.board[this.props.keys -1]=== 'X'){
        Xcounter++
      }

    }
    if(Math.floor(this.props.keys)/8 > 0 && Math.floor(this.props.keys)/ 8 < 7){
      if(this.props.reduxState.reducer.board[this.props.keys +8] === 'X'){
        Xcounter++

      }
      if(this.props.reduxState.reducer.board[this.props.keys -8]=== 'X'){
        Xcounter++
      }
    }
    if(this.props.id === 'X'){
      this.setState({...this.state, clicked: true, counter: 'X'})
      return this.state.counter;
    }
    this.setState({...this.state, clicked: true, counter: Xcounter})
    return this.state.counter;
  } 

2 个答案:

答案 0 :(得分:0)

假设您有一个长度为64的数组this.props.reduxState.reducer.board,其中包含'X'或非'X',则可以像这样简单地遍历x和y方向:

 let Xcounter = 0;
 //save the board for shorter and more readable code
 let board = this.props.reduxState.reducer.board;
 //the current index we've clicked on
 let c = this.props.keys;
 //we're going to check if we're at the edge of the board.
 //I'll explain these later.
 let minX = c%8 == 0 ? 0 : -1;
 let maxX = c%8 == 7 ? 0: 1;
 let minY = (c-minX)/8 == 0 ? 0 : -1;
 let maxY = (c-minY)/8 == 7 ? 0 : 1;
 for( let x = minX; x <= maxX; ++x ){
     for( let minY = -1; y <= maxY; ++y ){
         if( board[c+x+8*y)] == 'X' ){ Xcounter++; }
     }
 }
 //we also checked the square itself, but we didn't want to
 if( board[c] == 'X' ){ Xcounter--; }

这假设板子的位置是从右到左,然后从上到下,而不是相反(即board[7]是右上角,而不是左下角)。 / p>

就实际情况而言;本质上,我们查看是否在木板的边缘,并找到我们必须检查的相对x坐标和y坐标。可视化:

example board

这里minX=0,因为转到当前单击的正方形c的左侧会使我们脱离常规。 maxX=1,因为我们可以检查所单击的正方形的右侧。同样,我们检查y坐标。

答案 1 :(得分:0)

假设您的支票已经正确,我们就可以使用已有的支票。

尝试以更简洁的样式重写您实际拥有的东西,以作为第一步的概览,并在第二步引入板侧常量:

  showNumber = () => {
    const BOARD_SIDE = 8;
    let Xcounter = 0;
    let keys = this.props.keys;
    let board = this.props.reduxState.reducer.board;
    console.log(keys);
    console.log(board[this.props.keys]);

    for (let edge = BOARD_SIDE; edge < BOARD_SIDE * BOARD_SIDE; edge += BOARD_SIDE) {
      if (keys % edge === 0 && board[keys + 1] === "X") Xcounter++;
      if (keys % edge === (edge - 1) && board[keys - 1] === "X") Xcounter++;
      if (keys / edge < 1 && board[keys + edge] === "X") Xcounter++;
      if (keys / edge >= (edge - 1) && board[keys - edge] === "X") Xcounter++;
      if (keys % edge !== 0 && keys % edge !== (edge - 1)) {
        if (board[keys + 1] === "X") Xcounter++;
        if (board[keys - 1] === "X") Xcounter++;
      }
      if (Math.floor(keys) / edge > 0 && Math.floor(keys) / edge < (edge - 1)) {
        if (board[keys + edge] === "X") Xcounter++;
        if (board[keys - edge] === "X") Xcounter++;
      }
    }

    if (this.props.id === "X") {
      this.setState({ ...this.state, clicked: true, counter: "X" });
      return this.state.counter;
    }

    this.setState({ ...this.state, clicked: true, counter: Xcounter });
    return this.state.counter;
  };