Question

我正在构建一个类似于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;
  }

Answer 1

假设您有一个长度为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坐标。可视化：

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

Answer 2

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

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

  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;
  };

JavaScript缩短长if-else

2 个答案: